Display number of variants available in collection page

[Mantas1]

Hello everyone!

I am pretty new to liquid coding so need a little help.
In the collection page, I want to display a text under a product that says "x colours available". X - being the number of variants the product has.

I was able to add the text under the product that has more than 1 variant using the following code:

{% if product.variants.size > 1 %}
    <small> Colors available</small> {% endif %}

Was wondering if there is a small tweak that would allow me to display the number of variants each product has. In other words, if a product has 5 variants, the text underneath would say "5 colours available" and if another product has 2 variants, the text would say "2 colors available".
 

[Arthur_Korniyen]

Hi,
Try to put this code:

{% assign prod_variant_count = 0 %}
  
  {% if product.available and product.variants.size > 1 %}
    {% for option in product.options %}
      {% if option contains 'Color' %}
        {% for variant in product.variants %}
        	{% assign prod_variant_count = prod_variant_count | plus: 1 %}
        {% endfor %}
      {% else %}
      	<small>No Color variants</small>
      	{% break %}
      {% endif %}
    {% endfor %}
  {% endif %}
  
  {% if prod_variant_count > 0 %}<small>Colors available - {{ prod_variant_count }}</small>{% endif %}

This code will show only variants with this title - 'Color'. Change to another one if you'll need.

Hope it helps!)

Best,
Arthur

[Mantas1]

Thank you, that is exactly what I needed!

[madspedersen]

Hi Arthur. 

I have exactly the same request as Mantas1.

Can you specify exactly where this code should be inserted to display the number of Colors available for each product?

Also, does this apply to the Debut Theme?

Thank you very much! 

Kind regards

Mads  

[Edgars_Rudzitis]

In which liquid to put the code in?

[harshillllllll]

This works fine. I have added weight variance. Can you please help me further with dropdown, if i change the value in dropdown, price should change.

[Joaquinsar]

Can you specify exactly where this code should be inserted to display the number of Colors available for each product?

[singh12]

Hello!
Where did you put this code?