Linking alternative colours of products together in Shopify

One jacket many different colour ways

Tags or Collections?

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

Tag to collect all colours of a product

How to quickly add tags to multiple products
_alt_patagonia-torrentshell-jacket

Liquid template code

  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

The collection we looked in

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

--

--

Shopify partner, JavaScript/Liquid/Swift developer, convert to serverless architecture and builder of digital products people love to use since 1999.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store