ZEST theme
Try Zest freeResourcesOther solutions
Search
⌃K
Links

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

Steps
  1. 1.
    In the theme editor (Customize), click Theme settings
  2. 2.
    Locate Color swatches
  3. 3.
    Make necessary changes
  4. 4.
    Save
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.
Note:
  • 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
Theme settings - Previous
Checkout
Next - Theme settings
Colors
Last modified 1mo ago