CODEWITHSUNDEEP
shopifyshopify-template
SOoCreative
SOoCreative

Reputation: 213

Display links to other colors on Shopify product page

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!

Upvotes: 1

Views: 1707

Answers (1)

SOoCreative
SOoCreative

Reputation: 213

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>

Upvotes: 1

Related Questions