A Color swatch is a solid color or thumbnail image used to indicate a particular color, pattern, or shade for a product variant. Superstore provides Color swatches as a variant display option on the Product page, as well as the product card and tag filters on the collection page.
Set Up Variants
If variants are already set up for your products, you can skip this step.
To set up variants for your products, follow Shopify's guide.
Variants - Shopify Help Center
Identify Variants for Swatches in the Theme Editor
Use the theme editor (Customize) to open Theme settings, then Products.
Scroll down to the Color swatches portion to 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’).
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.
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 Superstore'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.
fluorescent-grey.png
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.
Light Grey:
Then add the name or hex code for the replacement color.
Light Grey: #C0C0C0
or
Light Grey: silver
This will replace the default Light Grey color with the hex code.