Shopify Color Swatches Generator

{%- comment -%}
  Color swatches for the product page. Place this inside your {% form 'product', product %} block.
  Clicking a swatch updates the form's own hidden variant id field.
{%- endcomment -%}
{%- liquid
  assign target_option = null
  for option in product.options_with_values
    if option.name == "Color"
      assign target_option = option
    endif
  endfor
-%}
{%- if target_option -%}
  {%- style -%}
  .ea-swatches{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;list-style:none;margin:0;padding:0}
  .ea-swatch{display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:none}
  .ea-swatch__dot{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.15);box-shadow:0 0 0 2px #fff,0 0 0 3px transparent;background-size:cover;background-position:center;transition:box-shadow .15s ease}
  .ea-swatch[aria-current="true"] .ea-swatch__dot,.ea-swatch:hover .ea-swatch__dot{box-shadow:0 0 0 2px #fff,0 0 0 3px #111}
  .ea-swatch[data-unavailable] .ea-swatch__dot{opacity:.35}
  .ea-swatch__label{font-size:11px;color:#555}
  {%- endstyle -%}
  <ea-color-swatches class="ea-swatches" data-fallback='{"black":"#111111","white":"#ffffff","navy":"#1b2a4a","olive":"#6b6b4a","sand":"#d8c7a5","red":"#b3352c"}'>
    {%- for value in target_option.values -%}
      <button type="button" class="ea-swatch" data-value="{{ value.name | escape }}" data-variant-id="{{ value.variant.id }}" aria-current="{{ value.selected }}"{% unless value.available %} data-unavailable{% endunless %} aria-label="{{ value.name | escape }}">
        <span class="ea-swatch__dot" style="{% if value.swatch.color %}background-color: {{ value.swatch.color }};{% elsif value.swatch.image %}background-image: url({{ value.swatch.image | image_url: width: 64 }});{% endif %}"></span>
      </button>
    {%- endfor -%}
  </ea-color-swatches>
  <script>
    if (!customElements.get('ea-color-swatches')) {
      customElements.define('ea-color-swatches', class extends HTMLElement {
        connectedCallback() {
          var fallback = {};
          try { fallback = JSON.parse(this.dataset.fallback || '{}'); } catch (e) {}
          this.querySelectorAll('.ea-swatch').forEach(function (btn) {
            var dot = btn.querySelector('.ea-swatch__dot');
            if (dot.style.backgroundColor || dot.style.backgroundImage) return;
            var hex = fallback[(btn.dataset.value || '').toLowerCase()];
            if (hex) dot.style.backgroundColor = hex;
          });
          var form = this.closest('form');
          this.addEventListener('click', function (e) {
            var btn = e.target.closest('.ea-swatch');
            if (!btn) return;
            var variantId = btn.getAttribute('data-variant-id');
            var idInput = form && form.querySelector('input[name="id"]');
            if (variantId && idInput) {
              idInput.value = variantId;
              idInput.dispatchEvent(new Event('change', { bubbles: true }));
            }
            this.querySelectorAll('.ea-swatch').forEach(function (b) { b.setAttribute('aria-current', b === btn ? 'true' : 'false'); });
          }.bind(this));
        }
      });
    }
  </script>
{%- endif -%}