Color swatches added to the products in Shopify


Color swatches added to the products in Shopify:

Be cautious:

This tutorial is advanced and Shopify does not supports it. This requires knowledge of languages used in web designing such as Java script, HTML, CSS and liquid. If you are not comfortable in proceeding the tutorial, we suggest you to hire a Shopify expert.

Be cautious:

To work with sectioned themes this document has not been verified. This documentation is under review and will soon be updated. You can try implementing it on your theme but bear in mind that it perhaps will not function.


The way out presented here will not work for Ventures and Boundless themes.

When the steps in this tutorial had been completed, on your product pages the color options of your products will emerge as clickable swatches:


Any alternative that is not a color (for instance Size, Title) will be twisted into gray buttons, like so:


Take a glance at this demo shop to observe the tutorial in exploit.

  • In this piece of writing
  • A new liquid snippet known as swatch.liquid is produced.
  • Situate your pick Callback function
  • At the base of the theme.liquid, add a code.
  • A soldout.png graphic has to be uploaded to your theme assets.
  • To you stylesheet CSS has to be added.
  • Your color images ha to be uploaded.
  • FAQ

A new liquid snippet called swatch.liquid has to be created.

Desktop                                          iPhone                                           Android

  1. From the admin of your Shopify, Online store has to be clicked and the click themes or press GWT.
  2. Search for the theme that you need to edit, Click the button and the Edit HTML/CSS.
  3. Click the snippets that are heading to reveal your snippet content on the left side.
  4. Below the Snippets heading, click the Add a new snippet link:


       5. Call your new snippet ‘swatch’. Click Create snippet.

color-swatches-create-snippet (1)

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

      7. Save the changes.

Include swatch.liquid in product.liquid

  1. On the Edit HTML/CSS page, on the left beneath the Templates heading, 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. Comprise it with the name of the creation option you require to turn into a swatch. For instance, 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 desire to utilize the button management on a Size option, use this:

{% if product.available and product.variants.size > 1 %}

 {% include ‘swatch’ with ‘Size’ %}

{% endif %}

If you desire to apply the button or swatch management to all your product choices utilizes this:

{% if product.available and product.variants.size > 1 %}

  {% for option in product.options %}

    {% include ‘swatch’ with option %}

  {% endfor %}

{% endif %}

With the previous snippet, to any product option swatch treatment will be applied that encloses the word color or color in it, while to all other options button treatment will be applied.

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

Utilize the last one in case you are not certain which code snippet to use.

If you are not certain where the snippet has to be inserted, look for a select element with name ‘ID’ and add your snippet just beneath the element:

color-swatches-added-snippet (1)

Color swatches added snippet

Place your select Callback function

The select Callback function in a Shopify theme modernize the state of the Add to cart button and the displayed selling and “compare at” prices when a alternative is chosen.

Still in your product.liquid file, trace this:


Do not see it? In the folder of layouts, locate and click the theme.liquid file to open it in the online code editor. In a fair amount of themes, the selectCall function is located in this file as a substitute of product.liquid.

After you have traced your selectCallback function, insert the following code to the body of the function, either at the bottom or at the top.


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;





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


If you put in it at the base of the body of the function:


Add code at the base of theme.liquid

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

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


jQuery(function() {

  jQuery(‘.swatch :radio’).change(function() {

    var optionIndex = jQuery(this).closest(‘.swatch’).attr(‘data-option-index’);

    var optionValue = jQuery(this).val();











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 connected value is sold out for all variant of our product.

You can employ this one picture below, save it to your desktop:



Make certain to forename it soldout.png.

The CSS we are utilizing will stretch or compact that graphic so that it fits agreeably onto the button or swatch box.

  • On the Edit HTML/CSS page, trace and click the Assets folder to show its content.
  • Beneath the Assets heading, click the Add a new asset link.
  • Upload your soldout overlay.

Add CSS to your stylesheet

  1. On the Edit HTML/CSS page, trace and click the Assets folder to show its content.
  2. Underneath the Assets heading, trace a file with expansion .css.liquid that is not checkout.css.liquid. There ought to be only one other file. Such file is frequently named styles.css.liquid, style.css.liquid or shop.css.liquid.
  3. Subsequent to you have positioned your file, click it to open it on the online code editor. Copy+paste the content of this file at the base of your file. It is significant that you attach the CSS at the base of your stylesheet.

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

Upload your colored pictures

For the options that are colorful, you can either let the stylishness of the script offer a color for you, or you can upload a picture that signifies that color.

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


There is a significant naming reunion to value here! The image must be forenamed after the color choice, but be handle zed, and have a .png extension.

For instance, if you contain a color called ‘Déjà Vu Blue’, and then name your picture deja-vu-blue.png

Other instance, if your color is ‘Blue/Gray’, then forename your image blue-gray.png.

Most easy example, if your color is ‘Black’, the name your picture black.png.

  • On the Edit HTML/CSS page, trace and click the Assets folder to disclose its content.
  • Below the Assets heading, click the Add a new asset link.
  • Upload your picture.

Repeat 2nd and 3rd steps till you have uploaded all your pictures in your Shopify


About Author

Leave A Reply