Tweaking Product Color Availability Under Product Title in Dawn 3.0

Store Design
1

The code below was written to add "Color Availability Variant’’ not swatches under each product in Dawn 2.0

Can anyone edit it to work in Dawn 3.0

Below is an image of what it should look and the code.

Thank you

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

Color count.png
Color count.png1500×2000 252 KB

2

Hi @ebon ,

This can easily achieve with few lines of code. Open the card_product.liquid under the Snippet folder. In the file, find the second " {{ card_product.title | escape }}". See image below. Then paste the code.

Screenshot 2022-05-15 100606.jpg
Screenshot 2022-05-15 100606.jpg3177×1402 328 KB

{%- assign color_label = 'color,Color,Colour,colour' | split: ',' -%}
          {% for option in card_product.options_with_values %}
            {% if color_label contains option.name %}
              {% assign optionValues = option.values  %}
               {{ optionValues.size }} Colors Available
            {% endif %}
          {% endfor %}
3

perfect. thank you so much

1 Like
4

I used this code and I did get it to work but it’s listing the colors available in the main product name and I was hoping they would be listed below that. Any update to the code that would do that?