Adding number of color variants to card in gallery view

[passingthrough]

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. 

[CodingFifty]

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 Title

1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code

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

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

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

4. 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 %}

5. 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 Code

1. 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>

2. Save the file.

---

Step 3: Style the Swatches with CSS

1. Open the Assets folder and find the base.css file

2. 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;
   }

3. Save the file and refresh your store!

[passingthrough]

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!