Product page

Product page

The product page displays details for a product and lets customers add the product/variant to their shopping cart. Product details are added as blocks and include the product title, price, description, quantity selector, variant selectors, SKU, availability and media.

Section settings for the main product page section are listed in the table below. Additional sections can also be added to the product page using the theme editor.

SettingDescription
Desktop layoutUse this setting to select the product gallery layout on desktop devices.

"Hero" will display the first two product images in a hero/banner layout, with remaining product media displayed in thumbnails that open a full screen gallery modal when clicked. This is the default layout.

"Thumbnails" will display the featured product media in a single media gallery, with remaining product media displayed as thumbnails. Clicking on a thumbnail will display the selected media in the single media gallery. The full screen gallery modal can be opened by clicking on the single media gallery.

"Tiles" will display all product media as tiles. The featured product media will be displayed as a full width tile, while remaining product media will be displayed as either half width or full width tiles depending on the media type. Clicking on product image tiles will open the full screen gallery.
Enable thumbnail scrollUse this setting to enable horizontal thumbnail scrolling for the thumbnail layout.
Icon sizeSelect the icon size for collapsible rows.
Section widthSelect the section width.
Color schemeSelect the color scheme for the section.
Popup gallery color schemeSelect the color scheme for the pop-up/full screen gallery.
Section padding
Top paddingSelect the top padding for the section.
Bottom paddingSelect the bottom padding for the section.

Blocks available for the main product page section are set out in the table below.

SettingDescription
TitleDisplays the product title.
PriceDisplays the product/variant price and badges (e.g. sale badges).
SKUDisplays the product/variant SKU.
Product ratingDisplays the product/variant rating.
DescriptionDisplays the product description.
Variant picker
Allows customers to change the product variant before adding to cart.
Quantity selectorAllows customers to change the product quantity before adding to cart.
Buy buttonsDisplays the add to cart button and dynamic checkout buttons (if applicable).
Inventory statusDisplays the inventory status for the product/variant.
Collapsible row
Displays a collapsible row that expands to show text when clicked.
Contact form
Allows customers to make an enquiry regarding the product/variant.
ShareAllows customers to share the product/variant on their social media channels.
Pickup availability
Displays the pickup availability for the product/variant.
Pop-upDisplays a text link that opens a pop-up when clicked.
Complementary productsDisplays products that are complementary to the product.
Custom imageDisplays a custom image.
TextDisplays text.
Collapsible contact formDisplays a collapsible row that expands to show a contact form when clicked.
Icon with textDisplays an icon with text below.
Custom liquid
Allows you to add custom HTML or Liquid code.

    • Related Articles

    • Product card settings

      Product card settings are used to customize the appearance of product cards displayed in the collection page and featured collection sections. Product card settings are listed below and are accessed through the theme settings. Setting Description ...

    • Collection page

      The collection page displays products from a collection, with each product shown in a product card. Section settings for the main collection page section are listed in the table below. Additional sections can also be added to the collection page ...

    • Page

      The page section displays content from a page created within the Shopify admin. Section settings for page are listed in the table below. Setting Description Page Add a page. Heading size Select the heading size. Section width Select the section ...

    • Page

      This template is the default template for pages created in the Shopify admin. Additional sections can be added to the page template using the theme editor. Section settings for the default page template are listed in the table below. Setting ...

    • Featured product

      Featured product displays details for a product and lets customers add the product/variant to their shopping cart. Product details are added as blocks and include the product title, price, description, quantity selector, variant selectors, SKU, ...