Add Color Swatches to your Shopify Collections Page

Product Color Swatches

Below is some code for your Shopify store that will display color swatches for your products.

  • 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

If there are any bugs or improvements to the code above, please leave a comment below. Thank you to Curt and Mike Thorne for providing a more elegant solution to my initial one.

To see this in action: http://store.manitobah.ca/collections/mukluks

16 Comments

    1. Hi Sam,

      Unfortunately I don’t have much experience with the debut theme. But you want to place the code immediately after your product.price on your collection page. To figure this out, you should open up your Collection.liquid file, and then open up any files that seem to be included in there (look for something called product-grid or something similar), and you should eventually get to some code that outputs product.featured_image, product.title, and product.price. That’s where you want to paste this code.

      Also note, that the code in this post is quite old. There *may* be better way to do this.

      Hopefully this helps…?

      Like

      Reply

  1. Hi There, I’m trying to implement this code using the Brooklyn theme in shopify. The code is able to detect the number of variants I have for the product but doesn’t show the color below the images. the website is http://www.thebagfather.com. I uploaded an asset in gif format, but still doesn’t resolve the issue. Is this something I’m missing?

    Like

    Reply

    1. Hi Mo. Best bet is to do a view-source on the rendered code and see what the swatch image names are. The most likely culprit is that the uploaded asset filenames don’t match what is being outputted in the html img src.

      Like

      Reply

  2. Hi there Sir Alex, if i dont have any product-thumbnail.liquid or product-loop.liquid in my snippets, Where can i put the code to be able to run that feature, i am using the Brooklyn theme. I’m a little bit confuse with shopify’s liquid. Thanks in advance. Have a good day

    Like

    Reply

    1. Hi Jerrald,

      Sorry for the late reply.

      For the Brooklyn theme, you want to me looking at the snippet called “product-grid-item.liquid”. I’m not familiar with that theme, but as a start, I would paste my code between lines 36 and 37 of that file (right after the product image).

      Note/FYI: The code in this post is from 2012, and so is over 4 years old, and I don’t use it anymore, and don’t maintain it anymore, and so at some point it is likely not to work anymore.

      Hope this helps! 🙂

      Like

      Reply

  3. Hello,

    Is it possible to do this without using colors? My variants have various names, such as: design, color, type, etc. Each product may have its own set of named variants. Also, my theme doesnt have a product-thumbnail.liquid snippet or product-loop.liquid snippet.

    Thanks,
    James

    Like

    Reply

    1. Hi James — Sorry for the late reply.

      If I understand correctly, you want to display a swatch based on the value of a product option called something other than ‘color’. This *should* be doable either by changing {% if option == ‘Color’ %} on line 2 to {% if option == ‘Design’ %} to grab the value from the variant option called “Design”.

      If your don’t have a thumbnail.liquid or product-loop.liquid snippet, then you’ll need to find the spot in your code where your product images are being written and place the code directly below that (but within the product loop).

      Hope this helps.

      Best,

      Alex

      Like

      Reply

  4. try adding: | replace_first: ‘ ‘, ‘_’ |

    <img src="{{ color | downcase | strip_newlines | strip_html | replace_first: ' ', '_' | remove: ' ' | append: '.gif' | asset_url }}"

    Like

    Reply

  5. Hi Alex,

    Can this code be added after the final “endfor” in the product-loop.liquid file, or does it have to go in the middle somewhere? Also, once we have created images for each colour swatch, where do they get uploaded to – “Assets” for the theme? Settings > Files? Elsewhere? I haven’t been able to get this working yet.

    Thanks,

    Don

    Like

    Reply

    1. Hi Don,

      This code is to show the color swatch for a single product, hence why it needs to be inside the for loop so that the color swatches get displayed once for each product.

      For the color swatch images, they can get uploaded to the “Assets” (and the code is setup to expect this), but it is important that the color swatch image name matches the name of the color. If you don’t see the color swatch images showing up then one possible culprit is that the filename and color name don’t match up. Do a view source on the page to see what image filename was output and then just rename your images to match the output.

      Hope this helps.

      Alex

      Like

      Reply

      1. Thank you Alex, I got this working – very helpful!

        For others having trouble, I added this code in my product-thumbnail.liquid file as the last item within the anchor tag showing the product info, after the last “endfor”, but before the closing tag.

        I also ran into the same problem as pajje with a lot of extra “%0A%20%”, so I used his fix. My final code looked like this:

        {% 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 %}

        {% capture tempList %}
        {{colorlist | append: color | append: ‘ ‘}}
        {% endcapture %}
        {% assign colorlist = tempList %}
        {% endunless %}
        {% endfor %}
        {% endif %}
        {% endfor %}

        Thanks again!

        Like

  6. Thanks for posting this. I’d like to offer a mod which changes two things:
    1. Only displays the color swatches if there is more than one available
    2. Uses span tags with CSS classes to draw the swatches.

    First we create the array of available colors for the product, then we loop through that new array. If it contains more than one color then it draws the span and uses a handelized version of the color to create a class name.

    {% 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 %}
    {% capture tempList %}{{colorlist | append: color | append: ‘|’ }}{% endcapture %}
    {% assign colorlist = tempList %}
    {% endunless %}
    {% endfor %}
    {% assign colorArray = colorlist | split: ‘|’ %}
    {% endif %}
    {% endfor %}

    {% for item in colorArray %}
    {% if colorArray.size > 1 %}

    {% endif %}
    {% endfor%}

    Like

    Reply

  7. Hi Alex!

    We just released our Swatchify app that allows Shopify store owners to easily add color swatches to all store products and manage the colors from the Shopify admin, we would love your feedback!

    Looking forward 🙂

    Nancy

    Liked by 1 person

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s