Display number of variants available in collection page

Highlighted
New Member
2 0 0

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".
 

0 Likes
Highlighted

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

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
Highlighted
New Member
2 0 0

Thank you, that is exactly what I needed!

0 Likes
Highlighted
New Member
1 0 0

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  

0 Likes
Highlighted
Excursionist
33 0 3

In which liquid to put the code in?

0 Likes
Highlighted
Tourist
8 0 1

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.

0 Likes
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
Tourist
6 0 3

Hello!
Where did you put this code?

0 Likes