How do I show custom color swatches?

Some of our themes allow the use of swatches (instead of dropdowns) for the product variants. 

Step 1

To activate swatches go to Shopify Admin > Online Store and next to the theme you want to edit click Customize. Choose Product Pages from the top-bar and in the section settings choose Swatches and check off show custom swatch images

Step 2

If you want to show color swatches you will need to name one of the Product Options either Color or Colour. By default, the color swatches use the HTML color spectrum, so if your variant color option is named Blue it will show the HTML color Blue (here is a list of HTML colors). 

If your color name does not exist on the list of HTML colors it will default to white, this is where custom color swatches are needed. Or if the color isn't quite accurate you can use custom color swatches.

Step 3

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 being used is called White/Black save the image as white-black.png (all in lowercase with slashes / replaced with hyphens "-" ).
  3. If the color is one word like Gold save the image as gold.png (all lowercase again). 

Step 4

Once you have saved all your images go to Online Store > Themes, next to the theme click the actions dropdown and select Edit Code. On the next page in the left sidebar click on the Assets folder and click Add a new asset. Upload each png swatch one by one.

Note: For Mr Parker V6.5+, Icon 7+ & Vantage 7+

If you're using these themes, we have made this process easier by allowing you to upload the swatches to the Shopify Admin Files. This allows you to upload more than one swatch at a time. To do this go to your Shopify Admin > Settings > Files > click upload and select all your swatches. 

If you refresh your product page you will now see the generic color is replaced with your swatch image.