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

Media

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:
- Grid:
- Thumbs: The thumbs can be positioned on the left, right or below the main image. This can be toggled from the Thumbs position setting.

Pagination

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.

Blocks

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

Badges

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.

Quantity

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.