Color swatches
Color swatches let customers see colors instead of only reading names.
They make product selection faster, clearer, and more visual — especially for fashion, cosmetics, and accessories.
Stylescape automatically detects the Color variant and displays swatches when available.
If your variant option is named Color, Farbe, Colour, Couleur, swatches will display automatically, to add a custom name go to the swatches in theme settings and your custom name don’t forget to separate names with coma:
Adding custom color swatches
You can define custom swatches directly from:
Theme settings → Swatches → Custom colors
Here you can manually add any color that Shopify does not recognize automatically.
🔹 Format (very important)
Use this format:
color-name: #hexvalue
✔ color name → must match the variant name
✔ hex value → the color you want to display
Example
Milk Shake: #ebdecf
Press Enter to add another line.
Make sure the color name matches your variant exactly (case-insensitive). Avoid symbols like & or / — use simple text only.
Adding image swatches (custom patterns or textures)
If you want an image instead of a color (for example: denim, leather, pattern):
Use the same format — but instead of a hex value, use the image filename.
Steps
1. Upload your image
Go to:
Shopify Admin → Content → Files
Upload your image (PNG or JPG recommended, 40×40px is ideal).
2. Copy the file name
In Our Example:
blossom.png
3. Add it to custom colors
Use this format:
color-name: filename.png
Example:
Multi Color swatches (Up to three colors)
To display two,three colors inside one swatch, add two hex codes together.
Use this format:
color-name: #hex1#hex2#hex3
Example (For two colors):
red and blue: #ff0000#1a4fff
Example (For three colors):
Volcano Grey: #dc5100ff#4e4e4eff#dc5100ff
Do not use space, ”,” or ’-’ — only the hex values side-by-side.
How to enable swatches?
Enable swatches on the product page
You can Enable color swatches directly from:
Product page → Product information → Variant picker
Product card swatches (collection page)
You can Enable color swatches directly from:
Theme settings → Product Card → Swatches
Final result
Your customers will see clear visual swatches instead of long color names — improving conversion, usability, and trust.