Old version ( tf-3.5 or older )
- 1.From your Shopify admin, go to Online Store > Themes.
- 2.Find the theme that you want to edit and click Customize.
- 3.From the top-bar drop-down menu, select Product pages.
- 4.Click Product pages.
- Show next/previous products: show/hide the next/prev products navigation. Only work if the user views the product page with a collection link. Example:
/collections/collection_handle/products/product_handle - Show quantity selector: show/hide the quantity box.
- Show the compare button: show/hide the compare button that is used to add a product to the comparison list.
- Show the wishlist button: show/hide the wishlist button that is used to add a product to the customer's wishlist.
- Show vendor: Show/hide the product vendor.
- Show SKU: Show/hide the variant's SKU. The SKU will be updated to the corresponding variant's SKU automatically if customers change product options at the storefront.
- Show collections: show/hide collections that the current product belongs to.
- Show product tags: show/hide product tags of the current product. Product tags are also shown in product tabs. The guide about product tabs will explain that in-depth.
- Show label: show/hide product label that is shown 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 social sharing buttons: show/hide the social sharing buttons.
- Show Media button: show/hide the button that is used to view product images in fullscreen.
- Show review stars: show/hide the reviews that are shown below the product title base on the review app you are using. You should configure to let the theme know which app you are using in Theme settings > Product settings > Review app. Please refer to the review app guide for more details.
- Show review form from outside tab: by default, the review from is shown in product tabs. However, this setting will help you show it outside product tabs. The review form is also shown base on the review app you are using.
- Show dynamic checkout button: show/hide buttons that customers can use to quickly buy the product they're viewing. Please refer to this article for more details.
- Short general information: show/hide the short product description. This is a global short description that is used for all products. TODO: add link to metafield.
Tips: use
[description] variable to show the product's description
Settings:
- Show discount text: show/hide the discount text. The discount text will be updated automatically when customers change product options.
- Discount text: add your discount text.
Tips: in the discount text, insert
[percent]variable to show the percent number. Example: -50%.Display the product images as thumbnails beside the main image.
Settings:
- Show small images: show/hide small images.
- 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
Our theme provides 6 layouts for the product page. You can pick a layout you like in this setting area.
Settings:
- Only use one layout for all products: all products on your store will be displayed in the same layout. If you want to display the products in different layouts, just untick this checkbox. Then go to the product edit page, change the template to one of 6 values ( product.layout1, product.layout2, product.layout3, product.layout4, product.layout5, product.layout6 ).
- Pick default layout: set the default layout for the product page. Only work if the product template is configured to product.liquid and the above checkbox is not ticked.
Display a sold counter to create a sense of urgency in your customers to buy NOW.
Settings:
- Enable: turn on/off the sold counter.
- Min sold number: the minimum value of the sold number.
- Max sold number: the maximum value of the sold number.
- Min hour number: the minimum value of the time period.
- Max hour number: the maximum value of the time period.
Settings:
- Enable: turn on/off the countdown timer.
- Text: the text beside 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.
Settings:
- Enable: turn on/off the payment badge.
- Pick your badge image: 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.
Settings:
- Enable: Show/hide this block.
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.
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
Settings:
- Enable: turn on/off the sticky cart.
The size chart link on the product page
The popup is shown when customers click the size chart link
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>
...
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.
Scroll down to the bottom, you will see an Add content button, click this button to add a new tab. Or you can click one of the available tab items to edit/remove it and drag/drop items to rearrange them.
Our themes provide 3 tab item types: Product description tab, Review tab, and Custom HTML tab. Each tab item type will have a Tab title field to help you add the title of the tab item. Below are details of 3 tab item types:
- Product description tab: 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 more details here.
Note: if you tick Show review form outside tab in the General settings part, you should not add a 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.
Last modified 2yr ago