Product Detail

Go to Product Templates > Create new product template

When create product template, you can choose between whole product layout and product detail section

1 - General

Go to product Detail Section > Editing > General tab

1.1 - Pick a product to preview with current layout

Use can pick a product to preview with current layout.

1.2 - Show wishlist

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

1.3 - Promote label

Enable to show the labels for products like New, Sale or Sold out.

1.4 - Show rating

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

1.6 - Show product attributes

It contains: Sku, categories.
All information in this section take from Products on Shopify.

2 - Product images

Use zoom: With Product Image Zoom, customers can enlarge product images for a closer look at material, texture, and finer details.

3 - Set swatch layout

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.

4 - Product tabs

4.1 - The Detail

This section take text from product's description.

4.2 - Size & fit

You can write anything you want by many tools in section.

4.3 - Shipping & Return

Write your shipping condition or anything you want.

4.4 - Reviews

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.

4.5 - Create Product tabs from LayoutHub

Here you can add the tabs for your product layout like Description, Product attributes, Addition information, FAQ and Review tabs.

4.5.1 - Product tabs settings

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.

4.6 - Create Product tabs use Specific tabs

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.

4.6.1 - Enable specific tabs

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.

4.6.2 - Create a specific tab

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:

4.6.3 - Disable specific tabs

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.

4.7 - Product tab - FAQ tab

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.

5 - Size chart

5.1 - Size chart title

5.2 - Size guide content

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

6 - Product promote

6.1 - Product Progress bar

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.

6.2 - Countdown

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.

Create a Metafield Countdown for a product with input values below

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:

6.3 - Random countdown to date and time

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.