Color swatches

A guide to customize the store's products color swatches.
This article shows how to enable and customize color swatches to display product variants in different forms.
In this article:

How to enable color swatches

  1. 1.
    In the theme editor (Customize), click Theme settings
  2. 2.
    Locate Color swatches
  3. 3.
    Make necessary changes
  4. 4.
You can enable/disable color swatches by ticking/unticking the checkbox:

1. Color swatch trigger

Define which is the color option and separate them by a comma.

2. Colors swatches

Choose the suitable HEX color codes and add them to the provided box.
Select the Color swatch shape as Circle/Square.
  • Separate items with a comma.
  • Write the color name from the product option and separate options with the color HEX value.
  • All texts are in lowercase.

You can also add color swatches to your product and collection pages using images:

  1. 1.
    Go to Shopify admin > Settings > Files.
2. Click Upload files.

3. Naming your swatch files:

  • Orange swatches would need to be named orange.png (capitals become lowercase).
  • Light blue swatches would need to be named light-blue.png (capitals become lowercase, spaces and other special characters become hyphens).
Here are some sample images for color swatches: light blue, ​cyan.
.jpg files will not be shown, you must use .png