How to Set Up Colour Swatches in Our Shopify Themes
Why Use Color Swatches?
Color swatches enable customers to visually select product color variants, enhancing interactivity and improving the shopping experience with clickable colored circles or images instead of dropdown menus.
✅ Natively supported in our themes, no coding required.
🛠️ Steps to Enable Color Swatches
🧩 Step 1: Set Up Color Variants
-
Access Shopify Admin
Log into your Shopify dashboard. -
Select Product
Go to Products and choose the product to edit. -
Add Variants
In the Variants section, click Add variant. -
Create Color Option
Add an option named Color. -
Specify Color Values
Enter values like Red, Blue, or Forest Green.
⚠️ Rule: Color names must be consistent and match exactly how they should appear on the storefront.
🎨 Step 2: Select Swatch Type
Option A: Custom Color Swatch Icons
Use simple colored circles for precise color representation.
Color Swatch Generator
Generate correctly formatted swatch images directly here.
Preview
Swatch Generated Successfully!
📌 Naming Rule Examples:
- swatch-red.png
- swatch-forest-green.png
- swatch-navy-blue.png
⚠️ Rule: File names must be lowercase, hyphenated, and exactly match variant names.
Option B: Product Images as Swatches
Use product images to represent color variants, displayed as clickable swatches.
👉 Steps:
- Select a variant in Product admin.
- Upload or assign a product image (e.g., photo of a red shirt).
- Shopify uses this image as the swatch preview.
📤 Step 3: Upload Swatch Images (Option A)
-
Access Shopify Admin
Go to your dashboard. -
Go to Content → Files
Locate the file management section. -
Upload Files
Click Upload files. -
Upload Swatch Images
Add files like swatch-red.png.
⚠️ Rule: File names must exactly match variant names, using lowercase and hyphens.
✅ Done!
After completing these steps, our theme automatically displays swatch images or product images as clickable color circles on the product page.
🧠 Pro Tip: Test swatches on your product page by hovering or clicking to verify the selection effect.
Frequently Asked Questions
No, our Shopify themes natively support color swatches without any coding. Follow the steps above to set them up.
Yes, assign a product image to a variant, and Shopify will use it as the clickable swatch preview.
File names must exactly match variant names, in lowercase with hyphens (e.g., swatch-red.png). Use the generator tool for correct formatting.
Swatch images should be 50x50 pixels for optimal loading and display, as created by our generator.
Yes, our themes offer customization options for swatch size, borders, and hover effects in the theme settings.
If a swatch image is missing, the theme displays the variant name as text or uses the product image if available. Ensure file names match exactly.
