Add Color Swatches to Shopify Collections

NO LONGER SUPORTED: Please note that the code in this post is no longer supported. Although it probably still works, please use at your own risk.

Below is some code for your Shopify Collection that will display color swatches for each product.

• Install this on your Collections page within your Product Loop. If your theme has a product-thumbnail.liquid snippet install it there, (or alternatively in your product-loop.liquid snippet).
• Create your own images for each color swatch and set the filename to the color (ie: black.gif, white.gif, green.gif, etc…)

{% for option in product.options %}
  {% if option == 'Color' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}{{ variant.options[index] }}{% endcapture %}
      {% unless colorlist contains color %}
        <img src="{{ color | downcase | append: '.gif' | asset_url }}" alt="{{ color }}" width="16" height="16" />
        {% capture tempList %}{{colorlist | append: color | append: ‘ ‘}}{% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}

Also available on GitHub here: Shopify Color Swatches

Thank you to Curt and Mike Thorne for providing a more elegant solution to my initial one.