Add "Available In "X" More Colours" On Collection Page - Dawn 2.0

Solved
MrGrif
Shopify Partner
22 2 4

Hi ,

Im looking to add text that generates a number based on the amount of colours available of that product.

So if there is a red green blue option, the collection grid page will show the primary red product, but it will also have below - available in 3 colours.

So far I have tried within product-card.liquid the below code but I keep getting 0 - it isn't processing the logic below the assign num=0

 

 

{% assign num = 0 %} 
{% for option in product.options_with_values %} 
      {% if product.options_with_values == 'Colour' %}
            {% for value in option.values %}
                  {% assign num = num | plus: 1 %}
            {% endfor %}
      {% endif %}
{% endfor %} 
<p>There are {{ num }} more colours to choose </p>

 

MrGrif
Accepted Solution (1)
MrGrif
Shopify Partner
22 2 4

This is an accepted solution.

This has now worked for me : 

For Dawn 2.0 (v3)

Insert the code into Snippets > main-product.liquid 

I have placed this within the <div> product__info-wrapper - place it appropriately to where you would like it positioned.

I have set it to where there is 3 or less left in stock, this will appear. 

 

        {% comment %}Adds text when stock is equal to one below the price.{% endcomment %}                      
                         	  {% assign stock = 0 %}              
              {% for variant in product.variants %}
              {%capture stock %}
              {{ stock | plus:variant.inventory_quantity }}
              {% endcapture %}
              {% endfor %}
              
              {%assign stock = stock | times:1%}

			  {% if stock < 3 %}
        <span class="label inventory"> <strong>Only {{stock}} more left in stock!</strong> </span>
			  {% endif %}


Here is a screen-grab of it working : 

Screenshot 2022-03-03 at 10.27.13.png

 


 

MrGrif

View solution in original post

Reply 1 (1)
MrGrif
Shopify Partner
22 2 4

This is an accepted solution.

This has now worked for me : 

For Dawn 2.0 (v3)

Insert the code into Snippets > main-product.liquid 

I have placed this within the <div> product__info-wrapper - place it appropriately to where you would like it positioned.

I have set it to where there is 3 or less left in stock, this will appear. 

 

        {% comment %}Adds text when stock is equal to one below the price.{% endcomment %}                      
                         	  {% assign stock = 0 %}              
              {% for variant in product.variants %}
              {%capture stock %}
              {{ stock | plus:variant.inventory_quantity }}
              {% endcapture %}
              {% endfor %}
              
              {%assign stock = stock | times:1%}

			  {% if stock < 3 %}
        <span class="label inventory"> <strong>Only {{stock}} more left in stock!</strong> </span>
			  {% endif %}


Here is a screen-grab of it working : 

Screenshot 2022-03-03 at 10.27.13.png

 


 

MrGrif