Color swatches

Color swatches allow you to display actual colors (or images) instead of color names on product options.

Enable on product page / featured product: Activates color swatches on the main product (Product information) section and the Featured product section. You may want to keep this unchecked while you set up your color swatches.

Enable on collection / search filters: Activates color swatches on collection pages, as well as on the search page. You may want to keep this unchecked while you set up your color swatches.

Enable on product cards: Activates color swatches on the product cards in collections and sections that list products.

Options: The products’ option names that should become color swatches. Separate multiple names with a comma. If your store is translated to multiple languages and you want display swatches also for these languages, you will need to also include the translated words.

For example, your products variants have Size, Color, and Material options, and you want to display watches for both Color and Material. Also, your store is available in both English and French. You need to enter:

Color,Couleur,Material,Matériel

Colors: The option values (from the product options above) and their respective hexadecimal color or supported image file name, separated by a colon and a space “: “. Add each pair on a new line. Translations also need their own lines. Example:

Black: #000000
Noire: #000000
White: #ffffff
Blanche: #ffffff
Plastic: plastic.png
Plastique: plastic.png
Metal: metal.jpg
Métal: metal.jpg

The images’ file names and extensions must match the ones appearing on the Files page.

Native Shopify color swatches (recommended)

Shopify also natively supports color swatches by using category metafields. If you wish to use this feature instead of the theme’s color swatches, you can easily set them up by following Shopify’s official guide.

Please note that regardless of how color swatches are created, the global theme settings that control where they are displayed still apply (i.e. “Enable on product page“, “Enable on product cards“).