Knowledge Base

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

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

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

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:

   

5. Call your new snippet 'swatch'. Click 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:

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:

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

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>

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:

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.

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

  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.

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

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

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