Main product section

Show product's main informations. Only available in version tf-4.0 or newer.

1. Open the Main product section:

On the left sidebar of the Theme editor, click the Main product section.

2. General settings:

• Show next/previous products: show/hide the next/prev products navigation. It only works if the user views the product page with a collection link. Example: /collections/collection_handle/products/product_handle

• Show label: show/hide product labels that are displayed override the product image. For the sale label, the percent discount in this label will be updated automatically if customers change product options at the storefront.

• Enable image zoom: turn on/off the zoom effect of the main product image.

3. Product images:

• Show small images: show/hide small images.

• Show Media button: show/hide the button that is used to view product images in fullscreen.

• Display as: set the layout to display small images. There are 3 values for this setting. Below is the demonstration of these values.

Small images - Vertical slider

Small images - Horizontal slider

Small images - grid layout

• Sticky images when scrolling: tick to keep the image when customers scrolling down or up and the images reach the top of the screen.

3. The sticky add to cart:

Tick to open the add to cart box at the bottom when the customer scrolls down past the main add to cart button.

The sticky cart on the desktop screen

The sticky cart with closed state on the mobile screen

The sticky cart with open state on the mobile screen

4. Collapse tab settings:

Adjust font sizes of the collapse tabs title on the desktop and mobile.

5. Add/Edit/Remove product's information:

Each piece of product information is stored in section blocks that help you arrange the product page easily by dragging & dropping blocks. Please refer to this guide for managing blocks in a section.

Now we will explore all block types in the Main product section:

5.1. Text block:

Display the custom text, product title, or vendor.

5.2. Title:

Display the product title.

5.3. Price:

Display product's price. You can turn on/off the discount text ( if the current variant has a discount ), show/hide the shipping policy.

5.4. Review stars:

Display the review stars base on the product reviews you are using. Please refer to the guide to configure the product reviews app.

5.5. SKU:

Display the current variant's SKU.

5.6 Quantity & buy buttons:

You can configure this block to show/hide the quantity box, dynamic checkout buttons, Shop Pay Installments banner, add to compare, and wishlist buttons.

5.7. Variant picker:

Display product options.

5.8. Description:

Display the product's description.

5.9. Share:

Display the social's button to help customers share your product to social platforms such as Facebook, Twitter, Pinterest,...

5.10. Random sold number

Display a sold counter to create a sense of urgency in your customers to buy NOW.

5.111. Countdown timer:

Display the countdown timer.

You can set the countdown date for all products in Theme settings > Product settings > Countdown timer, refer to this guide. Or you can also set different countdown dates for each product by using the Boostheme Toolkit app, please refer to this guide for more details. Especially, in Shopify 2.0, you can use Metafields editor to set the countdown date for each product with namespace is btt, key is countdown, and type is Date and time. Please refer to the guide for more details.

5.12. Payment badge:

You can pick or upload your image to display it as a payment badge. If empty, the payment icons that are configured from your payment settings will be shown.

5.13. Size chart:

Display the size chart link and popup. ​‌

Settings:‌

• Enable: show/hide the size chart link.

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

• Fallback size chart: pick or upload your image to display it as a size chart in the popup when customers click the size chart link.

Tips: you can use the Boostheme Toolkit app to add different size charts for each product. Please refer to this guide for more details. If you want to add the size chart in the product description, just wrap the size chart with an HTML tag with class:sizechart-tableor add this class to the size chart table. Example: <h3>Size chart</h3> <table class="table-bordered sizechart-table"> <tbody> ...

5.14. Limited stock text:

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

N1. The text when quantity is greater than zero:

Only show this text when the 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 the[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.

N2. The text without quantity:

Only show this text when the 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.

N3. The color and font size

• The text color: set the text color except for the number. The color of the number is configured in Theme settings > Colors & font sizes > Links > Alternative style > Text color.

• The text font size: adjust the font size of the text.

N4. The progress bar

• The percent number in the progress bar: adjust the completed area. Leave zero to hide the progress bar.

• The text in the progress bar: add your text that is displayed in the progress bar. Tip: leave[number]to show the percent number.

• The text color: pick a color for the text in the progress bar.

• The text font size: adjust the font size of the text in the progress bar.

• The background color of the completed area: pick a color for the completed area.

• The background color of the remaining area: pick a color for the remaining area.

• The height of the progress bar: adjust the height of the progress bar.

Settings:

• Enable: show/hide the size chart link.

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

• Fallback size chart: pick or upload your image to display it as a size chart in the popup when customers click the size chart link.

Tips: you can use the Boostheme Toolkit app to add different size charts for each product. Please refer to this guide for more details. If you want to add the size chart in the product description, just wrap the size chart by an HTML tag with class:sizechart-tableor add this class to the size chart table. Example: <h3>Size chart</h3> <table class="table-bordered sizechart-table"> <tbody> ...

5.15. Store availability:

Display the option for customers to pick up their online orders at your retail store, curbside, or any location that you choose. Please refer to the article for setting up the local pickup stores.

5.16. Customization field:

Add your customization fields to the product page. Our theme supports adding up to 5 custom fields. Below are settings for a field:

• Enable: show/hide the field.

• Label: type the label of the field.

• Type: choose the type of field. There are 7 values:

  • Text - short: a text field with one line.

  • Text - long: a text field with multiple lines.

  • Radio buttons: a set of radio buttons.

  • Dropdown - select: a dropdown box.

  • Checkbox: a tick box.

  • Checkbox group: a set of tick boxes.

  • File uploader: a file picker to help customers upload their image.

• Option values: if you choose the type as one of the radio buttons, a drop-down select, or checkbox group, you should add the option values. Separate your options with a comma.

• Accepted types: if you choose the type as File uploader, you can specify a filter for what file types the user can pick from the file input dialog box. Syntax: "file_extension|audio|video|image/*|media_type".

• Required: specify the field is require or not.

• Required message: type the error message. This message will be shown when customers click the add to cart button without ticking the required field.

5.17. Customization fields group:

Help you to show up to 4 customization fields in a block. That will help to save the number of blocks because Shopify only allows showing a maximum of 12 blocks in a section. You can refer to #5.16 for details of a field.

5.18. Collapsible tab - Custom text:

You can configure the heading tab, add the tab content or get the content from a page.

5.19. Collapsible tab - Description:

Display the product's description in the tab content. You can add your heading tab.

5.20. Collapsible tab - Reviews:

Display the reviews form based on the review app that has been configured in Theme settings > Product settings > Reviews app. You can add your heading tab.

5.21. Collapsible tab - Toolkit app:

Display the tabs that have been added by using the Boostheme Toolkit app. Please refer to the article for more details.

5.22. Popup:

You can add a text to display it as a link. And specify the page to show its content when customers click this link.

After customers clicked the link

Because Shopify only allows showing a maximum of 12 blocks in a section, so the below block types are a group of above block types. That will help you to save the number of blocks.

5.23. Group of 2 texts, SKU:

Show 2 custom texts and SKU in a block.

5.24. Group of review stars, price, countdown:

Show reviews stars, price, and countdown.

5.25. Group of collections, product tags, sharing icons, payment badges

Show collections, tags, social sharing icons, and payment badges.