Native color swatches in Dawn theme's product cards

[naio]

I'm customizing Dawn and I would like product cards to show color swatches without using a plugin. So far I made it work in a collection page but it only works for the first card, this is the code I'm using:

{% assign color_option_index = nil %}

{%- assign first_variant = product.variants.first -%}

{%- if product.options.size > 0 -%}
  {%- if product.options[0] == 'Color' -%}
    {%- assign color_option_index = 0 -%}
  {%- elsif product.options[1] == 'Color' -%}
    {%- assign color_option_index = 1 -%}
  {%- elsif product.options[2] == 'Color' -%}
    {%- assign color_option_index = 2 -%}
  {%- endif -%}
{%- endif -%}

{% if color_option_index != nil %}
{% assign unique_colors = '' %}
<div class="color-swatches">
  {% for variant in product.variants %}
    {% assign color_name = variant.options[color_option_index] %}
    {% assign color_hex = variant.metafields.custom.color | metafield_text %}

    {% unless unique_colors contains color_name %}
      {% assign unique_colors = unique_colors | append: color_name | append: ',' %}
      
      {% if color_hex %}
        <span class="swatch" style="background-color: {{ color_hex }};" title="{{ color_name }}"></span>
      {% endif %}
    {% endunless %}
  {% endfor %}
</div>
{% endif %}

Do you know how can I make it work without hardcoding the color codes?

[tstrandz]

Hello. Tamela here. To understand your question correctly, do you mean color swatches as in the drop down selection? Normally that is already there automatically. Can you provide a screenshot?

[Daniel481]

Below is a revised version that detects the 'Color' index dynamically per product and ensures color swatches render independently for each product:

{%- assign color_option_index = nil -%}

{%- for option in product.options_with_values -%}
{%- if option.name == 'Color' -%}
{%- assign color_option_index = forloop.index0 -%}
{%- endif -%}
{%- endfor -%}

{% if color_option_index != nil %}
{% assign unique_colors = '' %}
<div class="color-swatches">
{% for variant in product.variants %}
{% assign color_name = variant.options[color_option_index] %}
{% assign color_hex = variant.metafields.custom.color | metafield_text %}

{% unless unique_colors contains color_name %}
{% assign unique_colors = unique_colors | append: color_name | append: ',' %}

{% if color_hex %}
<span class="swatch" style="background-color: {{ color_hex }};" title="{{ color_name }}"></span>
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% endif %}

[naio]

Hi @Daniel481 

The code you posted works exactly like mine colors are shown only on the first card, not the rest.

Thank you anyway,

The code

[CodingFifty]

Hey! @naio,

Yes! You're on the right track with your code. The main issue you're facing is likely due to how the unique_colors string is being reused or scoped incorrectly in a loop across multiple product cards—this happens in collection pages where multiple product loops occur. Here's a fixed and improved version that avoids hardcoding color codes and ensures swatches show correctly for each product, not just the first:

{%- assign color_option_index = nil -%}

{%- if product.options.size > 0 -%}
  {%- for option in product.options_with_values -%}
    {%- if option.name == 'Color' -%}
      {%- assign color_option_index = forloop.index0 -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

{%- if color_option_index != nil -%}
  {%- assign seen_colors = '' -%}
  <div class="color-swatches">
    {%- for variant in product.variants -%}
      {%- assign color_name = variant.options[color_option_index] -%}
      {%- assign color_hex = variant.metafields.custom.color | metafield_text -%}

      {%- unless seen_colors contains color_name -%}
        {%- assign seen_colors = seen_colors | append: color_name | append: ',' -%}
        {%- if color_hex != blank -%}
          <span class="swatch" style="background-color: {{ color_hex }};" title="{{ color_name }}"></span>
        {%- else -%}
          <span class="swatch swatch--no-color" title="{{ color_name }}">{{ color_name }}</span>
        {%- endif -%}
      {%- endunless -%}
    {%- endfor -%}
  </div>
{%- endif -%}

[naio]

Hi @CodingFifty 

The code you posted works like mine except that after the first product card the color names are shown but the colors are not. I'm looking for a different solution, thanks anyway.

[PaulNewton]

Hi @naio  👋 this is an advanced customization.

You'd only hard code values if your trying to control the sort order because products have variants in an inconsistent order , or have duplication for some reason messing things up in your product architecture making everything more complicated so taking work to fix.

To get around that you need to put some list somewhere of ALL the color values, like a shop level metafield or metaobject,  and loop over that to find a current match;  and or then also loop over variants depending on setup.

As for only working on one product-card move the code to a snippet and call the snippet inside the collections product loop.

And or check for HTML issues cause by your changes to code, etc.

If you need this customization actually working then contact me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.