Color Swatches
Display color or material options as visual swatches on product pages and product cards.
Color swatches provide a visual way for customers to see product variants before clicking through to the product page. SAISON supports automatically mapped hex codes and custom image uploads for precise material matching.
How Swatches Work
- Swatches replace standard text dropdowns or pill buttons for specific variant options.
- Swatches can appear on the Product Page and on Product Cards (collection grids).
- SAISON automatically attempts to map standard color names (like 'Red' or 'Navy') to CSS colors.
- For complex patterns or specific brand colors, you can upload custom swatch images.
Quick Setup
Enable Swatches in Theme Settings
Go to Theme Settings > Product options and check the box to Enable color swatches. You must also enter the exact name of the product option you want to turn into swatches (e.g., Color, Colour, or Material).
Use standard color names (Automatic)
If your variants are named using standard HTML color names (e.g., Black, White, Red, Blue, Navy), SAISON will automatically convert them to the appropriate solid color. No further action is needed!
Upload custom swatch images (Advanced)
For custom colors or patterns, create a small .png file (we recommend 64x64px).
Name the file exactly as your variant name, converted to lowercase and with spaces replaced by hyphens.
For example, if your variant is Olive Green, name the file olive-green.png.
Upload these files to your Shopify Admin under Content > Files.
Image Requirements: Swatch images must be .png files. Ensure they are cropped tightly to the pattern or color to look best inside the circular swatch UI.
Key Settings
| Setting | Location | Recommended | Notes |
|---|---|---|---|
| Enable swatches | Theme settings > Product options | Checked | Turns text options into visual swatches. |
| Option name | Theme settings > Product options | Color, Colour | Comma-separated list of option names to trigger swatches. |
| Show on product cards | Theme settings > Product selling | Checked | Displays swatches underneath product images on collection pages. |
| Swatch style | Theme settings > Product options | Circle | Choose between circle, square, or rounded rectangle shapes. |
Troubleshooting Swatches
Swatches appear as blank circles or default text
- Check your spelling. The option name in Theme Settings must perfectly match the Option Name on your product (e.g., if you wrote "Color" but the product uses "Colour").
- If using custom images, ensure the file is a
.pngand uploaded to Content > Files, not your theme assets. - Verify the filename formatting:
Navy Bluemust becomenavy-blue.png.
Swatch hover preview isn't changing the main image
- Ensure that you have actually attached variant images to your variants in the Shopify Admin. Swatches rely on Shopify's native variant image mapping to update the gallery.