Product page

This is the main place where your customers will see the whole products with all of the relevant images and product information.

The main section within this page is the one called Product. Below or above this section you can add more sections, but we suggest keeping the product section at the top:

Main settings

Labels font

You can choose between Heading font and Body font settings. Changing this will result in changing the font of the following elements:

  • Price

  • Quantity

  • Variant options

  • Accordion titles


You have separate options to change the aspect ratio of the image for desktop and mobile.


Other options in the section are:

  • Enable image zoom gallery -- if checked, this enables the gallery popup when the product images are clicked.

  • Autoplay first video -- if you're using a video for first media item, it can be autoplayed.

  • Layout -- choose between Grid and Thumbs layout for the images:


  • Autoplay -- if checked, the product images will autoplay when they are in the Thumbs layout.

  • Slideshow Interval -- set the slideshow interval when the slides will change.


All of the main product content (marked in orange below) is managed through blocks (marked in green below):


Except the block adding there are no additional settings here. Adding the block just means that the badges should be shown where the block is positioned.

You can use a prefixed product tag to add custom badges. For example badge:New will show a badge New.

The Out of Stock badge is automatic and is base on the product quantity.

Heading, Price, Vendor, Description

These are all fixed in terms of content and they're always loaded from the product details.

Variant selector

This is the block showing the variants.

From here you can activate the Size guide link by checking the Show size guide checkbox. You can select the content from which page should be displayed when the size popup opens.

If needed, you can enable the size guide calculator by checking the Enable size guide calculator checkbox. More details about the size guide calculator can be found here.

Stock notification

This enables the stock progress bar:

From the block you can set the threshold when the progress bar should show up. In the example above, it's set to 15 and there are 5 product left, so 1/3 of the bar is filled.


This block shows the quantity selector.

Pickup availability

This shows information about where the product can be picked up. The product needs to be set as such in the back-end. Clicking the View store information shows a popup with the available locations.

Purchase options

Used for products which offer subscription options.

Buy buttons

Shows the add to cart buttons. From here you can enable the dynamic checkout buttons.

The block has the option to enable/disable the recipient information form for the gift card products.

Collapsible description

Use these type of blocks for the collapsible accordions. They can be either dynamic (using the product metafields), or the same for all products.

Last updated