The Product page section settings

To modify the theme, you have to open the customize page. If you don't know how to do that, please refer to here.

The product page and quick view popup have the same settings. To edit them, in Customize page, click page selector on the left of the preview area then click "Product pages".

1. General settings:

2. Small images:

- Small images layout :

- Small images size :

3. Layouts:

Our theme provides 4+ layouts for the product page. You can pick a layout you like in this setting area.

Especially, if you want to display the products in different layouts, just untick "Only use one layout for all products" checkbox. Then go to editing product page, change the template to one of 4 values ( "product", "product.layout2", "product.layout3", "product.layout4" ).

Note: You have to publish one of the themes in the theme package to see the templates like the above image. Not use other templates such as "product.quick_view", "product.tjson", "product.upsell_tags" because these templates are only used in coding.

4. Countdown timer:

Tick this checkbox to show countdown timer. And add your text to display it in the countdown timer. You can view here for setting up the countdown timer.

5. Trusted payment badge:

6. Limited stock text:

- Enable : Show/hide this block.

There are two inventory texts are shown corresponding with 2 cases:

a. The text when quantity is greater than zero:

Only show this text when "Inventory policy" is configured to "Shopify tracks this product's inventory" and quantity is greater than zero. Tip: leave "[quantity]" to show the quantity.

- The quantity in the text : show the quantity number in your text. Your text has to contain "[quantity]" variable. This field has two values:

+ Real quantity : show the real quantity of product variant.

+ Random : show a random number.

- Random quantity : set a range to generate a random number.

b. The text without quantity:

Only show this text when "Inventory policy" is configured to "Don't track inventory" or quantity is zero and "Allow customers to purchase this product when it's out of stock" is checked.

c. The color and font size:

You can set the color and font size for your text in 2 cases.

d. The progress bar:

You can set the percent number, text, color, font size and background for the progress bar.

7. The sticky Add to Cart box:

8. Size chart:

Show the size chart of a product. You can upload a size chart for all products or each different products.

a. Upload size chart image for all products:

In the size chart box:

- Enable : show/hide the size chart.

- Use a fallback size chart : if a product does not have own size chart, a fallback image will be displayed as a size chart.

b. Add size chart for each product:

b1. Sizechart in product description

If you want to add the sizechart in a product description, just wrap sizechart by a html tag with class: "sizechart-table" or add this class to the sizechart table.

b2. Using product metafields

Add a product metafields with below information for the product you want to add size chart:

- Namespace : btt.

- Key : size_chart.

- Value type : string.

- Value : your size chart. IF your size chart is an image, just add a small HTML code:

<img src="YOUR IMAGE URL">

To know how to add product metafields, please view here.

9. Product tabs:

In product page section, scroll to bottom. You will see a list of product tab items. To add a new tab item, just click "Add content" button then click a tab item type you want to add. Our themes provide 3 tab type: "Product description tab", "Review tab", "Custom html tab". Each tab item type will have a Tab title field to help you add the title for each tab.

Product description tab : is used to show the description of a product.

Review tab : show a review form base on your settings in Theme settings > Product Settings > Review app. Please view details at here

Note: if you tick "Show review form outside tab" in "General Settings" part, you should not add review tab to avoid displaying 2 review forms on your site.

Custom html tab : use this tab item type to add your custom html tab.