Cacher is the code snippet organizer for pro developers

Works with CSS color keywords or images. If you have a non-css color / pattern, you need to upload the image with a handelized name. If the color is "aqua blue" then the file needs to be uplaoded as "aqua-blue.png". You can use jpg if you prefer by changing the file_extension and you can change from color to colour or farbe, etc by changing the option_name

-JG

{% assign option_name = "Color"  | downcase %}
{% assign file_extension = "png" %}
{% assign product_options = product.options | downcase %}

<div class="swatch-container" style="padding: 5px 0;">
{% if product_options contains option_name %}
  {% for option in product_options %}
    {% if option contains option_name %}
      {% assign option_index = "option" | append: forloop.index %}
      {% assign swatches = product.variants | map: option_index %}
      {% assign swatches_filtered = '' %}
     
    {% for swatch_option in swatches %}
        {% unless swatches_filtered contains swatch_option %}     
          {% assign swatches_filtered = swatches_filtered | append: ', ' | append: swatch_option %}     
        {% endunless %}             
      {% endfor %}     
    {% endif %}
  {% endfor %}

  {% assign unique_swatches = swatches_filtered | remove_first: ', ' | split: ', ' %}

  {% for swatch in unique_swatches %}
    <span style="width: 25px; height: 18px; margin-right: 5px; float: left;  background-color: {{ swatch }}; background-image: url({{ swatch | handle | append: '.' | append: file_extension | asset_url }}); border: 1px solid #EEE;"></span>
  {% endfor %}
{% endif %} 
</div>