Adding product color availability under product title on Dawn Theme

Store Design
1

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
96DD061B-E1A1-4171-96F0-FE5750502779.png1536Ɨ2048 263 KB

1 Like
2

@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 %}
1 Like
3

Thank you for the reply.

which sheet/section do i paste the code into?

Thank you

4

Hello @ebon ,

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

{%- if product_card_product.featured_media -%}
          
            {{ product_card_product.title | escape }}
          
        {%- 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 -%}
        {{ prodcard_variant_count }}   Colors

Thanks

1 Like
5

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.

6

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

7

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

8

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

9

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 %}
No Color variants
{% break %}
{% endif %}
{% endfor %}
{% endif %}

{% if prod_variant_count > 0 %}Colors available - {{ prod_variant_count }}{% endif %}

1 Like
10

@ebon

thanks for for update but i canā€™t see any code

11

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 %}
1 Like
12

@ebon

that one

13

Sorry but what does ā€œThat oneā€ mean?

1 Like
14

@ebon

oh sorry that code doesnā€™t work?

15

@KetanKumar No, that code does not work.

1 Like
16

@ebon

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

17

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

18

@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 -%}
        {{prodcard_variant_unique_values.size}} Colors Available
           {%- endif -%}
19

EXCELLENT!!! Thank you so much

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

url Preacha.com

20

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

1 Like