The Product page highlights the features and benefits of your individual products. At a minimum, it should contain the product title, images, description, price, and add-to-cart (ATC) button.
Use the theme editor to select one of three image layout options, enable image zoom, enable cart redirection, enable the dynamic checkout button, and customize page blocks for the Product page.
Access the product page settings and blocks
- In the theme editor (Customize), open the page selector
- Select Products, then Default product
Click the Product pages section to open its settings or customize the page blocks.
Select one of three image layout options
Choose how images to display using the Image layout dropdown. There are three options to choose from.
Slideshow layout
The Slideshow layout is your standard image page layout. The main image is accompanied by smaller thumbnails of additional images.
List layout
Similar to Slideshow, but each image is full-sized and displayed in a collage-like column.
With this option, images assigned to specific variants will not replace the main image when selected.
Masonry layout
All of your images will display across the top of the page, styled similarly to the home page Masonry section.
With this option, images assigned to specific variants will not replace the main image when selected.
Enable image zoom
Select Enable image zoom to activate the feature. Image zoom will add a magnification effect when customers click the main product image.
This feature only works when the slideshow layout is selected from the menu above. It also requires using large, high-res product photography with widths above 1600px.
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.
Enable 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.
You can customize the alignment of these products using the Alignment dropdown.
Enable 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.
Customize page blocks
There are page blocks for the product Vendor, Title, Price, Form, Description, Social (share buttons), Custom liquid, Tabs, Collapsible tabs, and Product rating.
Custom liquid
Add a Custom liquid block to inject custom code through a template block.
Use the Custom liquid field to include Liquid-formatted code.
Tabs
Add Tabs to showcase information in an interactive layout.
Three tabs by completing the Heading and Text fields.
To include the product's description, enable Show product description.
Position the tabs below the product gallery by enabling Show tabs below product gallery.
The same content will appear for each product using a template. To provide different content for different products, use the classic tabs approach, consider creating additional templates, or use metafields.
Collapsible tab
Add a Collapsible tab block to include product information in an engaging container. Similar to FAQ toggles or accordions, the collapsible tab keeps the Heading visible and reveals the Text when clicked.