The Product page highlights the qualities and advantages of your individual products. 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 the Sections tab.
Select a layout option
In desktop, the product page will display groups of content in columns. The product images, for instance, are included in the left-side column. 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 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.
Autoplay product videos
Videos can be added by including the YouTube or Vimeo URL in the product image’s alt text. To have these videos play automatically when selected, check Enable autoplay for product videos.
In order to prepare for Shopify's Product Media update, this feature will be deactivated for versions 2.3.0 and above. The Product Media update will include platform enhancements for adding video and 3D models.
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.
Note: 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