Product pages

The information in this article is for version 3.x

To tweak the layout of your product pages:

Product Gallery

  • Navigate to a product page in the theme editor.
  • Click the Sections tab.
  • Click Product page.
  • From the Gallery style list, choose whether you want your product's images to be displayed one below the other in a scrolling list, or show up as a slider.
    The images will display within a slider for mobile devices anyway (under 1024px viewport width).
  • From the Gallery image aspect list, choose whether you want to product images to be cropped and always fill the left side, or to have a natural aspect, and be contained in the block.
  • If you want to enable image zoom, then check Enable image zoom.
  • You can also choose the gallery pagination style here

Product Content

The product content is set up with blocks, these being:

  • Product header - contains all important information and will always appear at the top on mobile devices. Here you can show or hide various product info.
  • Variant picker - it should be present all the time, since the theme needs it for the cart functionality to work. You can choose between two different styles.

    Split has built-in support for color swatches, based on color names, just like our Highlight theme.

    You can read about this feature here:
  • Description - contains the product description you set in the rich text editor when editing the product page.
  • Buy buttons

    To use the Shopify Dynamic checkout button, please enable this option here.  For more info about this feature, please see this article from Shopify documentation.
  • Share - sharing links for three social platforms.
  • Collapsible tab

    You can use this block for unique content such as size charts, which you can either set up with page templates or metafields.

Setup unique promotions for product pages

In version 3.x we've added the possibility to add unlimited, unique popup promotions for your products. This feature is available with metafields. To make it work, you'll have to follow these steps:

  1. Go the Settings > Metafields, and open the Products metafields editor
  2. Here you'll have to add three new metafield definitions that will be used by the theme for these icons. All of these metafields need to be single line text
    1. The first one will be promo_banner.title 
    2. The second one will be promo_banner.subtitle
    3. The third one will be
  3. After your metafields are created, they will appear in the Product Editor.
  4. For products where you want the promotion banner to have unique content, you'll have to edit the respective metafields:
    1. Change the promo title / subtitle / link if you want different content
    2. If you want the product/collection cards for links, you'll have to write relative links, without your store's url, like this:
      1. /products/your-product-handle
      2. /collections/your-collection-handle
    3. If you don't set any default values in the editor, the promotion banner will only show up for individual products where you've defined custom values

Watch the process of setting this up

Other product page sections

In the product page you can also use any other sections that you might want, but Product recommendations is a good one to have, which adds automatic product recommendations based on various algorithms set up by Shopify. You can read more about this feature here:

Also, if you want to add Product Reviews, you can do this with the Apps section - our theme has built-in support for the free Product Reviews app from Shopify. Just make sure that  

UP NEXT: Blog & article pages
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.