Linking alternative colours of products together in Shopify

One jacket many different colour ways

2022 Update — You can also use metafields to achieve a similar goal, read my article about that solution to decide which is best for you:-
Linking alternative products using metafields in Shopify

Shopify allows you to set up multiple variants per product, including size and colour. However sometimes you may want to have individual product listing for each colour.

This presents the problem of how to show your customers the other colours you have of that product. Often sites will have small section on a product page, similar to the one picture on the left/above.

You could create these by hand for each product listing in the product description, however this soon becomes hard to scale, especially keeping track of stock levels.

Tags or Collections?

Can also be used to highlight alternatives on out-of-stock products.

Shopify has a couple of methods we can use to group these products, we can add a tag to all of these products to link them together, or we can add them to a collection.

If your catalog is wide but not very deep within each product style managing the collections might become difficult, also you might not want to have these collections visible in search plugins for example. In that case I opted to use a tag approach.

You need to look at which approach works best for you, bit more on when the collections approach might be better later.

Tag to collect all colours of a product

So this process is quite straight forward and you can make use of Shopify’s ability to add tags to many products at once as shown in the video below.

How to quickly add tags to multiple products

With these tags I’ve opted to use a prefix of _alt_ at the start so that we can iterate over tags for a product and find these ones easily. Then using part of the product handle without any colour info such as below.

_alt_patagonia-torrentshell-jacket

Liquid template code

The snippet I’ve used is available as a Gist below, this can be included on your product page template. Brief run through of what it does:

1. Loop through the current product tags to look for any with the _alt_ prefix
2. If we find one, break from the loop and assign to tag_alt
3. Then we grab the collection for the product vendor (with a check to make sure it has products in it)
4. Loop through the products in this collection, checking if those products have the tag we assigned to tag_alt
5. Capture output of product if it had the tag and it wasn’t the current product
6. Once out of that loop, we check how many products we captured and if more than zero, we output the panel to the page

Debugging

After some feedback I’ve created a debug version of the code above that will add HTML comments, to show the process and where your config might go wrong. Such as common problems like not having a matching collection for vendor/type — Get the debug code here

Note: A this code in production as it can add a lot of HTML comments and therefore wasteful bytes.

The collection we looked in

We use the vendor collection, because we should always have one for the product and those collections exclude out of stock products. We also typically have around 100 items in these collections, so there’s not a massive performance hit when Shopify builds the page.

We also paginate that collection to 200 and only use the first page as a safety net should the collection be too big.

If you had a small catalog you could in theory use an “All products” collection, however I wouldn’t recommend it. If you have a small product catalogue you could change the following, so it just searches all products instead.

{%- assign vendor_handle = product.vendor | handle -%}
to
{%- assign vendor_handle = 'all' -%}

If your vendor collections are too big, such as when you only have one vendors, you could instead use the product type instead.

{%- assign vendor_handle = product.type | handle -%}

With the vendor and type ones you need to ensure you have a collection with the handle that matches. For example a vendor of “Big Boy Shoes” would need a collection to exist at “/collections/big-boy-shoes” otherwise it will not show anything.

Would love to hear any feedback on this set up in comments below.

If you have questions where you have copied and pasted the code, please ensure you post a link to the page on your store. I would also highly recommend hiring an experience Shopify theme developer to help you.

Also thanks to Jon L. in the Front End Dev team at Shopify for some advice around this approach.

If you found this useful maybe drop me a tip so I can buy a coffee — https://ko-fi.com/stephenkeable