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

24 Comments

  1. Hi Alex, thanks for the code it works well. Two things, 1. Is there a way to link the swatch to the variant so it opens the product page with the chosen variant? 2. Is there a way to show a default swatch if the variant is missing a swatch, instead of showing a broken image link?

    Thanks
    James

    Like

    1. Hi James,

      Both are possible, however I am no longer maintaining this code (as I no longer use it anywhere in production, so it would be difficult for me to test) and so unfortunately, I won’t be able to provide any code (due to lack of time and other commitments).

      Sorry for the no-help reply.

      😦

      Like

    1. Hi Ta. Best way to troubleshoot this is to do a view-source on the rendered code and see what the swatch image name is for “Lime Green”. It will likely be something like “lime%20green.gif” or something of the sort. Then it’s just a matter of uploading a new swatch with the filename in the same format.

      Hope this helps.

      Like

      1. Hey there,

        I tried this and unfortunately it didn’t work – but! I just renamed two worded colours to have a hyphen and it sorted out the issue 🙂

        I have one more question.

        I was trying to figure it out myself but it proved to be a little tricky for me since I’m still a beginner with liquid.

        When someone clicks a gif, could we have it change to that particular colour thumbnail on the page? That would be amazing. I would really appreciate your help.

        Like

      2. Hi Ta,

        That is a more involved behaviour. If I ever need to implement this on a client’s site, I will post the details here, but off hand I believe it is too in depth to quickly resolve in a comment. I would recommend hiring a web developer to do this, or perhaps finding a Shopify theme that already has this behaviour.

        Good luck! 🙂

        Like

  2. Is there a way to hide swatches that don’t have any inventory? I have swatches outputting on my collections page, but some show when there is no inventory once you get to the product detail page. Thanks!

    Like

    1. Hi Christine,

      Right after the line {% for variant in product.variants %} add the following:

      {% if variant.available %}

      and then add {% endif %} right after {% endunless %}.

      The new code should look something like this:

      {% for option in product.options %}
      {% if option == ‘Color’ %}
      {% assign index = forloop.index0 %}
      {% assign colorlist = ” %}
      {% assign color = ” %}
      {% for variant in product.variants %}
      {% if variant.available %}
      {% capture color %}{{ variant.options[index] }}{% endcapture %}
      {% unless colorlist contains color %}

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

      (Note: I haven’t tested this, but that should do the trick!)

      Like

    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

  3. 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

    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

  4. 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

    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

  5. 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

    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

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

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

    Like

  7. 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

    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

      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

  8. 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

  9. 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

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s