Summary
The product template showcases product details.
Showing selected variant images
Enabling “Show selected variant images only” will update your product pages to only show images assigned to each variant. This is useful if you have products that are visually different. Using this will help show customers which variant they have selected. For example if you have a shirt in blue and red - you can show only the red product photos when customers have selected red.
Enable feature
Open the theme editor by clicking Customize next to the relevant theme.
From the dropdown in the center of the top bar select Products > Default product.
Select Product main from the theme sections.
Scroll down and toggle on Show selected variant images only.
Order images
Images must be ordered depending on their variants to ensure they are correctly shown when customers change their selection.
Upload all images under media in your product settings.
Ensure the images are sorted in the same order as your variants.
Assign featured images to each variant that match the first image. The below image will help illustrate how to achieve this.
Using third-party subscription options
Shopify subscriptions can be a bit tricky to setup. This guide will walk you through different options for displaying subscription options on your product page.
Using the built-in subscription options
Our Shopify themes come with built in subscription options. We recommend using this approach as you'll have more control over the experience and can customize this with the help of a developer.
However, this may cause complications with your product templates if you've already installed a third-party subscription widget.
Ensure the third party subscription widget is disabled
Ensure the product block Options is included on your product template
Using third-party subscription options
Disabling the default subscription options is possible if you'd like to stick to using a third-party widget. There a few more steps here.
Create a new product template. In the theme editor click the top dropdown > Products > Create template. Label this template 'subscription' so you can remember later.
Click into the Product section then check Enable default selling plan widget
Click into the Options block and click Remove block
Go into your subscription app and follow instructions to install the subscription widget
Assign the 'subscription' product template to all products that have a subscription plan
Adding a quantity picker to your product template
A quantity input field can be enabled or disabled on product pages. If you aren't seeing a quantity field it's likely it has been disabled in your theme settings.
Open the theme editor by clicking Customize next to the relevant theme.
From the dropdown in the top bar select Products > Default Product.
In the Product section click into the Buy buttons block
Scroll down to and enable Show quantity input
Connect products using the “Combined listing” app
Keystone has been updated to support the Combined listing app. The app can be used to link multiple product together. Visit the Shopify help center to learn more about this feature.
Connect products using the “Linked products” block
If you have multiple versions of one product split into different product listing it may be hard for customers to find the option they want. Using the “Linked products” block you can display additional products as options on your product page.
Enable the product block
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the product template then click "Add block" within the "Product" section
Move the block and add a label
It's usually best to display the "Linked products" block above the "Buy buttons"
Try adding a label that describes the additional linked products. If the additional products are variants of different color you could update the label to "Color".
Create metafield definition
Navigate to Settings > Custom data > Products.
Click Add definition.
In the name field type “Linked collection”.
Ensure the namespace and key field is
custom.linked_collection.Set the data type as "Collection".
Update metafield
Navigate to the product you’d like to update.
Scroll to the bottom and select a collection for the metafield.
Click Save.
Using the content drawer product block
The Content drawer block allows you to display a link that opens a slide-out drawer. Use it to conveniently showcase product details such as sizing charts or ingredient lists.
Open the theme editor by clicking Customize next to the relevant theme.
From the dropdown in the top bar select Product.
On the lefthand side click Add block then select Content drawer.
In the Option, field enter the text that matches the product option you want to display this next to.
This is an optional field. Leaving this empty will ensure the block is displayed where the block is placed rather than beside the option.
E.g. if you want to display this next to Size then enter ‘size’ in the Option field. If no option is specified this block will be shown in the order it appears in the product template.
Add a title and select page content
Select a page that uses plain text. If you select a page that has custom sections it may not work within the slide-out drawer.
Click Save in the top right
Using the custom field product block
The Custom field product block can be used to add additional fields to a product form. This can be used to collect more information. E.g. include a custom engraving field to let customers customize their purchase.
Open the theme editor by clicking Customize next to the relevant theme.
From the dropdown in the top bar select Product.
You may want to create a new product template, if you want your custom field to show up on every product page then you can use the default product template. Otherwise you would want to create a new template.
On the lefthand side click Add block then select Custom field.
Add a label and check Enable required field if you want to make this a mandatory field to use.
Reposition the block - it’s best to place this just above the Buy buttons block.
Click Save in the top right.
Using the bundle block
The bundle product template can be used to sell multiple products from a single page. This can be combined with automatic discounts for an added layer of functionality. To set this up you'll need to create a new metafield definition then assign the bundle template to a new product.
Create metafield definition
Navigate to Settings > Custom data > Products.
Click Add definition.
In the name field type “Product bundle”
Ensure the namespace and key field is
custom.product_bundleSet the data type as "Product" then select List of products
Create a bundle template
In the Shopify theme editor select from the top dropdown "Products".
Click Add template.
Enter a name.
This can be anything. E.g. "Bundle"
Click "Add block" inside the product section.
Add "Bundled products" block.
Make any other changes to your new template as needed.
Create a bundle product
Create a new product on Shopify.
Add images as needed - you'll likely want to include photos showcasing all the items in your bundle. Even better if you can get photos of all the products together to really highlight the "bundle" part.
Set a price for the product - this should be the sum of all the items in the bundle.
Uncheck Track quantity. This product won't actually be purchased itself instead it will act as a landing page where the products within the bundle are purchased.
Scroll down to Metafields then click Product bundle.
Click Select products and add as many products as you'd like to include in this bundle.
On the right-hand side under Theme template select bundle (or a different template that you've created using the "Bundled products" block).
How to use the 'Table' block
Navigate to a product page within your theme editor > Click on your 'Product' template and select 'Add block' > Select 'Table'
This will always be displayed under the 'Product' section
This lets customers easily see all options/variants of a product and add multiple quantities at once
