Product swatches make it easier for customers to understand variant options at a glance. You can customize swatches using specific colors or cropped images that represent each variant’s color, pattern, or texture.
Product swatches make it easier for customers to understand variant options at a glance. You can customize swatches using specific colors or cropped images that represent each variant’s color, pattern, or texture.
Step 1: Create the Swatch Image
PNG format only, lowercase extension (
.png)Image size is 50 × 50 px or larger
File names are lowercase with hyphens (no spaces or accents)
- Files uploaded to the correct location for your theme
- Swatches are enabled in theme settings
- Replace spaces and special characters with hyphens
Name the file after the exact color option
Examples:
black.pngdark-blue.pngblue-gray.pngmacaw-blue.pngfreddie-s-fusion.png
If different products use the same color name but need different swatches (e.g. two different “Blue” shades), rename the variants:
Royal Blue / Navy Blue
Blue Leather / Metallic Blue / Blue Cotton
This prevents the theme from linking multiple variants to the same image.
Step 2: Upload the Swatch Files
Upload images via Shopify Admin → Content → Files
If your product option isn’t named “Color” or “Colour” (for non-English stores), you may need a small edit in:
• product-swatch.liquid
• collection-swatch.liquid
(Online Store → Themes → Actions → Edit code → Snippets)
Once everything is set up correctly, your product swatches will display cleanly and consistently across your store.
Need Help?
If you have any questions about our pricing plans or need assistance in selecting the right plan for your store, please contact our support team.
📩 Contact Support: Reach out to us via live chat or send an email to [email protected].