Swatch problem on collection page

[TrendBlend]

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

  <style>
  .color-swatches {
    display: flex;
    gap: var(--swatch-spacing, 5px);
    margin-top: 0.5rem;
    flex-wrap: wrap;
  }

  .color-swatch-wrapper {
    display: inline-block;
  }

  .color-swatch {
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: var(--color-swatch);
    width: var(--swatch-size, 20px);
    height: var(--swatch-size, 20px);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
  }

  .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }
</style>

{% 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 %}
  <div class="color-swatches" style="--swatch-spacing: 5px;" data-swatch-shape="round">
    {% 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: ',' %}
        <div class="color-swatch-wrapper">
          <button class="color-swatch"
                  style="--color-swatch: {{ color }}; --swatch-size: 20px;"
                  data-product-url="{{ card_product.url }}"
                  data-variant-id="{{ variant.id }}"
                  title="{{ color | capitalize }}"
                  aria-label="{{ color }}">
            <span class="visually-hidden">{{ color }}</span>
          </button>
        </div>
      {% endunless %}
    {% endfor %}
  </div>
{% endif %}

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".color-swatch").forEach(function (swatch) {
      swatch.addEventListener("click", function () {
        const url = swatch.dataset.productUrl;
        const variantId = swatch.dataset.variantId;
        if (url && variantId) {
          window.location.href = ${url}?variant=${variantId};
        }
      });
    });
  });
</script> 

[PaulNewton]

@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 ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.