The Product page is where you highlight the features and benefits of your individual products. Customize the product page template with the theme editor's blocks, theme settings, and additional sections.
Open a Product Page Template
In the theme customizer (Customize), select Products, then Default product (two-column layout) or 3-columns (three-column layout).
Customize Template Settings
Click Product pages in the left sidebar to open general settings for the template.
Breadcrumbs
Enable Show breadcrumb navigation to include a trail of the previous page links to show the customer where this product is found and which collection(s) it belongs to.
Layout
Use the Layout dropdown to control the image gallery size for the 2-column layout.
The options are:
- 2 columns (small image)
- 2 columns (medium image)
- 2 columns (large image)
This setting only applies to the Default product page template.
Dynamic checkout button
Activate Show dynamic checkout button to add a secondary cart button offering customers an option to proceed directly to the Checkout page—bypassing the cart page entirely and completing the purchase with a preferred payment type.
Enable cart redirection
Activate Enable cart redirection to send the customer to the cart page after the add-to-cart (ATC) button has successfully added an item. This can help streamline the purchasing process, especially if you have a smaller catalog.
Disable AJAX on the product page by enabling cart redirection
Some added apps require the customer to stay on the product page after ATC in order to function, so this option may need to be disabled.
Aspect ratio
- Natural
- Short
- Square
- Tall
To change how the image fits into the container, consider activating Enable image crop. This only applies to Short, Square, or Tall options.
Thumbnails position
The thumbnail images are the additional images for the product framed in smaller containers outside the main image. These can be positioned either below the main image or beside it on the left.
Select an option from the Thumbnails position to arrange these images.
Video autoplay and looping
For product videos, activate autoplay by selecting Enable video autoplay. Repeat the video automatically at its end by selecting Enable video looping.
Image zoom
Allow customers to get a closer look at high-quality product images by activating the image zoom settings. There are two options to consider: Roll-over image zoom or Click to zoom image.
This feature works with images above 1600px in width
Roll-over image zoom
When a customer hovers their mouse cursor over the main gallery image, the Roll-over image zoom option automatically enlarges a portion of the image.
To enable, select either Enabled (separate box) or Enabled (replace main image) from the Roll-over zoom style dropdown.
Click to zoom image
For a more manual approach, consider using the Click to zoom image option. Customers are encouraged to click the image by a label in the bottom-right corner.
When a customer clicks the image, a dedicated modal window opens to provide a closer look.
To enable this, select Enabled (all devices), Enabled on desktop only, or Enabled on mobile only.
Select Disable to deactivate.
Customize Template Blocks
Use the provided page blocks to customize the layout of the product's Title, Vendor, Price, Product rating, Form, Share buttons, and Description.
Click (+) Add block to include a Custom liquid, Text, or SKU block.
