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 on your store that has that template applied.
Product page settings
To edit settings for the overall page style and layout, click Product information in the side bar.
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 |
| 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 |
| Desktop margin | Full width or page margin |
| Desktop media width | Normal (50%) or Wide (60%) |
| Grid spacing | Set the spacing between images |
| 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 things like text alignment and width.
Product page blocks
The Product information section of the template includes a number of key 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-YourTagName”.
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.
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 DETAILS or SPECIFICATIONS. Note: this heading must be written in all caps and separated from other text with a paragraph break above and below.
2. Specify this 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 tabs for these areas of text.
Shipping & Returns
It is good practice to include a summary of your shipping and returns information on the product page, so this block is included by default.
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.
Cross links
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:
Name with handle color_name
Color with handle color_swatch
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.
Recommended products
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.
