Product Detail
Last updated
Last updated
Go to Product Templates > Create new product template
When create product template, you can choose between whole product layout and product detail section
Go to product Detail Section > Editing > General tab
Use can pick a product to preview with current layout.
A wishlist is an eCommerce feature that allows shoppers to create personalized collections of products they want to buy and save them in their user account for future reference. Wishlists signify a customer’s interest in a product without an immediate intent to purchase.
For Wishlist working, you need go to Setting app > Install Wishlist app > Choose App to use
Enable to show the labels for products like New, Sale or Sold out.
Make sure you installed Review App an choose app using in this section
You go to Settings > Third party app settings > Review apps
Then you need turn on this option on product detail page
Enable share function
It contains: Sku, categories.
All information in this section take from Products on Shopify.
Use zoom: With Product Image Zoom, customers can enlarge product images for a closer look at material, texture, and finer details.
Select main swatch option. Choose your product option display as Swatch.
The Swatches Layout is a group that consists of small squares/ circles/ rectangles...etc called "swatches." When selected a swatch, it becomes the active foreground for the image you are viewing on Product page.
Select main swatch option: Typing the name of a option means that you turn this option into dislaying under Swatch Layout style. The names of options are got from Shopify Admin > Products > Variants
I.e)
If you type option name "Color". Color option shows as Swatch Layout.
Learn how to allocate each circle a specific color here Product Swatch color.
If you type option name "Size". Size option shows as Swatch Layout.
and Color option back to the normal style.
Only the option Color is displayed perfectly in Swatch Layout because it's color itself. So you should always fill in this field "Color" as default.
Another notable feature is "Is swatch image".
When you set Color as swatch layout and enable Is swatch image, all the colors are replaced by product images. This Image take from product's variant images on Shopify.
This section take text from product's description.
You can write anything you want by many tools in section.
Write your shipping condition or anything you want.
If product has review, it will be showed here.
You have to choose and install app to use this section by go to Settings > Third party apps > Review apps.
If you added tab review before, this section will show reviews and review form to submit.
Review form only show when live page.
Here you can add the tabs for your product layout like Description, Product attributes, Addition information, FAQ and Review tabs.
First, create a new Product template or go to edit your product template from the LayoutHub app.
You will see the PRODUCT TABS in the Setting menu.
You can completely change the names and the content for the tabs. Except for the Description tab.
Here we use Specific tabs created from headings in the product description so they're perfect for information that isn't shared by multiple products such as ingredients, specifications and materials.
To enable specific tabs please follow the steps bellow:
+ Go to customize your product page.
+ Scroll down to the PRODUCT TABS tab and turn on the Generate tab from Description option.
+ Select the heading that you will use as a specific tab. For example I select Heading 4 to make the tab.
+ Save your page.
Tabs that are specific to a single product are generated from headings that you add into the product description content.
To create a specific tab, please follow the steps bellow:
+ Click Products from your Shopify admin menu.
+ Click on a product to edit it.
+ Click the Description area to begin editing the product description.
+ Click and drag over the name text to select it.
+ Click the Formatting button from the Description area toolbar and click Heading 4 from the formatting dropdown menu. For example I want to make the TEMPUS CONSECTETUR and FIND YOUR SIZE texts to H4 tag.
+ Click on show HTML button to check the tags.
+ The content of the title and content should not contain div, script or main tags, like this:
+ Click Save when done to save the content.
You can repeat the steps above to create as many specific tabs for the product as you'd like. Any Heading 4 in the description will be converted into a tab and any content below a Heading 4 will become the content for that tab.
Finally, reload the product to see the result:
To disable specific tabs:
+ Click edit the product layout in the app.
+ Scroll down to the PRODUCT TAB.
+ Turned of the Generate tab from Description option. If you turn off this option, the product tab section will display the tabs you added at LayouHub.
+ Click the Save Template button to save the settings.
You can add or remove or move up & down any tabs to change tab's position.
For the FAQ tab, you have to select a FAQ page create from your Shopify theme, it will not work if you select a FAQ page created from LayoutHub.
Please follow the steps below:
+ If you don't have a FAQ page, please create and save it in your Shopify admin.
+ Open your product page => Product Tabs and select that FAQ page and save the product page.
+ On the FAQ tab, we used the headings to separate content into tabs, so if you select on the Use headings to separate content into tabs option is Heading 4, you have to change the title of the FAQ to h4 tag.
+ Save the FAQ page and reload the product page to see the content of the FAQ tab.
Besides uploading an image as the size chart content, you can type or paste your own raw HTML to the code editor as well.
If you don't have raw HTML available, go here to create yourself. With this code editor, you get help with easily custom size chart content CLICK HERE
The progress bar helps the customers know how many products in stock. Boost the conversion rate
You can set when progress bar is showed by this way.
Ex: If you set in the option is 20.
Progress bar will be showed when quantity of product on Shopify below 20.
Countdown timers are a clear visual cue which tell customers that, if they want a product, they must take action within a specified period of time. This could be a countdown until the end of a sales period, or for an offering such as next day delivery.
Product countdown only show with sale product.
However, if you are launching a promotion campaign, you would like to allocate a specific value for a specific product. So you can do that by using Metafields Guru App.
You can refer to this link to understand how to use Metafields.
Key: countdown
Namespace: layouthub
Value: i.e)2020/12/12 or 60 days, 3:59:12 or 2019-12-08T16:47:00+0000 12:30
Video: you also can follow this tutorial video here:
Normally, Date and time of countdown will take from option below and set up for all products
Example: 60 days, 3:59:12 or 2019-12-08T16:47:00+0000.
If you turn on "Random countdown to date and time" option, the timer will display randomly.
Besides random option, you can set countdown for each product by metafield app. You can go refer HERE to know more.
If you set date time by Metafield before, countdown will follow date time on metafield. If not, countdown will follow date time on Layouthub app.
This is all text you can change.
You can link your product to another store via your URL.
For example: You link to your online store (Amazon, Alibaba, Ebay, so on).
You can change this text into anything you want.
You can disable or enable "Buy now" button.
If you love LayoutHub, could you consider posting an review? That would be awesome and really help us to grow our business, here is the link.
