Adding number of color variants to card in gallery view

Store Design
, , , ,

Topic summary

A Dawn theme user wants to display the number of color variants and color swatch bubbles under product titles in collection gallery view.

Proposed Solution:
A community member provided step-by-step custom code instructions:

  • Add Liquid code to card-product.liquid to count and display color variants
  • Insert code for color swatch bubbles below the variant count
  • Style both elements using CSS in base.css

The solution involves:

  1. Counting color options using Liquid loops
  2. Displaying “# Color Variants” text
  3. Creating circular color swatches with CSS styling

Current Status:
The original poster is experiencing implementation issues—the code from Step 1 isn’t displaying regardless of placement. They note the exact code structure referenced in the instructions doesn’t match their theme files. They’re seeking guidance on how to share their actual code for troubleshooting.

Unresolved: The implementation remains incomplete, awaiting further assistance to identify the correct code location in their specific Dawn theme version.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I am using dawn theme. I have products with multiple color variants, and I am hoping to add “# Color Variants” under the title in the product card in gallery view. I would love to add color swatch bubbles as well. I cannot seem to find custom code for this so I thought this would be a great place to start. Thank you!

*I used ChatGPT but it isn’t able to match my theme code in the code it provides so it doesn’t work properly, and my brain cannot decipher where the errors are.

2

Hi @passingthrough ,

You’re using the Dawn theme and want to display “# Color Variants” under the product title in the product card (gallery view). You also want to add color swatch bubbles. Both of these can be added using custom Liquid & CSS code.

Step 1: Add “# Color Variants” Under Product Title1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code

  1. Open the Snippets folder and find the card-product.liquid file

  2. Look for the product title code, which should look like this:

    <h3 class="card__heading">
    <a href="{{ product.url }}">{{ product.title }}</a>
</h3>

  3. Right below this, add the following code:

    {% assign color_variants = 0 %}
{% for option in product.options_with_values %}
    {% if option.name == 'Color' %}
        {% assign color_variants = option.values | size %}
    {% endif %}
{% endfor %}

{% if color_variants > 0 %}
    <p class="variant-count">{{ color_variants }} Color Variants</p>
{% endif %}

  4. Save the file and check your store! This will display “3 Color Variants” (or however many exist) under the product title.

Step 2: Add Color Swatch Bubbles### Modify Liquid Code1. In the same card-product.liquid file, add the following code right below the previous step’s code:

<div class="color-swatches">
    {% for option in product.options_with_values %}
        {% if option.name == 'Color' %}
            {% for value in option.values %}
                <span class="swatch" style="background-color: {{ value | handleize }};"></span>
            {% endfor %}
        {% endif %}
    {% endfor %}
</div>
  1. Save the file.

Step 3: Style the Swatches with CSS1. Open the Assets folder and find the base.css file

  1. Scroll to the bottom and add this CSS:

    .variant-count {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

.color-swatches {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ddd;
}

  2. Save the file and refresh your store!

3

With Step 1, no matter where I put the code it does not show. There is no exact code like you referenced so I played around with a few spots that were similar. Is there a way for me to share what I see? Thank you!