Theme Documentation > Products

Products

Products

The product template includes various sections, blocks and options to enable you to craft your product pages.

How to edit or set up the product page

1. From the Shopify admin area, go to Online Store > Themes > Customize
2. Select Products from the top dropdown and choose the template (ie Default product)

The theme comes with one product template - you can create separate templates by clicking “Create template”.

Tip: Any changes or settings applied to the product template will affect every product page on your store that has the corresponding template applied. If you wish to have different content or settings on different product pages, create separate templates. Then, within each product in the Shopify product admin area you can specify which template the product uses.

Product page settings

To edit settings for the overall page style and layout, click Product information in the side bar.

Sticky content

Set up your preference with regards to sticky content and/or sticky buy buttons. You can enable sticky buy buttons on mobile, meaning the buy buttons will remain visible anchored to the bottom of the screen whilst scrolling.

Media

Set up things like your preferred media aspect ratio and the layout of the media gallery.

Background color Set a background color for media. This is useful if your product images are transparent and you want to choose a background color.
Media aspect ratio Choosing a consistent aspect ratio ensures all your product images appear neat and uniform. You can choose from Portrait 4:5 (default), Portrait 4:6, Square or Landscape.
Set media to screen height This setting overrides the media aspect ratio. If turned on, media will be set to the height of the screen/browser on desktop. This results in a uniform look but can result in undesired image cropping. Use carefully.

Default: Off
Mobile carousel navigation type Choice of:
None - no navigation will display
Bullets - bullet navigation will display
Thumbnails - thumbnails will display
Bullets position Set your preferred position of the carousel bullets, with a choice of below media or within media.
Desktop layout Choice of:
Stacked - all images are stacked vertically
Grid - images are displayed in a two column grid
Thumbnail carousel - images are displayed in a carousel
Desktop carousel navigation type Choice of thumbnails or arrows
Thumbnail position Choice of left or right (of the media)
Thumbnail placement Choice of thumbnails overlaying the image or adjacent to the image
Thumbnail size Choice of normal or large
Desktop margin Full width or page margin
Desktop media width Normal (50%) or Wide (60%)
Grid spacing Set the spacing between images (applies to ‘Stacked’ and ‘Grid’ layouts)
Autoplay videos By default, any videos will autoplay and loop, with no audio. Alternatively you can turn autoplay off to enable controls and audio.
Enable zoom Enables a zoom gallery (image opens in an overlay)
Zoom level Choose the zoom level for images

Text

Set up aspects relating to the product text and information such as text alignment, width and vertical spacing.

Product page blocks

The Product information section of the template includes a number of blocks, some of which are pre-populated in the template. Blocks can be added, removed or re-ordered depending on your requirements.

Badges

Displays any tags you have added to the product that are written in the format “Badge: Your Badge Name”. Note, the word “Badge will be automatically removed when the badge displays”.

Displays a breadcrumb. Requires custom product metafields.

To display a breadcrumb:

1. Create a custom product metafield. Name it ‘Breadcrumb’ with a namespace and key of custom.breadcrumb. Set the type to ‘Collection’, and select ‘List of collections’. Save the metafield.
2. In your products, you can now add the collections for the breadcrumb. For example if you want the breadcrumb to be Menswear > Sweatshirts, add both of these collections in your desired order. Save your product. Repeat this process for all products.
3. Go to the theme editor and select the product template.
4. Within the ‘Product information’ section, add a ‘Breadcrumb’ block.

Title

Displays the product title. Within the block you can specify the title font size (small, medium or large)

SKU

Displays the product SKU if you have added one.

Price

Displays the product price. Within the block settings you can also choose the following options:

  • Show taxes
  • Show discount
  • Show Shop Pay

Variant picker

Displays a variant picker to allow the user to select the variant (e.g. color). You can choose from three styles of variant picker:

  • Pills
  • Dropdown
  • Words

You can also enable and set up color swatches here if required.

Quantity selector

Displays a quantity selector. Only display this block if your products are commonly purchased in quantities of more than one.

Pop-up

Displays a link which opens a pop-up. Useful for things such as showing a size guide or shipping details. Within the block settings you can specify the text alignment of the link and you can choose the page it links to. You can also customize the pop-up settings/style in the main theme settings.

Buy buttons

Displays the “Add to cart” button and dynamic checkout buttons (if enabled). Within the block settings you can specify the following settings:

  • Style of button (solid or outline)
  • Show dynamic checkout buttons (displays buttons for payment methods such as PayPal or Apple Pay)
  • Show payment methods - displays small icons of the payment methods your store accepts
  • Show pickup availability
  • Show recipient information form for gift cards

Description

Displays the product description. Within the block settings you can specify the display type:

  • Accordion - the text appears in a typical open/closing tab.
  • Standard text - the text appears within the page with no interaction
  • Truncated text - the first 3 lines of text will display. A “Read more” link will expand to show more text.

Information tabs (V4.0.0 or later)

Displays product information in horizontal tabs as an alternative to the typical accordion approach.

Specifications

This block is useful for separating your product descriptions into separate accordions (expanding tabs). For example, you might want to show a list of materials or technical specifications in a separate accordion to the main description.

How to set up specifications:
1. Within your product descriptions, add a word wherever you want to split the description and the specifications, such as the word ‘DETAILS’. Note: this heading must be written in all caps and separated from other text with a paragraph break above and below. By default, the theme uses the word ‘DETAILS’, but you can choose any word (the word will not actually display to customers on your store).
2. Go to the theme editor and select the product template. Click into ‘Product information’ to reveal the settings for this section. Specify your chosen word within the product settings under “Description specifications heading”. The word specified here must exactly match the word used in your product descriptions.
3. Add or turn on the specifications block within the product template.
4. Your product page should now display two separate accordions for these areas of text.

Share

Displays buttons to allow the user to share the product on popular social media channels (Facebook, X, Pinterest).

Text

Displays a block of text.

Inventory status

Displays the inventory status of the product.

Custom liquid

Allows you to insert custom liquid code into the product page. This block is intended for developers only - use use this block only if you have sufficient expertise in writing custom liquid code.

Collapsible row

Inserts an opening/closing row of content into the page with your choice of heading and text.

Allows you to include links/buttons between different products which is intended for linking different colors of the same product. Requires the use of product metafields. To use this feature follow the steps below. You can also refer to the Shopify Metaobject Guidelines.

Stage 1: Set up the metafields
1. Create a product metafield definition with the name ‘Cross links’ and namespace custom.cross_links and set the type to product. Ensure that storefront access is switched on.

Stage 2: Add the links
Once your metafields are set up, you can add the cross links.
1. In Shopify admin, open the product you wish to add cross links to.
2. Scroll down to the Metafields section of the page.
3. Click on Cross links and select the product you want to link to.
4. Click save.
5. Follow steps 1-4 for other products you wish to link to each other.
6. To check the appearance of the cross links on your product page, preview the product or view it within your store.

Optional - if using cross link color swatches
1. Create a product metafield for colour with the namespace custom.color and set the type to metaobject.
2. Within the metaobject, add your colors as entries with two fields as follows:
a) Name with key color.name and type ‘Single line text’. Must be one value, not list of values.
b) Swatch with key color.swatch and type ‘Color’. Must be one value, not list of values.

Note: Color swatch meta data is an advanced Shopify feature. If you require assistance with setting up metadata or metaobjects, please contact our support team.

This section is hidden by default - to activate it click the eye icon. This section displays links or buttons to related collections.

Complimentary products

This section is hidden by default - to activate it click the eye icon. For this section to work, you must have the Shopify Search & Discovery app installed and activated.

This section is shown by default. Recommended products are shown automatically based on an algorithm. For this section to work, you must have the Shopify Search & Discovery app installed and activated.

You can customize various settings in this section such as choosing the number of columns and enabling or disabling ‘Quick add’.