Adding product color availability under product title on Dawn Theme

ebon
Pathfinder
88 3 30

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

96DD061B-E1A1-4171-96F0-FE5750502779.png

Replies 29 (29)
ebon
Pathfinder
88 3 30

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
Shopify Partner
25097 2513 9081

@ebon 

that one

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
88 3 30

Sorry but what does "That one" mean?

KetanKumar
Shopify Partner
25097 2513 9081

@ebon 

oh sorry that code doesn't work?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
88 3 30

@KetanKumar No, that code does not work. 

KetanKumar
Shopify Partner
25097 2513 9081

@ebon 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bettybooper
Excursionist
24 1 4

@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
Pathfinder
88 3 30

EXCELLENT!!! Thank you so much

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

 

url Preacha.com

ebon
Pathfinder
88 3 30

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