The Product page highlights the qualities and advantages of a product. At a minimum, it should contain the product title, images, description, price, and an add-to-cart button. With Superstore, customize your product page template by navigating to any product page in the theme editor, then click on Product pages under Template.
Use the theme editor to select a layout option, activate dynamic checkout buttons, enable cart redirection, and activate image zoom for the product page.
Consider adapting your product descriptions into tabs with our HTML code approach: Adding tabs to your product description
Select a layout option
In desktop, the product page will display groups of content in columns. The product images are included in the left-side column, for example.
Use the Layout dropdown to include the content in either 2 or 3 columns.
2 columns will include one column for product images and one for product information, quantity selectors, and ATC buttons.
There are three forms of the 2 columns option to choose from: small, medium, or large image. Use these to control the size of the product images.
3 columns will include one column for product images, one for product description, title, and price, and one for the quantity and ATC button.
Activate dynamic checkout buttons
To include an additional add-to-cart button that directs to the Checkout page, enable Show dynamic checkout buttons (DCB).
For more information on the DCB, check out this Shopify article.
Enable cart redirection
Select Enable cart redirection to direct customers to the Cart page when adding the item to the cart.
Some apps require disabling AJAX, which is precisely Enable cart direction allows. To disable AJAX, simply Enable cart direction.
Activate image zoom
Allow customers to take a closer look at the product images by activating the image zoom feature.
There are two options to choose from, Roll-over zoom and Click to zoom. These options can be used individually or combined.
Roll-over zoom will activate when a customer moves their cursor over the image. To enable this, select one of the following options:
- Enabled (separate box)
- Enabled (replace main image)
Click to zoom will activate when the customer clicks the image. To enable this, select one of the following options:
- Enabled
- Enabled on desktop only
- Enabled on mobile only