Adding product color availability under product title on Dawn Theme

ebon
Pathfinder
110 3 38

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 30 (30)
KetanKumar
Shopify Partner
35872 3584 11603

@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 %}
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
110 3 38

Thank you for the reply.

which sheet/section do i paste the code into?

 

Thank you

Guleria
Shopify Partner
2147 449 653

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

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Try GEMPAGES a great app with drag and drop features.
ebon
Pathfinder
110 3 38

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
Shopify Partner
2147 449 653

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Try GEMPAGES a great app with drag and drop features.
ebon
Pathfinder
110 3 38

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

ebon
Pathfinder
110 3 38

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
Pathfinder
110 3 38

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
Shopify Partner
35872 3584 11603

@ebon 

thanks for for update but i can't see any 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
ebon
Pathfinder
110 3 38

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
35872 3584 11603

@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
110 3 38

Sorry but what does "That one" mean?

KetanKumar
Shopify Partner
35872 3584 11603

@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
110 3 38

@KetanKumar No, that code does not work. 

KetanKumar
Shopify Partner
35872 3584 11603

@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
riesmwa
New Member
1 0 0
TheThisThat
Shopify Partner
54 3 14

@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 -%}
a little of this and a little of that
ebon
Pathfinder
110 3 38

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
110 3 38

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