Skip to main content
All CollectionsSpaceTemplates
Space: Using the product template
Space: Using the product template
Thomas K avatar
Written by Thomas K
Updated over a week ago

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

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. From the dropdown in the center of the top bar select Products > Default product.

  3. Select Product main from the theme sections.

  4. 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.

  1. Upload all images under media in your product settings.

  2. Ensure the images are sorted in the same order as your variants.

  3. 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.

  1. 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.

  2. Click into the Product section then check Enable default selling plan widget

  3. Click into the Options block and click Remove block

  4. Go into your subscription app and follow instructions to install the subscription widget

  5. 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.

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. From the dropdown in the top bar select Products > Default Product.

  3. In the Product section click into the Buy buttons block

  4. Scroll down to and enable Show quantity input

Connect products using the “Combined listing” app


Space 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

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. Navigate to the product template then click "Add block" within the "Product" section

  3. Move the block and add a label

    1. It's usually best to display the "Linked products" block above the "Buy buttons"

    2. 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

  1. Navigate to Settings > Custom data > Products.

  2. Click Add definition.

  3. In the name field type “Linked collection”.

  4. Ensure the namespace and key field is custom.linked_collection.

  5. Set the data type as "Collection".

Update metafield

  1. Navigate to the product you’d like to update.

  2. Scroll to the bottom and select a collection for the metafield.

  3. 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.

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. From the dropdown in the top bar select Product.

  3. On the lefthand side click Add block then select Content drawer.

  4. 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.

  5. 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.

  6. 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.

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. From the dropdown in the top bar select Product.

    1. 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.

  3. On the lefthand side click Add block then select Custom field.

  4. Add a label and check Enable required field if you want to make this a mandatory field to use.

  5. Reposition the block - it’s best to place this just above the Buy buttons block.

  6. 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

  1. Navigate to Settings > Custom data > Products.

  2. Click Add definition.

  3. In the name field type “Product bundle”

  4. Ensure the namespace and key field is custom.product_bundle

  5. Set the data type as "Product" then select List of products

Create a bundle template

  1. In the Shopify theme editor select from the top dropdown "Products".

  2. Click Add template.

  3. Enter a name.

    1. This can be anything. E.g. "Bundle"

  4. Click "Add block" inside the product section.

  5. Add "Bundled products" block.

  6. Make any other changes to your new template as needed.

Create a bundle product

  1. Create a new product on Shopify.

  2. 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.

  3. Set a price for the product - this should be the sum of all the items in the bundle.

  4. 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.

  5. Scroll down to Metafields then click Product bundle.

  6. Click Select products and add as many products as you'd like to include in this bundle.

  7. On the right-hand side under Theme template select bundle (or a different template that you've created using the "Bundled products" block).

Did this answer your question?