How to show custom color swatches

Last Updated: Sep 28, 2016 12:10PM EDT
Sometimes when using color swatches for your product variants it isn't possible for the colors to automatically show a true reflection of your products color. When you name a color in your product variants, that color can be matched to a color in the HTML color spectrum simply by it's name.

Not all colors or shades could possibly be accounted for, here is a quick reference of the colors that you can see based on the naming of your variants:​

Instead of relying on these swatches you can also upload your own swatch images, here is how:

Take a small 50px x 50px screenshot of the product where you can see a good proportion of the color.

Save this image using the following setup...


  1. If the color being used is called: Light Grey Save the image as.... light-grey.png
    *all in lowercase with spaces replaced with hyphens "-" 
  2. If the color is one word... Gold save the image as..... gold.png
    *all lowercase again 
  3. Once you have a few images saved in your admin click on themes > customise theme > theme options ( top left ) > Edit HTML / CSS

On the next page Click on Assets and click the Add a New Asset button

Upload each of your swatch images

Once ready and you have your images uploaded go to: Themes > customise theme > Product Page
In here you will see an option for Custom Swatches. Make sure that this is checked and click save.

Now when Light Grey is used or Gold or any other image that you have setup it will load in place of the standard color box.

Get help

Want to customize your theme?
Have questions not covered in our docs?
  • Ask a theme support question
  • Support Hours:
    9:30 - 17:30 EST
    Monday - Friday
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found