Display number of variants available in collection page

Mantas1
Visitor
2 0 1

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

Replies 11 (11)

Arthur_Korniyen
Shopify Expert
198 3 85

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

Founder at GenovaWebArt | info@genovawebart.com
madspedersen
Visitor
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  

Edgars_Rudzitis
Excursionist
33 0 3

In which liquid to put the code in?

harshillllllll
Excursionist
15 0 4

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
Visitor
1 0 0

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

MougheesHaider
Shopify Partner
11 0 2

Hi,

The above code works file just need to ask if a product option has 5 variants and 1 variant is sold out then how can I show that 4 colors available instead of 5?

big_conspiracy
Visitor
1 0 1

Hey, where do you insert the code?

ivanturnovski
Shopify Partner
2 0 1

 

                    {% assign prod_variant_count = 0 %}

                    {% if item_featured_product.available
                      and item_featured_product.variants.size > 0
                    %}
                      {% for option in item_featured_product.options %}
                        {% if option contains 'Size' %}
                          {% for variant in item_featured_product.variants %}
                            
                            {% if variant.inventory_quantity > 0 %}
                              {% assign prod_variant_count = prod_variant_count
                                | plus: 1
                              %}
                            {% endif %}

                          {% endfor %}
                        {% else %}
                          <small>No Sizes variants</small>
                          {% break %}
                        {% endif %}
                      {% endfor %}
                    {% endif %}
                    {% if prod_variant_count > 0 -%}
                      <small>Sizes available - {{ prod_variant_count }}</small>
                    {%- endif %}

 

Mantas1
Visitor
2 0 1

Thank you, that is exactly what I needed!

singh12
Tourist
6 0 3

Hello!
Where did you put this code?

R-Daneel
Excursionist
12 0 14

Thanks!