Main product section
Show product's main informations. Only available in version tf-4.0 or newer.
On the left sidebar of the Theme editor, click the Main product section.
- 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.
- 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.
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
Adjust font sizes of the collapse tabs title on the desktop and mobile.
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:
Display the custom text, product title, or vendor.
Display the product title.
Display product's price. You can turn on/off the discount text ( if the current variant has a discount ), show/hide the shipping policy.
Display the review stars base on the product reviews you are using. Please refer to the guide to configure the product reviews app.
Display the current variant's SKU.
You can configure this block to show/hide the quantity box, dynamic checkout buttons, Shop Pay Installments banner, add to compare, and wishlist buttons.
Display product options.
Display the product's description.
Display the social's button to help customers share your product to social platforms such as Facebook, Twitter, Pinterest,...
Display a sold counter to create a sense of urgency in your customers to buy NOW.
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.
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.
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> ...
There are two inventory texts are shown corresponding with 2 cases:
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.
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.
- 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.
- 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>
...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.
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.
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.
You can configure the heading tab, add the tab content or get the content from a page.
Display the product's description in the tab content. You can add your heading tab.
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.
Display the tabs that have been added by using the Boostheme Toolkit app. Please refer to the article for more details.
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.
Show 2 custom texts and SKU in a block.
Show reviews stars, price, and countdown.
Show collections, tags, social sharing icons, and payment badges.
Last modified 1yr ago