Display Colour Variants for products in collection in Taste

[EmilyLoftman]

How do I display all the colour variants of my products separately on a collection page and also so that once you click on the product in 'black' for example, it shows all the other colours of that product and still be able to automatically track the quantity.

I've seen a lot of example of code to input into themes but none specifically for the theme I use which is Taste. 

I hope someone can help

Thank you 

[Relynjon]

To display all the color variants of your products separately on a collection page and enable customers to view all the other colors of a product once they click on a particular color variant, you will need to modify the code in your Shopify theme. Here's how you can achieve this:

1. First, you need to check if your theme supports displaying color variants on the collection page. Some themes may not support this feature. You can check your theme's documentation or contact the theme developer for assistance.

2. If your theme supports displaying color variants, you can add the following code to the collection-template.liquid file in your theme's code:

{% for product in collection.products %}
  <div class="product-item">
    <a href="{{ product.url }}">
      <img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
    </a>
    <h3>{{ product.title }}</h3>
    {% if product.available %}
      <form action="/cart/add" method="post">
        {% if product.variants.size > 1 %}
          <select name="id" class="product-variants">
            {% for variant in product.variants %}
              {% if variant.available %}
                <option value="{{ variant.id }}">{{ variant.title }}</option>
              {% endif %}
            {% endfor %}
          </select>
        {% else %}
          <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
        {% endif %}
        <button type="submit" class="btn">Add to cart</button>
      </form>
    {% else %}
      <p class="sold-out">Sold out</p>
    {% endif %}
  </div>
{% endfor %}

                       3. This code will display each product on the collection page with a dropdown menu of the available color variants. Customers can select a color variant and add it to their cart.                                     4. To enable customers to view all the other colors of a product, you can add the following code to your product-template.liquid file:

{% if product.variants.size > 1 %}
  <div class="product-variants">
    {% for variant in product.variants %}
      {% if variant.title != product.selected_variant.title %}
        <a href="{{ product.url }}?variant={{ variant.id }}">{{ variant.title }}</a>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

                          5. This code will display a list of links to all the other color variants of the product on the product page. Customers can click on a link to view the product in that color variant.                                            6. Note that you will need to ensure that your inventory and tracking settings are set up correctly in Shopify to ensure that the correct quantities are tracked and deducted from inventory when a customer purchases a product in a particular color variant.

Note that this code may need to be adjusted depending on your theme and specific needs, and it's always a good idea to make a backup of your theme before making any changes.

[EmilyLoftman]

Hi,

Thank you for that solution. Are you able to work on this project for me?

Thanks

[MRamzan]

Here is the perfect solution I did for my store:

Thanks.