Cross Linking Products As Variants In Shopify

Another day, another Shopify conundrum 🙂

The condundrum this time around was that I wanted to automatically cross link different colours of the same product. But, because those products have been set up as separate products with their own size variants and SKUs, there’s no way to cross link them directly in Shopify. Very annoying.

The situation was this: my client had 5 pairs of women’s ski pants as individual products, but in case a size dropped out of stock, they wanted to cross link to the other products from the product page(s), as a well of cross selling the other options.

Cross Link Individual Products In Shopify

It’s simple enough to this manually with HTML if you have a small number of products you want to link to. But it could get very time consuming if you have huge collections of products and many variants to boot.

Enter the solution, found from Stephen Keable.

This method includes a little bit of custom code for your product template, and some custom tagging for the products you want to cross link. Here are the steps to take:


Add a collection with the name of the vendor, that contains all the products you want to cross link. I simply added a collection with all the products from the online store, in case we needed to cross link more than ski pants in the future.

To do this, go to Collections, click Create collection and add the collection, ensuring it contains the products. My clients Vendor name is OOSC Clothing, so the collection name is the same, and the handle ends in ‘oosc-clothing’. If your vendor collections are quite large (say, 150 products or more) you might need create collections for the tag you’ve used, so that Shopify isn’t overloaded when the code loads.

For the logic, you can use whatever you like, but I simply used a rule that stated if the product value is greater than £1, add it to the Collection. Click Save once complete:

Vendor logic for products - Shopify



The next step is to tag the products you want to cross link to one another.

This process is fairly easy, as you can make use of Shopify’s ability to add tags in bulk to many products at once. Simply find and select all the products you want to link together, and select Add tags.

Add tags in bulk to products - Shopify

Stephen’s logic (and his code) was to use a prefix of _alt_ at the start of the tags, so that the code can search tags for a product and find these ones easily.

So for my client for example, the tags for the womens ski pants were _alt_womens-pants. If I wanted to cross link all the mens pants, I would use _alt_mens-pants, for example.


Next, go to Online Store, Themes, Actions (dropdown) and then select Edit code which will open up your theme code templates.

You’ll then need to find your product template code, and then find the section in the code where you want the cross links to appear. I decided to add them just below the Add to cart button, but this is personal preference.

If you don’t know how to do this, it can be a bit fiddly, but using Chrome, use Inspect, highlight the part of the code for where you want the new bit of code to go, and then find that respective part of the code in the template.

Once you’ve found where to place the code, my suggestion would be to first copy, paste and save the original code in Notes, Notepad or another application, in case you need to reset the code if it doesn’t work.

Next, paste the following code:

{%- assign tag_alt = "BLANK" -%} {%- for tag in product.tags -%} {%- assign tag_prefix = tag | slice: 0, 5 -%} {%- if tag_prefix == "_alt_" -%} {%- assign tag_alt = tag -%} {%- break -%} {%- endif -%} {%- endfor -%} {%- unless tag_alt == "BLANK" -%} {%- assign vendor_handle = product.vendor | handle -%} {%- if collections[vendor_handle].products.size > 0 -%} {%- assign alt_products_total = 0 -%} {%- capture products_output -%} {%- paginate collections[vendor_handle].products by 200 -%} {%- for alt_product in collections[vendor_handle].products -%} {%- if alt_product.tags contains tag_alt -%} {%- unless == -%} {%- assign alt_products_total = alt_products_total | plus: 1 -%} <a href="{{ alt_product.url }}" title="{{ alt_product.title }}"><img src="{{ alt_product.featured_image | img_url: '90x90', crop: 'center', format: 'pjpg' }}" alt="{{ alt_product.title }}"></a> {%- endunless -%} {%- endif -%} {%- endfor -%} {%- endpaginate -%} {%- endcapture -%} {%- endif -%} {%- endunless -%} {%- if alt_products_total > 0 -%} <br><br> <p><strong>Also Available In:</strong></p> <div class="product-alt-colours"> {{ products_output }} </div> {%- endif -%}

The raw version of the code can be seen on Stephen’s Github, here.

Ensure you Save the code once complete.


With the code, tags and collection in place, you should now be able to see the cross links – with image thumbnails – on the relevant product pages!

Cross Link Individual Products With Variant Images In Shopify


The code in Stephen’s snippet uses simple <p> and <strong> tags for the ‘Also Available In’ text. I amended this to match the rest of my client’s theme, and changed it to a <h4> tag:

Cross Link Products Variants HTML edit

Voila! Your products should now be cross linked with permalinks to the other product pages, whilst looking like variants! Marvellous 🙂




  1. Jaime 3rd February 2022 at 3:52 pm - Reply

    Hello Simon! Thanks for sharing, this is exactly what I need.
    Unfortunately it didn’t work. I’ve 4 products created under the same collections, with same label starting with _alt_, and I place this code on product,liquid snippet, but nothing is shown. If I write only on this code this text: Also Available In: it is shown, but when I place all code, nothing. Can u help me?

    • Simon Heyes 3rd February 2022 at 4:11 pm - Reply

      Hey Jaime, it sounds like this is an issue with the coding. If the Collection is correct and the tags are in place, it is possible the code isn’t set up correctly, or its in the wrong place? Does your theme use multiple product liquids / sections / snippets? If so, test the code on each one where you want the cross linking variables to appear and hopefully that should solve it.

  2. Jaime 8th February 2022 at 4:24 pm - Reply

    Thank you for your answer Simon, the place where I think in my case code must be is in product.liquid snippet. If I place Hello World it appears on frontpage. The problem is when I place all code, nothing is shown. Do I have to make any replace on code before upload it? Or just upload the code as you’ve shared?

    Thanks again!

    • Jaime 9th February 2022 at 10:25 am - Reply

      Solved! Problem was on vendor, thanks!!

    • Simon Heyes 9th February 2022 at 10:37 am - Reply

      Great! Glad it got resolved 🙂

  3. Naren 26th February 2022 at 11:58 am - Reply

    Hey, I used this code and it’s working fine what I need extra is that it should show variant colour text with the image….how can I get that?

    • Simon Heyes 28th February 2022 at 9:59 am - Reply

      Hi there, thanks for the comment, and glad it works! I think that would require some extra HTML, CSS and liquid changes, sorry I can’t help further!

  4. Jaime 7th March 2022 at 11:54 am - Reply

    Hi Simon,
    I have website in 2 languages.

    How can I translate “ALSO AVAILABE AT”. I mean, I use an app for translations, but this sentence does not appears.

    Thank you in advance.

    • JUlien 5th May 2022 at 12:46 pm - Reply

      hello how did you solve your display problem please I am in the same case. I created my collection and integrated the code in product.form in my “turbo” theme case I then put the _alt_ tags for the product and I retrieved them via the tag but nothing is displayed you the solution please

      • Simon Heyes 9th May 2022 at 12:38 pm - Reply

        Hi Julien, it sounds like a similar issue. If the Collection is correct and the tags are in place, it is possible the code is in the wrong place. Does your theme use multiple product liquids / sections / snippets? If so, test the code on each one where you want the cross linking variables to appear and hopefully that should solve it.

    • Leon 22nd May 2022 at 3:27 pm - Reply

      Hi Jaime, I would solve it by creating a metafields field for this sentence and then you can translate the metafield content with your translation app.
      You can use the app “Metafields Guru” to create the field. I would create it as a “shop” metafield, namespace “global”, name “alsoavailable”.
      Where your “Also available at” text is, you will have to put {{}}

  5. Sonia 15th June 2022 at 5:40 am - Reply

    Hi Simon,
    Thanks for sharing this code. I am on DAWN theme and under templates I have only product.json. Do I need to write json code to do the similar function or I can add this code in snippets/ main-product.liquid?

    • Simon Heyes 15th June 2022 at 10:05 am - Reply

      Hi Sonia, I think you should be able to do either. The latter may give you a bit more flexibility in terms of

      block and styling 🙂
    • Sonia 16th June 2022 at 12:30 am - Reply

      Thanks, Let me try Main-product.liquid and see the result

    • Sonia 2nd July 2022 at 8:59 pm - Reply

      Hi Simon,
      All problems resolved and it comes out beautifully . Only thing is every time I select the variant it moves the page up. Is there anything that can move it up or restore after every selection.

  6. Sonia 17th June 2022 at 5:15 am - Reply

    Hi Simon,
    I hope you can point me to the error.
    My collections[vendor_handle].products.size returns 0. Although there is only one vendor and all the products in the same collections. Not sure what I am missing.

    • Sonia 19th June 2022 at 6:40 am - Reply

      Figured it out. It was the collection name, For some reason if there is only one word for the collection it was not taking
      So assigned the multiword collection name
      {%- assign vendor_handle = “brand-collection” -%}
      Now everything is perfect. Struggling with alignment but will post if I fix it.

  7. cHristos 20th August 2022 at 2:21 pm - Reply

    Thank you very much for this. I tried it without creating a collection and it worked.
    I didn’t update the Product Template by editing the code. I did add a Custom Liquid widget on the product page though.
    For some reason it is not working for some products but I suspect it has to do with the product handle name not being the same.For these cases I tried adding a collection but still didn’t work.

  8. Josh 31st August 2022 at 2:17 am - Reply

    Thank you so much. Code worked perfectly!
    Much appreciated.

    • Simon Heyes 31st August 2022 at 10:41 am - Reply

      No probs, thanks Josh!

  9. Gordon 1st April 2023 at 11:17 am - Reply

    there’s a Shopify app that can let you cross-link similar products together, easy to set up, and you don’t need to modify your shop code,

    • Simon Heyes 11th April 2023 at 12:09 pm - Reply

      Thanks Gordon…there wasn’t an app when I wrote this, but nice to know there is one now, cheers.

  10. Liam 7th February 2024 at 11:54 am - Reply

    Amazing. Thank you. I will stick with the repo, not the app.

  11. andy 3rd March 2024 at 3:16 am - Reply

    Thanks for doing this work! I just can’t get it to work… It’s a but unclear EXACT what spots in the code I need to change to my data to make it work.
    I’m using the prefix _family_ instead of _alt_ and my test collection handle is house-snare-wires. Can you share exactly where I need to update the code to have _family_ and house-snare-wires ??

Leave A Comment