Swatch problem on collection page

Shopify Discussion
,
1

Hello below I got the code for making swatches on my collection page but there is a problem that this uses the colors, takes the name and makes that the color instead of using the variant metafield color swatches like my product page does. Collection page url: Jewelry – InteriorGlows
It should make the swatches like on the product page, url: Astre Shine Ring – InteriorGlows

TrendBlend_0-1751575361047.png
TrendBlend_0-1751575361047.png1918×1078 329 KB


{% assign color_option_index = nil %}
{% for option in card_product.options_with_values %}
  {% assign option_name = option.name | downcase %}
  {% if option_name == 'color' or option_name == 'kleur' %}
    {% assign color_option_index = forloop.index0 %}
  {% endif %}
{% endfor %}

{% if color_option_index != nil %}
  
    {% assign shown_colors = '' %}
    {% for variant in card_product.variants %}
      {% assign color = variant.options[color_option_index] | downcase %}
      {% unless shown_colors contains color %}
        {% assign shown_colors = shown_colors | append: color | append: ',' %}
        

          
        

      {% endunless %}
    {% endfor %}
  

{% endif %}
2

@TrendBlend because values from options being called “swatches” in that old code, and actual swatches in shopify are different things.

Which are both different from the variant image.

https://shopify.dev/docs/api/liquid/objects/swatch

It’s an advanced customization to implement swatches into collection grids.

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