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.

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:

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.

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!

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:

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