Split > Product page

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.=
  • 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 promo_banner.link
  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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.