How to set up linked products

Linked products - Introduction

If you sell variations of a product (for example, an item of clothing in multiple colors) it's common practice to list them as variants on product pages. Alternatively, you can choose to create an entirely new product for each variant.

The latter is a great way to increase your catalog and collection sizes if you have a smaller number of items for sale. The downside is that your customers won't be able to quickly switch between products because they won't display as variants on product pages. That's where setting up linked products can help.

Linked products is an optional block that can be added to the product form. It allows you to manage your inventory per product while showcasing multiple products as if they were variants.

This way, you get the benefit of variants and creating standalone products. Your customers can see all their options on both the collection and product page - increasing the chance of conversion.

Example: If you have a sweater for sale in four different colors then you can add these sweaters as four separate products. Each sweater will appear as a unique item within your collection pages but will also display as color variants for each linked product.

In this guide, we'll explain how to set up linked products using a metafield and break the process down into four parts:

1. Adding your variants as separate products
2. Defining a metafield for your linked products
3. Assigning the metafield to your products
4. Setting up the Linked products block on your store

At the end of this guide, we'll also walk you through how to create an optional label for linked products using a metafield.

Part 1. Adding your variants as separate products

The first part requires some product admin. You will have to add variants as new separate products and remove existing variants from their respective product pages. 

Step 1: Within your Shopify admin, go to Products.

Step 2: Add the products you wish to see displayed on your collection pages and as variants on the product page template.

For example, if you have a sweater for sale in four different colors then make four products: 

Step 3: If you have these products set up as variants on another product then you should remove these variant options. This ensures inventory numbers don't become out of sync.

Part 2. Defining a metafield for your linked products

To specify which products are related to each other, we first need to create a metafield. By using a metafield, you will be able to link different products together. To do this:

Step 1: Within your Shopify admin, go to Settings.

Step 2: Go to Custom data.

Step 3: Select Products and click Add definition.

Step 4: Provide a Name for your metafield. For example, ‘Linked products’ or ‘Separate variants’. This can be anything you like and will only be visible to you.

Step 5: Add a Description. For example, 'Product variants that will display in the Linked Products block.' This will also only be visible to you. 

Step 6: Click Select type then choose Product. 

Step 7: Select List of products.

Step 8: Save your metafield.

Part 3. Assigning the metafield to your products

You can now assign your metafields to your products.

Step 1: Within your Shopify admin, go to Products.

Step 2: Select the relevant product.

Step 3: Scroll down to the metafield option and select the metafield you defined above. In our example, it's ‘Linked products’.

Step 4: From here, you can select the products that you want to be displayed in the Linked products block that will look like product variants.

Step 5: Click Save to finish.

Step 6: Repeat this process with all the linked products.

Part 4. Setting up the Linked products block on your store

Finally, you can set up the Linked product block on your product page. To do this:

Step 1: Within the Theme Editor, navigate to the product page template you wish to use.

Step 2: Add a Linked products block to the product form.

Step 3: Click the Linked products block to access its options, then click the stacked circle icon (Connect dynamic source). You can then choose the metafield you set up.

Step 4: Save your changes. Your products will now display as variants within the Linked products block!

Linked products block notes

• The product’s first image is used for the swatch.
• If a product doesn’t have any images then the product title will be shown.
• If a product doesn’t have any images, the tooltip won’t show as this would simply repeat the text in the swatch.
• If a product title contains a ‘-’ then the tooltip will only show the text after this, eg. the product above will have a tooltip that simply says ‘canton’.
• Out-of-stock products won’t show.

Setting up a Linked products label

You can also use the Label metafield to change the title on a product basis instead of a template basis. This can add a nice touch of personality to each product page, giving you an opportunity to make every product page that little bit more unique and connect with customers.

To add a label metafield:

Step 1: Follow the same steps as mentioned above to add a new product metafield.

Step 2: Add a name and description for your metafield. For example:

• Name: Linked Products Label
• Description: A label for the 'Linked products' block.

Step 3: Click Select type and choose Single line text.

Step 4: Choose One value and Save your metafield.

Step 5: Go to each product that uses the previously created Linked products metafield and locate the Linked Products Label metafield. Type in here what you want the label to say and Save your changes.

Example:

Step 6: Go to the Linked products block on the Product page template. Click the Insert dynamic source button (three stacked circles icon) next to Label and connect the newly created label metafield. 

Step 7: Save your changes. Each product page that has linked products will now display a bespoke label.

Examples: