A Color swatch is a thumbnail image used to indicate a particular color, pattern, or shade for a product variant. Empire provides swatches as a variant display option for the Product page, as well as the product card and tag filters on the collection page.
Set up variants for swatches
If variants are already set up for your products, you can skip this step.
To set up variants for your products, follow this guide:
Identify variants for swatches in the theme editor
Go to your Empire theme > Customize > Theme settings > Products
In this theme setting, scroll down to the Color swatches portion.
Locate the Swatch trigger field. The value in this field will be Color by default but can be changed to match the desired variant group name. This is not case-sensitive, but make sure the spelling matches (e.g. ‘Color’ will not match with ’Colour’).
This feature is limited to letters included in U.S. Standard QWERTY Keyboards. The platform is unable to recognize characters and symbols from other alphabets or scripts, such as Cyrillic or Kanji. Confirm you are using standard characters from the English alphabet for the best results.
Activate the swatches
Once the Swatch trigger is set up, activate the swatches by selecting Enable color swatches.
Common color names will be connected automatically with a set of color swatches, but custom colors can be added using the Custom colors field.
Add or replace colors for swatches
Use the Custom colors field to fine-tune the colors used for the available variants.
If a variant is not displaying a color, provide your own by adding the variant name paired with the connected color name or hex code. For example, there is no provided color for 'Cobalt' so this can be corrected by adding Cobalt: #0047ab
Add a missing swatch color
If a particular color name doesn't display a filled color swatch, locate an example of the color and create a PNG image of that color. Save or rename the image to match the spelling of the desired variant. There is a particular format to follow here in order for the connection to complete.
JPG/JPEG images are not compatible with Empire's swatch feature.
For this example, 'Fluorescent Grey' is the name of the variant, so the file name of the image will be made into a handle format—replacing spaces with hyphens ('-') and making all letters lowercase.
Once this file has been renamed, go to your Shopify admin > Settings > Files > Upload and upload the image file.
Replace a color
If the colors provided automatically don't resemble the appearance of the product variant, you can replace the standard color by using the Custom colors field.
In this field, first add the name of the variant as it appears on the storefront, followed by a colon.
Then add the name or hex code for the replacement color
Light Grey: #C0C0C0
Light Grey: silver
This will replace the default Light Grey color with the hex code