How to Add Color Swatches to Products in Shopify (Step-by-Step)

Want to add color swatches to your Shopify products? Whether you're using the Dawn theme, Sense, or any free theme based on Dawn, this guide will show you how to do it the right way - for both product pages and collection pages. No need for expensive apps. No coding skills required.

What Are Shopify Color Swatches?

Color swatches let shoppers see and choose product colors by clicking on small color dots or images. This works better than using just text. It helps improve the customer experience and boosts conversions.

You can:

• Show color swatches on the product page

• Display color swatches on the collection page

• Use custom images for patterns or textures

• Sync images with each variant

How to add color swatches to Shopify Product Page

To display color swatches on your Shopify product pages, start by creating product variants using color as an option. Then, adjust your theme settings to show those variants as swatches instead of a dropdown. You can customize the shape (circle or square) and even upload custom swatch images for a more branded look.

Follow the step-by-step guide below to add color swatches to your Shopify product page.

Step 1: Add a Category to Your Product

To unlock the color swatch feature in Shopify, your product must be assigned to a category.

1. Go to Products in your Shopify admin.

2. Choose the product you want to edit.

3. Under the product title, select a category (e.g., Tank Tops or T-Shirts).

4. Save your changes.

   

Once you assign a category, Shopify adds meta fields like color, size, and fabric.

Step 2: Set the Color Meta Fields

After assigning the category:

1. Scroll down to the meta fields section.

2. You’ll see a list of detected values (e.g., blue, white, black).

3. Confirm or edit the color names.

4. If you use patterns (like “stripes”), click Edit, change the name, and upload an image instead of using a color.

5. Click Done and Save.

You can add as many color variants as needed, and even replace solid colors with custom images.

Step 3: Link Color Meta Fields to Product Variants

Just adding meta fields is not enough. You must connect them to the color options.

Here’s how:

1. On the product page, go to the Color option.

2. Click the three dots, then select Connect meta field.

3. Choose the color meta field you just edited.

4. Save your changes.

Now, your variant buttons will show as swatches instead of text.

Step 4: Add Images to Each Variant

To make sure the correct image appears when a swatch is clicked:

1. Open your product.

2. Click Variants.

3. For each variant, click Add image.

   

4. Upload the matching image.

   

5. Repeat for all color variants.

Now, when customers select a swatch, the main product image updates.

How To Add Color Swatches to Shopify Collection Pages

To add color swatches to your Shopify collection pages, you’ll need a small code update or use a third-party app that supports it. This allows shoppers to see available color options directly from the collection view, improving the browsing experience. You can customize the swatch style and even upload custom images for each color variant.

To show Shopify color swatches on collection pages, I developed a custom code snippet that you just need to copy and paste.

Here’s what to do:

1. Get the swatch code snippet from the here.

2. Unzip the folder.

3. Copy the provided CSS and JavaScript files into your Shopify theme:

   • Go to Online Store > Themes > Edit Code

   • Under Assets, click Add a new file

   • Create one CSS file and one JS file using the names from the tutorial

   • Paste the provided code into each file and save

4. Replace the product-grid section in your theme with the provided code from the tutorial

   

Once added, your color swatches will show on the collection page cards too.

Optional: Customize Your Swatches

Inside the code, you can:

• Change swatch shape: circle or square

• Change swatch size

• Use pattern images instead of solid colors

• Hide the swatch section entirely

Final Result

Once everything is set:

• Your product pages show clickable color swatches

• The product image updates when a swatch is clicked

• Your collection pages show mini swatches for each variant

• You can use colors, patterns, or custom images

Why Use Shopify Color Swatches?

Adding color swatches helps users:

• Understand your product options faster

• See visual differences right away

• Make faster purchase decisions

It also improves your SEO when paired with Shopify product categories and variant images.

Frequently Asked Questions

How do I create color swatches in Shopify?

Use Shopify’s built-in meta fields after assigning a product category. Then, connect those meta fields to your color variants. Check out this step by step video tutorial.

Can I add Shopify color swatches on the product page?

Yes. Once meta fields are connected, swatches appear on the product page instead of text labels.

Can I show swatches on the collection page?

Yes, by adding a small code snippet that you can get here, you can show swatches under each product card.

Does this work on the free Dawn theme?

Yes, and any theme based on Dawn.

Ready to Add Color Swatches?

Now you know how to:

• Add color swatches to Shopify products

• Show swatches on product and collection pages

• Use custom images for patterns

• Boost your store’s look and usability

Follow the tutorial, and your store will feel more modern and easier to shop. You can find the video version tutorial of how to add color swatches here:

Want to boost conversions too? Read my article on creating high-converting Shopify product pages.