fbpx

Cross Linking Products As Variants In Shopify

Home / Design / 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:

1) ADD A COLLECTION WITH YOUR VENDOR NAME

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

 

2) TAG THE PRODUCTS YOU WANT TO CROSS LINK

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.

3) ADD THE PRODUCT TEMPLATE LIQUID CODE

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 alt_product.id == product.id -%} {%- 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.

4) TEST THE PRODUCTS

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

5) AMEND THE LOOK OF THE TEXT

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 🙂

 

 

Comments(16)

  • Jaime
    3rd February 2022, 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, 4:11 pm

      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.

  • Jaime
    8th February 2022, 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, 10:25 am

      Solved! Problem was on vendor, thanks!!

    • Simon Heyes
      9th February 2022, 10:37 am

      Great! Glad it got resolved 🙂

  • 26th February 2022, 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, 9:59 am

      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!

  • Jaime
    7th March 2022, 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, 12:46 pm

      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, 12:38 pm

        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.

    • 22nd May 2022, 3:27 pm

      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 {{shop.metafields.global.alsoavailable}}

  • Sonia
    15th June 2022, 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, 10:05 am

      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, 12:30 am

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

  • Sonia
    17th June 2022, 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, 6:40 am

      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.

Leave a Comment