Linking alternative products using metafields in Shopify

You’ve seen a grid of alternative colours for products on a product description page before and in fact I’ve described how to achieve this in Shopify using tags. This is one that instead of using the product variants, uses individual products per colour.

Now you can also use Shopify’s new metafield definitions to do this as well.

Many colours of Wooden Pawns on Tabletop Supply

Whilst several people have been using the tags method, it does sometime have it’s drawbacks such as needing to iterate over the contents of a collection, then the tags on each product to create the list of products to show. Also if the tag isn’t quite right or the collection has more than 250 products, you may not get all the alternatives you needed.

So this metafield based solution might be a better route for some stores, as it simplifies the liquid code to use just the list of products you choose in the admin for that product. However it does come with its own drawback that when you add a new colour to your catalog, you need to add it to all the other products, rather than just adding a tag to the new product colour.

So you’ll have to choose which solution makes sense for you.

Defining the metafield

Head to Metafields in the Settings section of the Shopify Admin area for your store. Then into the Products option under Fields.

Here we can create a new metafield definition with a Name, Namespace and Key, Description and Type.

The Type is the important part, where we are going to make use of Product within Reference, which is going to create a product selector UI when editing a product.

We are also going to use the Lists of Products option, so we can select multiple products, rather than…