Adding product color availability under product title on Dawn Theme

[ebon]

Howdy,

looking for code to display the number of colors a product is available in. Not a swatch, just text ie. 5 Colors, much like the Nike example below. Thanks

my URL is PREACHA.com

[KetanKumar]

@ebon 

yes please try 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 %}

[ebon]

Thank you for the reply.

which sheet/section do i paste the code into?

Thank you

[Guleria]

Hello @ebon ,

Edit product-card.liquid under snippets, now here search for this code

{%- if product_card_product.featured_media -%}
          <span class="card-information__text h5">
            {{ product_card_product.title | escape }}
          </span>
        {%- endif -%}

once you find it then jut in next line paste this code

{%- assign prodcard_variant_count = 0 -%}
{%- assign color_label = 'color,Color,Colour,colour' | split: ',' -%}

{%- for option in product_card_product.options_with_values -%}
	{%- assign downcased_option = option.name | downcase -%}

	{%- if color_label contains downcased_option -%}
		{%- assign variant_option = 'option' | append: forloop.index -%}

		{%- for value in option.values -%}
			{%- assign downcased_value = value | downcase -%}
              {%- for variant in product_card_product.variants -%}
                {%- if variant[variant_option] == value -%}
        			{% assign prodcard_variant_count = prodcard_variant_count | plus: 1 %}
                {%- endif -%}
        
              {%- endfor -%}

		{%- endfor -%}

    {%- endif -%}

{%- endfor -%}
        <span class="product_card_count">{{ prodcard_variant_count }}   Colors</span>

Thanks

[ebon]

Thanks for the code. It works but it's counting each color per size so it's displays an inflated number. example. 1 shirt available in 4 colors should display "4 Colors" but what the codes does is times the number of colors available by the number of sizes the shirt comes in so you get 4 colors X 8 sizes equals 32 Colors.

Could you also make the text color for this lite grey please.

urp is preacha.com and the code is still inserted so you see.

[Guleria]

I'm not sure why because it works fine for me. You can call your developer to crosscheck or write a new one.
To make it gray use this css

.product_card_count {
    color: #ccc;
}

Thanks

[ebon]

can you check placement of the code and make sure you've instructed me to place it in the correct place please.

[ebon]

this extra code, do i just paste it under the first lot of code or does it need to be combined? if so, could you re-paste the full code here please. thank you

[ebon]

the code shows no change at all. 

{% 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 %}

[KetanKumar]

@ebon 

thanks for for update but i can't see any code 

[ebon]

sorry, it's the code you asked me to try.

{% 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 %}

[KetanKumar]

@ebon 

that one

[ebon]

Sorry but what does "That one" mean?

[KetanKumar]

@ebon 

oh sorry that code doesn't work?

[ebon]

@KetanKumar No, that code does not work. 

[KetanKumar]

@ebon 

oh sorry for that issue it can be done some other customization code 

[riesmwa]

You can add color swatches on Product page https://storefix.co/add-color-swatches-to-dawn-theme/

[TheThisThat]

@ebon 

I tweaked it a bit so it only counts unique values. Try this:

  {%- assign prodcard_variant_values = '' -%}
{%- assign color_label = 'color,Color,Colour,colour' | split: ',' -%}

{%- for option in product_card_product.options_with_values -%}
	{%- assign downcased_option = option.name | downcase -%}

	{%- if color_label contains downcased_option -%}
		{%- assign variant_option = 'option' | append: forloop.index -%}

		{%- for value in option.values -%}

              {%- for variant in product_card_product.variants -%}
 
                {%- if variant[variant_option] == value -%}
        			{% assign prodcard_variant_values = prodcard_variant_values | append: value | append: ' '%}
              
                {%- endif -%}
              {%- endfor -%}

		{%- endfor -%}

    {%- endif -%}
   {% assign prodcard_variant_unique_values = prodcard_variant_values | split: ' ' | uniq | join: ',' %}
   {% assign prodcard_variant_unique_values = prodcard_variant_unique_values | split: "," %}

{%- endfor -%}

	{%- if prodcard_variant_unique_values.size > 1 -%}
        <span class="product_card_count">{{prodcard_variant_unique_values.size}} Colors Available</span>
           {%- endif -%}

[ebon]

EXCELLENT!!! Thank you so much

it works! question. ow do I turn the text Grey? it's black and bolded.

url Preacha.com

[ebon]

Hello,

the code worked but it turned the product price and color count to a bolded black color.

I would prefer it to be the default color that Dawn theme uses. 
please help.

URL is preacha.com

thank you again