How to Set Up Colour Swatches in Our Shopify Themes

Colour swatches allow your customers to visually select different colour variants of your product, making your store more interactive and enhancing the overall shopping experience.

✅ This feature is natively supported in our themes and requires no custom coding.

🛠️ Follow These Simple Steps to Enable Colour Swatches:

🧩 Step 1: Add Color Variants to Your Product
 1. Head over to your Shopify Admin.
 2. Go to Products and select the product you want to edit.
 3. Scroll down to Variants and click Add variant.
 4. Add a new Option name called Color.
 5. Fill in the Option values (e.g., Red, Blue, Forest Green).

👉 Make sure the color names are consistent and written exactly how you want them displayed on the storefront.

🎨 Step 2: Use Swatch Images or Product Images

Option A: Use Custom Color Swatch Icons
 1. Go to ColorHexa.
 2. In the search bar, type the hex code or name of the color you’re adding as a variant (e.g., #ff0000 for red).
 3. On the color page, right-click the color preview box and click “Save Image As…”
 4. Name the image in this exact format:

📌 Examples:
 • swatch-red.png
 • swatch-maroon-red.png
 • swatch-forest-green.png

Option B: Use Product Images for Each Color Variant

Instead of using a simple color dot, you can assign a full product image that represents the color. Shopify will use the variant image itself as the swatch preview.

👉 How to do it:
 • In your Product admin, click on a specific variant.
 • Upload or assign the corresponding product image (e.g., a lifestyle photo of the red shirt).
 • Shopify will use this image as the clickable swatch on the product page.

📤 Step 3: Upload Swatch Images (if using Option A)
 1. Go to your Shopify Admin Dashboard.
 2. Navigate to Content > Files.
 3. Click Upload files.
 4. Upload all your swatch images (swatch-red.png, swatch-blue.png, etc.).

📝 Make sure file names match the variant names exactly – all lowercase and hyphenated.

✅ That’s it!

Once you’ve completed these steps, our theme will automatically detect the swatch images (or product images) and display them as clickable color circles under the product options.

⸻

🧠 Pro Tip:

Test this feature by visiting your product page and hovering or clicking on the swatches to see the selection effect in action.

⸻