How to Add Color Swatches to Shopify Product Cards

Why You Should Add Color Swatches?

Here are the practical advantages:

Faster Product Browsing: Customers instantly see available color options without opening each product page. This reduces browsing time and makes navigation smoother.

Higher Click-Through and Conversion Rates: Users often choose based on color preference. Showing options upfront increases engagement and the likelihood they’ll click into the exact variant they want.

More Professional Store Appearance: Modern ecommerce sites use visual cues instead of forcing users to read variant names. Swatches immediately make your collection pages look more polished and trustworthy.

Better Mobile Experience: Reading variant options on small screens is tedious. Tapping a color circle is not.

Reduced Return Friction: When shoppers clearly see color differences, they make more accurate purchases — lowering confusion and unnecessary returns.

If you want your store to feel modern, intuitive, and visually appealing, swatches are one of the simplest upgrades you can make.

Step 1: Create product with color variants

Define color variants you want to use. Go to Settings - Metafields and metaobjects under Metaobject definitions add colors you want to add. i.e,

Now Create a product and under the Category metafield section add colors you want to add.

Now add Color variants. Define price, quntity and images.

Step 2: Drop This Code Into card-product.liquid

Add it right after the product image and before the <div class="card__content">

(Yes, the location matters. No, Shopify will not correct your mistakes.)

<div class="swatches">
  {% assign color_patterns = shop.metaobjects['shopify--color-pattern'].values %}  
  {% if card_product.variants.size > 1 %}
    {% assign color_option_index = '' %}
    {% for option in card_product.options_with_values %}
      {% if option.name == 'Color' %}
        {% assign color_option_index = forloop.index0 %} 
      {% endif %}
    {% endfor %}
    {% if color_option_index != '' %}
      {% assign colors = '' %}
      {% for variant in card_product.variants %}
        {% assign color = variant.options[color_option_index] | downcase %}
        {% unless colors contains color %}
          {% assign colors = colors | append: color | append: ',' %}
          {% assign selected_color = color %}
          {% for color in color_patterns %}
            {% assign color_label = color.label | downcase %}
            {% if color_label == selected_color %}
              {% assign bg_color = color.color %}
            {% endif %}
          {% endfor %}
          <a href="{{ variant.url }}">
            <div class="card__colors" style="background-color: {{ bg_color }};">
              {% comment %} Color {% endcomment %}
            </div>
          </a>
        {% endunless %}
      {% endfor %}
    {% else %}
      {%- comment -%} No Color option found — fallback to metafield {%- endcomment -%}
      {% for color_item in card_product.metafields.shopify.color-pattern.value %}
        <a href="{{ card_product.url }}">
          <div class="card__colors" style="background-color: {{ color_item.color }};">
            {% comment %} Color {% endcomment %}
          </div>
        </a>
      {% endfor %}
    {% endif %}

  {% else %}
    {%- comment -%} No variants — use metafield {%- endcomment -%}
    {% for color_item in card_product.metafields.shopify.color-pattern.value %}
      <a href="{{ card_product.url }}">
        <div class="card__colors" style="background-color: {{ color_item.color }};">
          {% comment %} Color {% endcomment %}
        </div>
      </a>
    {% endfor %}
  {% endif %}
</div>

✔ This code politely asks your theme:
“Hey buddy… which colors does this product actually come in?”
Then it paints little circles to show them.

It supports:

• Variant colors
• Metafield fallback
• That one chaotic product in your catalog with seven “blue-ish” shades

Step 3: Add the CSS (AKA: Give the Swatches a Soul)

Now scroll to base.css (all the way down like a responsible coder) and paste this:

.swatches {
  display: flex;
  gap: 10px;
  padding: 1.3rem 0rem 0rem 0rem;
  z-index: 2;
}

.card__colors {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ccc;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.card__colors:hover {
  transform: scale(1.1);
}

This CSS gives your color dots:

• Curves
• Hover zoom

Your product cards now look 200% more expensive.

Step 4: Save. Refresh. Admire

Go ahead.
Refresh your store.
Stare at those swatches like a proud parent watching their child graduate from “meh” to “magnificent.”
Your customers will now spend 37% more time clicking on little circles instead of thinking about their financial decisions.
This is the power of frontend beauty.

Final Words of Wisdom

If you can add color swatches, you can do anything.

• Want to add size buttons? Go for it.
• Want to add swaches with images? Go for it.
• Want to add a 3D dancing llama to each product card? Also possible, but maybe talk to a therapist first.

Happy coding! 😉