Display links to other colors on Shopify product page - shopify

Question

I have an online store on Shopify with one product in 10 different colours. So for SEO purposes, I've created 10 products like T-Shirt Black, T-Shirt Blue, T-Shirt Red, etc. To each product, I assigned its own tag and unique description.
What I am trying to do is to link all products between each other from each product page, for instance, the current viewing product is T-Shirt Black, on that page I'd like to show 10 clickable colours/swatch with images of each colour and to the current viewing one add the active class, when clicked on another colour it takes user to another product page. How do I make it happen?
Any help would be much appreciated!

Answer 1

I'd like to share with other people who might need to solve the same task.
Here's what I've done to get this work;
First, I've added a tag to each product based on its collection, in an example for all products in collection SMALL I've added tag small, then I had to write this code to get a list of all the products with the same tag.
{% if product.tags contains "small" %}
{% assign current_product_tag = "small" %}
{% elsif product.tags contains "medium" %}
{% assign current_product_tag = "medium" %}
{% elsif product.tags contains "large" %}
{% assign current_product_tag = "large" %}
{% endif %}
{% assign current_product = product %}
<div id="sw_container">
<p class="sw_title">Select Colour</p>
<ul class="sw_list">
{% for product in collections.all.products %}
{% if product.tags contains current_product_tag %}
<li class="sw_item{% if product.handle == current_product.handle %} active{% endif %}">
<a title="{{ product.title | escape }}" href="{% if product.handle == current_product.handle %}#{% else %}{{ product.url }}{% endif %}">
<img src="{{ product.images.last | product_img_url: 'small' }}" alt="{{ product.title | escape }}">
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>