Learn How to Design an Impactful Product Page
Product pages are one of the most impactful destinations for your customers, having a well-organized and strategic layout for your product page can be the final push to convince your customer to add to cart and checkout. By utilizing Tapcarts’ product page editor, you can create captivating and convincing content to increase overall engagement and conversion rates.
In this lesson:
- We’ll walk you through how to customize your product page layout.
- Learn how to leverage product blocks to create an impactful product page.
Product Page Walkthrough
In your Tapcart Dashboard, navigate to the drop-down under ‘Design’ and select ‘Product Page’ to edit your page layout. When you first open this page, you will see one of your products displayed on the right-hand side. This is your default view that is populated by your best-selling product. To see what the page will look like with other products, simply click the shuffle icon or the page icon in the top right-hand corner of the product and select the product you would like to view.
Important Note- The product page builder customization applies to all products.
Customizing Your Product Page
On the left-hand side of your Product Page is your block bank. Simply drag and drop your blocks into your product page display to update your app and create a dynamically engaging product page. Below is a summary of each block in your block bank.
Image Banner Block
With the Image Banner Block, you can upload an image banner that will appear on the product page of your mobile app. The banner can remain static, link to a collection, or an in-app webpage. Use this block to highlight promotion banners, such as ‘Free Shipping Friday’ or ‘In-App Exclusive’!
For Enterprise Merchants: Use Dynamic Layouts powered by Shopify Product Tags to add flexibility to your product page layout. A Dynamic Layouts block will only appear in your app’s product page if the product has any of the tags associated with that block. This feature will allow you to display content for limited promotions, product line content, and more!
Have more questions about how Dynamic Layouts work? Check out our resource guide below.
Video Banner Block
With the Video Banner Block, you can upload a video and choose a thumbnail image as a banner on the product page layout. To upload a video or image, simply click on the icon and select the video or image file. We recommend videos under 5 MB’s for optimized load times in the app when using LTE/device data. Use this block to highlight your lookbook and lifestyle content!
Product Video Block
The product video block gives you the ability to display your brand’s Shopify product videos. This block will pull its data from the Shopify product model’s media.
Important Note- This block does not play videos uploaded to YouTube. It only plays the videos you have manually uploaded to your Shopify product media.
Share Block
Utilize the Share Block to make it easy for your customers to share products they love with the ones they love!
When a user taps on this from the product page it will open the share in iOS or Android share sheets.
Product Description Block
The Product Description block allows you to display all other relevant information for your products. Change the title or main content as you see fit (ie., Product Details, Product Information, etc.).
Choose how you want your content to be displayed by selecting an accordion view or a new modal view. The modal view will bring up a new block that displays the content, while an accordion will display the content as a dropdown.
Important Note - This block has one required piece of data:
- Display Method
- Modal (Default) - present new view to display content
- Accordion - expand the view to display content
- Title (Optional)
- Default to “Product Description”
Link Block
The Link block provides flexibility to display additional details in the form of an image or link out to a webview.
Edit the title to explain what information this block will present or edit the content to add any additional description to the block.
Important Note - This block has three pieces of data that is required:
- Title
- Default to 'Details'
- Content
- Upload an image
- Paste in a valid web URL
- Choose to display the product’s description information from the Shopify product view model
- Display Method
- Modal (default): present new view to display content
- Accordion: expand the view to display content
Product Tags Block
Powered by Shopify Product Tags, use this block to call attention to important information on your products. This block allows you to display crucial product tags, such as “limited time promo”, “pre-order” or “no returns”.
A maximum of three tags will show on any given product page and the display will be prioritized based on the order they were added.
Variant Blocks
A variant block allows your users to select a variant of a product, such as size or color. There are two types of variant block displays to choose from; the dropdown or inline!
The Drop-down Variant Selection Block, allows you to create a seamless shopping experience in the form of a drop-down and minimizes screen real estate on your product page.
The Inline Variant Selection Block will display all the variant options for the product without the need for a drop-down.
Installment Provider Block
The Installment Provider Block will appear only if you have one of the following Installment providers enabled:
- Afterpay
- Sezzle
- Klarna
- Quadpay
An installment provider will allow your users to spread out their payments for a certain order. Use this block in your product page layout to help increase your average order values.
Recently Viewed Block
Create a user-specific experience by utilizing the Recently Viewed Block. This block allows users to see the last twelve products they have viewed.
FourSixty Block
With the FourSixty integration, you can bring the power of your user-generated content to your product detail page. FourSixty allows you to display dynamic content from your social platforms to drive conversion. Now you can also modify the highlighted text on this view!
Reviews Block
The Reviews Block will display if you set up one of our review integrations in your dashboard. Use this block to arrange the placement of your reviews and harness the power of your social proof for optimal conversion.
This block applies to the following integrations:
- Yotpo Reviews
- Stamped Reviews
- TrustSpot Reviews
- Okendo
Nosto Product Recommendations Block (Enterprise Customers Only)
If you have Nosto enabled, you can utilize the Nosto Recommendations block. This block gives you the ability to display up to four Nosto product recommendation carousels on your product detail page. Creating a holistic customer experience and increasing your average order value.
Important Note - There are three settings for this feature:
- Present the option to name the view
- Default to “You may also like”
- Present the option to select the relationship type
- Default to “BOUGHT_TOGETHER”
Dynamics Layouts Block Visibility (Enterprise Customers Only)
Add Dynamic Layouts powered by Shopify Product Tags to add flexibility to your product page layout. Please note, the Dynamic Layouts block will only appear on your app’s product page if the product has any of the tags associated with the block.
A Dynamic Layout will allow you to display content for limited promotions, product line content, and more!
In order to add Dynamic Layout, simply click on the block and add the tag under the conditional tag section.
Multiple tags can be added to each block. If this block had the tags ‘Men’, ‘Small’, and ‘Red’, the block would appear if a user searched any one of those keywords.
For more information and tips on how to use this feature, check out this blog article: Boost Product Page Conversion with a Shopify Mobile App.
Considerations
The functionality and blocks vary based on your Tapcart plan:
- You must be on Tapcarts Ultimate or Enterprise Plan to utilize this feature
- Tapcart Enterprise has access to Dynamic Layouts for flexible product pages and Nosto product recommendation blocks
Not on Tapcart Ultimate or Enterprise but want to learn more about using the Product Page Builder? You can talk to one of our mobile experts by accessing the Product Page section within your dashboard. Simply choose to open the Product Page section and select ‘talk to a mobile expert’ to get started!
More Questions
To learn more about Tapcart, visit Tapcart Academy to become a mobile app expert!
If you have additional questions on getting started with the product page builder, we’re happy to help! Please reach out to a Tapcart Team member through our LiveChat in your dashboard or you can email us at help@tapcart.co.