LayoutHub
  • What is LayoutHub?
  • User guides
    • Support
    • Installation
    • Uninstallation
    • Upgrade/Downgrade
    • FAQs
      • How to remove instagram section from Layouthub
      • What is "Pages limit"?
      • When can I "Edit code"?
      • What about "Save section"?
      • What is " Auto save draft"?
      • What is "Integration Services"?
      • How to set the same font between Shopify and LayoutHub?
      • How to custom font and color on LayoutHub?
      • How to set "Page handle or human url"?
      • Connective Button
      • How to save page without publish it
      • How to change the meta SEO for LayoutHub's page
    • Common Issues
    • Layout Management
      • Create Layouts
      • Design Blocks
      • Export & Import
      • Edit Section Code
      • Edit a Layout
      • Assign a Layout
      • Duplicate a Layout
      • Delete a Layout
    • Section builder
    • LayoutHub pages/templates
      • Home Page
        • Create additional Home Page
        • Make an existing page as home page
        • Restore to default Home Page
        • Customize Shopify Home Page
      • Sub-page
        • Contact Form
      • Product Template
        • Product Detail
        • Related Product
      • Collection Template
      • Blog Templates
      • Article Templates
      • Insert section
    • Pricing Plans
    • Settings
      • General
      • Theme Settings
      • Quickview Settings
      • Swatch color settings
      • Third party Apps
        • Product Review
        • Product Wishlist
    • Trash
    • Sale Tools
    • Referrals
    • Integration
      • Add/Edit Profile
      • Add New Contact
      • Export Contact
      • Mailchimp
      • Hubspot
      • ActiveCampaign
      • GetResponse
      • SendGrid
      • Gmail SMTP
      • Google Sheets
      • Omnisend
      • Klaviyo
      • ConvertKit
    • Tracking & Analytics
    • Layouthub & Shopify
    • Translate Apps
    • Recommend apps
      • Avada SEO Optimization
      • Ali Reviews ‑ Product Reviews
      • Ryviu: Product Reviews App UGC
      • Quick View by Secomapp
      • LAI AliExpress Reviews
      • Judge.me Product Reviews
      • Growave - Loyalty, Wishlist, Reviews UGC
      • Opinew Product Reviews
    • Refund Policy
    • Instagram token
  • Development
    • Getting started
    • Tools
      • LayoutHub Kit (for LayoutHub developers only)
      • LayoutHub Kit Extension for Visual Studio Code
    • Layout Structure
    • Reference
      • Engine syntax
        • Deprecated: March 2020
        • Chuẩn template má»›i - LayoutHub Editor V4
      • Create a section
      • Components
      • Liquid in section
      • Javascript in section
      • Register vendors
      • Settings.js
        • Call-to-action
        • Text
        • Textarea
        • Text Editor
        • Dropdown
        • Checkbox list
        • Checkbox radio
        • Toggle
        • Number slider
        • Number
        • Single image
        • Image library
        • Color picker
        • Icon picker
        • Font picker
        • Background
        • Picker
        • Group fields
Powered by GitBook
On this page
  • 1 - General
  • 1.1 - Pick a product to preview with current layout
  • 1.2 - Show wishlist
  • 1.3 - Promote label
  • 1.4 - Show rating
  • 1.5 - Show social
  • 1.6 - Show product attributes
  • 2 - Product images
  • 3 - Set swatch layout
  • 4 - Product tabs
  • 4.1 - The Detail
  • 4.2 - Size & fit
  • 4.3 - Shipping & Return
  • 4.4 - Reviews
  • 4.5 - Create Product tabs from LayoutHub
  • 4.6 - Create Product tabs use Specific tabs
  • 4.7 - Product tab - FAQ tab
  • 5 - Size chart
  • 5.1 - Size chart title
  • 5.2 - Size guide content
  • 6 - Product promote
  • 6.1 - Product Progress bar
  • 6.2 - Countdown
  • Create a Metafield Countdown for a product with input values below
  • 6.3 - Random countdown to date and time
  • 7 - Change text
  • 8 - Product form
  • 8.1 - Enable external/affiliate product
  • 8.2 - Enable buy now

Was this helpful?

  1. User guides
  2. LayoutHub pages/templates
  3. Product Template

Product Detail

PreviousProduct TemplateNextRelated Product

Last updated 3 years ago

Was this helpful?

  • 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

1.5 - Show social

  • 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.

  • 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.

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.

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.

  • 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.

7 - Change text

This is all text you can change.

8 - Product form

8.1 - Enable external/affiliate product

  • 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.

8.2 - Enable buy now

  • You can disable or enable "Buy now" button.

Learn how to allocate each circle a specific color here .

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

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

You can refer to this to understand how to use Metafields.

Besides random option, you can set countdown for each product by . You can go refer to know more.

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.

Product Swatch color
CLICK HERE
Metafields Guru App.
link
metafield app
HERE
link
New and Sold out label
Sale label
Disable
Enable
Dont have review before
Have review and review details