Add color swatches to products

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Did you know?

The solution presented here won't work in the following themes: Venture and Boundless.

When you have completed the steps in this tutorial, the color options of your products will appear as clickable swatches on your product pages:

Color swatches 1

Any option that is not a color (for example Size, Title) will be turned into gray buttons, like so:

Color swatches 2

Take a look at this demo shop to see the tutorial in action.

Create a new Liquid snippet called swatch.liquid

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. On the left side, click the Snippets heading to reveal your Snippets content.

  4. Under the Snippets heading, click the Add a new snippet link:

    Color swatches click add snippet
  5. Call your new snippet 'swatch'. Click Create snippet.

    Color swatches create snippet
  6. Copy+paste the content of this file into your new swatch.liquid snippet.

  7. Save your changes.

Include swatch.liquid in product.liquid

  1. On the Edit HTML/CSS page, under the Templates heading on the left, locate and click product.liquid to open your product template in the online code editor.

  2. Include your swatch.liquid snippet where you want to insert a swatch. Include it with the name of the product option you need to turn into a swatch. For example, use this code if your product has a Color option:

    
    {% if product.available and product.variants.size > 1 %}
     {% include 'swatch' with 'Color' %}
    {% endif %}
    
    

If you want to use the button treatment on a Size option, use this:


{% if product.available and product.variants.size > 1 %}
 {% include 'swatch' with 'Size' %}
{% endif %}

If you want to apply the button or swatch treatment to all your product options, use this:


{% if product.available and product.variants.size > 1 %}
  {% for option in product.options %}
    {% include 'swatch' with option %}
  {% endfor %}
{% endif %}

With this last snippet, the swatch treatment will be applied automatically to any product option that contains the word colour or color in it, while the button treatment will be applied to all other options.

Receiving a swatch treatment means that your color drop-down will be removed from the product page and be replaced with a series of colorful buttons. Receiving a button treatment means that your option drop-down will be removed from the product page and be replaced by a series of labeled gray buttons.

If you're not sure which code snippet to use, use the last one.

If you're not sure where to insert your snippet, look for a select element with name 'id' and add your snippet right below that element:

Color swatches added snippet

Locate your selectCallback function

The selectCallback function in a Shopify theme updates the state of the Add to cart button and the displayed selling and “compare at” prices when a variant is selected.

Still in your product.liquid file, locate this:

selectCallback

Don't see it? Under the Layouts folder, locate and click the theme.liquid file to open it in the online code editor. In a fair amount of themes, the selectCallback function is located in this file instead of product.liquid.

After you have located your selectCallback function, add the following code to the body of the function, either at the top, or bottom:

// BEGIN SWATCHES
if (variant) {
  var form = jQuery('#' + selector.domIdPrefix).closest('form');
  for (var i=0,length=variant.options.length; i<length; i++) {
    var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
    if (radioButton.size()) {
      radioButton.get(0).checked = true;
    }
  }
}
// END SWATCHES

If you add it at the top of the body of the function:

Color swatches select callback top

If you add it at the bottom of the body of the function:

Color swatches select callback

Add code at the bottom of theme.liquid

Still on the Edit HTML/CSS page, under the Layouts heading on the left, locate and click your theme.liquid file to open it in the online code editor.

At the bottom of your theme.liquid file, right above your </body> tag, add this code:

<script>
jQuery(function() {
  jQuery('.swatch :radio').change(function() {
    var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
    var optionValue = jQuery(this).val();
    jQuery(this)
      .closest('form')
      .find('.single-option-selector')
      .eq(optionIndex)
      .val(optionValue)
      .trigger('change');
  });
});
</script>
Color swatches theme liquid

Upload a soldout.png graphic to your theme assets

We are going to upload a graphic to our theme assets that will be overlaid on top of our buttons when their associated value is sold out for all variations of our product.

You can use this one image below, save it to your desktop:

Soldout

Note

Make sure to name it soldout.png.

The CSS we're using will stretch or compress that graphic so that it fits nicely onto the button or swatch box.

  1. On the Edit HTML/CSS page, locate and click the Assets folder to display its content.

  2. Under the Assets heading, click the Add a new asset link.

  3. Upload your soldout overlay.

Add CSS to your stylesheet

  1. On the Edit HTML/CSS page, locate and click the Assets folder to display its content.

  2. Under the Assets heading, locate a file with extension .css.liquid that is not checkout.css.liquid. There should be only one other file. Such file is often named styles.css.liquid, style.css.liquid or shop.css.liquid.

  3. After you have located your file, click it to open it on the online code editor. Copy+paste the content of this file at the bottom of your file. It is important that you append the CSS at the bottom of your stylesheet.

If you can't find your theme's stylesheet, copy+paste the CSS provided into a style element, and add that style element at the bottom of your product.liquid file.

Upload your color images

For the color options you have, you can either let the smartness of the script provide a color for you, or you can upload an image that represents that color.

The way I have gotten my images from my products in my demo shop was to open each product image on my storefront in the “colorbox” (lightbox) and grab around ~ 55 by 40 pixels section of the product image, then save that small screen grab to my desktop, and rename the image.

Note

There's an important naming convention to respect here! The image must be named after the color option, but be handleized, and have a .png extension.

For example, if you have a color called 'Déjà Vu Blue', then name your image deja-vu-blue.png

Other example, if your color is 'Blue/Gray', then name your image blue-gray.png.

Most simple example, if your color is 'Black', the name your image black.png.

  1. On the Edit HTML/CSS page, locate and click the Assets folder to reveal its content.

  2. Under the Assets heading, click the Add a new asset link.

  3. Upload your image.

Repeat steps 2 and 3 until you have uploaded all your images.

FAQ

  • What happens when my products have options other than color and size?

    If you include the swatch with all product options, every option will be turned into buttons. If you only include the swatch with 'Color', then the other options will be represented by their usual drop-down.

  • What will happen to my products that have only one variant?

    Nothing will explode. There will be no button for that product.

  • What will happen if one color (or size, or...) is sold out for all variants of my product? What then?

    It will be grayed out slightly and crossed out.

  • With this solution, can my theme still auto-select the first available variant on page load?

    Yes.

  • What if I want to use JPEG images for my swatches instead of PNG?

    In your swatch.liquid file, edit line number 5 to this:

    {% assign file_extension = 'jpg' %}
  • What if I forget or do not upload an image for one of my colors, what happens then?

    Nothing will explode. The script will take the last word of your color name and set the swatch box color to that name:

    background-color: {{ value | split: ' ' | last | handle }};

    If the color is 'Sky Blue', then the CSS will apply the color blue to the box.

    Here is a list of CSS color keywords and their hex value: http://en.wikipedia.org/wiki/Web_colors.

    If there's no color associated with that word, then the box will be gray, but the color name will be displayed in the tooltip.

  • So, I don't need to upload an image if I am okay with the default web color associated with my color name?

    Correct.

  • What are the default web colors again?

    Here is a list of CSS color keywords and their hex value: http://en.wikipedia.org/wiki/Web_colors.

  • Those sexy tooltips are using JavaScript?

    No, only CSS and Dane Tello is the genius behind them. They work well in Internet Explorer, albeit without the animation and drop-shadow.

  • My color options show up as text-in-a-box instead of a colored box. What gives?

    Name the Shopify option Color, or color, or Colour, or colour, or Base color, or anything that contains colo(u)r in it. It's not case-sensitive.

  • Can the boxes be any smaller? They are kind of big!

    Yes. At the beginning of the provided CSS, you have 2 Liquid variables you can edit, width and height. Edit those values. That's it.

  • Is this compatible with linked options?

    Yes, it is, as of April 8th 2014. Grab new linked options and color swatches code if your own code is any older.

  • Is this compatible with deep variant linking?

    Yes. This URL contains ?variant=179075152 in it. It points to the Navy / Large variant of the product. Click there and see the Navy / Large variant selected.

Want to discuss this page?

Visit the Shopify Community