card-product.liquid

{% if card_product.has_only_default_variant == false %}
            <div class="card-variant-swatches" data-product-id="{{ card_product.id }}">
              {% for option in card_product.options_with_values %}
                {% if option.name == 'Color' or option.name == 'colour' %}
                  <div class="variant-swatches">
                    {% for value in option.values %}
                      {% assign variant = card_product.variants | where: "option1", value | first %}
                      {% if variant %}
                        <button 
                          type="button"
                          class="variant-swatch"
                          data-variant-id="{{ variant.id }}"
                          data-variant-image="{{ variant.featured_image | image_url: width: 600 }}"
                          data-variant-price="{{ variant.price | money }}"
                          style="background-color: {{ value | downcase }}; {% if variant.featured_image %}background-image: url('{{ variant.featured_image | image_url: width: 600 }}');{% endif %}"
                          title="{{ value }}">
                        </button>
                      {% endif %}
                    {% endfor %}
                  </div>
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
          
          <script type="application/json" class="product-variants-json">
  {{ card_product.variants | json }}
</script>
<style>
  .card-variant-swatches {
    margin-top: 10px;
  }

  .variant-swatches {
    display: flex;
    gap: 8px;
  }

  .variant-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #ddd;
    cursor: pointer;
    padding: 0;
    background-size: contain;
  }

  .variant-swatch.active {
    border: 2px solid #000;
  }
</style>
          
          
          <script>
          document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".card-variant-swatches").forEach(function (wrapper) {
    const card = wrapper.closest(".card");
    const mainImage = card.querySelector(".media img");
    const priceElement = card.querySelector(".price-item--regular");

    wrapper.querySelectorAll(".variant-swatch").forEach(function (button) {
      button.addEventListener("click", function () {
        const imageUrl = this.dataset.variantImage;
        const price = this.dataset.variantPrice;
        // Remove active class
        wrapper.querySelectorAll(".variant-swatch")
          .forEach(btn => btn.classList.remove("active"));
        this.classList.add("active");
        /* ======================
           UPDATE IMAGE PROPERLY
        ======================= */
        if (imageUrl && mainImage) {
          // Update src
          mainImage.src = imageUrl;
          // Remove srcset so browser doesn't override it
          mainImage.removeAttribute("srcset");
          mainImage.removeAttribute("data-srcset");
          // Force reload
          mainImage.classList.remove("lazyload");
        }
        /* ======================
           UPDATE PRICE
        ======================= */
        if (priceElement) {
          priceElement.textContent = price;
        }
      });
    });
  });
});
          </script>