DESIGN YOUR APP: GETTING STARTED WITH YOUR PRODUCT DETAIL PAGE
Product pages are one of the most impactful destinations for your customers.
This can be the final push, to convince your customer to add that item to their cart before completing their checkout.
You’ll want to be strategic, well organized and..
Let me guess, on brand?
(The host looks directly into the camera; answers with authority and is not phased by the guest’s sarcasm to the question)
Exactly, you’ll always want it to be on-brand!
And, by utilizing Tapcart’s product page builder..
You can create captivating and convincing content to increase overall engagement and conversion rates.
So, to make this happen..
We’ll introduce you to five things..
Setting up your product page builder in Shopify..
Where to access this in Tapcart..
How to preview a product in your builder..
And, designing your product detail page with blocks and dynamic layouts, such as conditional tagging.
So, before setting this thing up..
Let me explain what’s even going on here..
You have products in your Shopify store..
And, as a ‘Tapcart Core User’..
These products automatically populate your mobile app, with a stock design.
As an ‘Ultimate’ or ‘Enterprise User’..
You have access to the ‘Product Page Builder’ in Tapcart.
What this builder does is integrate products directly from your Shopify store..
Into this editor..
Allowing you to edit and improve the shopping experience for your mobile app users.
And, to do this..
We simply need to approve permission in your Shopify dashboard, that we can make this integration.
So, before using the product page, you’ll be prompted to approve permission in your Shopify dashboard..
You will complete this Under ‘Manage Other Data’ with ‘Product Tags’.
It’s important to note here that you must be the Shopify account owner to set this up.
If you’re not the owner, then you’ll receive an error message.
To continue from where we left off..
And, you’re ready to go!
Now, in your Tapcart dashboard..
Under the ‘Design Tab’..
Choose ‘Product Page’..
And, this is where we can access the ‘Product Page Builder’.
We have this menu to choose any product from our ‘Shopify store’ that is ‘visible’ in our ‘mobile app store’..
And, we can preview what specific products look like from a customer's perspective on this page.
I can scroll to find a product..
Search for one..
Or, even quickly preview random products, to see how the product page looks and feels for a variety of items.
And, here’s something important to note..
All of the designs and edits we make in the product page builder will be applied to all the products in our mobile app.
The only exception is utilizing ‘conditional tagging’..
To showcase different elements for specific products, which we’ll cover at the end of this lesson.
For now, simply note that any “non-conditional” edits we make are seamlessly applied to all of the products in our mobile app.
Now, for actually designing the ‘Product Detail Page’ that our app users engage with..
Similar to designing your app with blocks, you can do the same with the ‘Product Page Builder’.
Simply drag-and-drop a variety of blocks..
To upload unique content and create an experience exclusive to your brand.
And, similar to other design aspects in Tapcart, any changes you make here will update your live app in real-time.
Now, back to conditional tagging.
Only some product blocks include this capability..
But essentially this means..
These blocks will display on specific product pages..
Based on their ‘Shopify product tags’.
We can set this up for a ‘Complete-the-Look’ campaign to drive traffic..
And, highlight other items within this individual products collection.
Or, for product’s that are “on sale” for a limited time.
We’ll dive deeper into this one later, but..
For now, simply note that there is a switch here for ‘Enterprise Users’ only..
And, by enabling ‘Show all other conditional blocks’..
Any items that would normally be hidden due to conditional tagging; are now visible in the product page builder to edit.
And there’s your quick introduction to your ‘Product Detail Page’ and ‘Product Page Builder’ in Tapcart.