How to Add Shopify Color Swatches on Product Page?

In this guide, we’ll walk you through how to add Shopify color swatches on Product page. Here are 2 methods we’re going to talk about and what you should consider when choosing the one to follow:

Method	Preferable for	Customization Level	Setup Time
1. Built-in Color Swatches	Shopify stores using Dawn theme 13.0+ or latest version of Free themes	Limited (basic swatch buttons)	Quick (Basic setup)
2. NS Color Swatch Variant Images App	Works with all Shopify themes & versions	High (custom swatch styles, swatches on collection, automated variant image swatches)	Fast (~2 mins)

Method 1: Use Shopify built-in color swatches

In this tutorial, we’ll show you how to add color swatches using the latest Shopify features. We’ll create a new product and apply color swatches step by step.

Step 1: Setting up the product

1. Open Shopify Admin and go to Products.

2. Click on Add Product.

3. Name your product and upload new product images.

4. Save the product.

Step 2: Using Category Metafields for Colors

1. Scroll down and locate the Category Meta Field section.

2. Click on Colors – this will show available options.

3. Select the colors of your product variants.

4. Click Save.

You can also custom color swatch with color picker or image swatch:

1. Click Add new entry.

2. Label the custom color.

3. 2 options you have to custom your color.

A. Select a color from the color picker.

B. Upload an image swatch.

💡 Tip: Shopify requires a base color even when using an image swatch. So make sure to select a color as the base and save.

Step 3: Connecting Metafields to Variants

1. Scroll back to the Variants section.

2. Click on Add Options.

3. Shopify will automatically pull variant colors from the Category Metafields when you choose Color.

4. Click Save and you’re done.

Step 4: Previewing the color swatches

1. Click Preview product.

2. You will see the color swatches appearing on the product page.

Checking Meta Objects

1. Go to Content > Meta Objects in Shopify Admin.

• You’ll see the Category Metafield, where colors are stored.

• You can add or edit custom colors here.

If this method doesn’t work or you find it time-consuming to apply for all products in your store, no worries, you can try the second method.

Method 2: Use NS Color Swatch Variant Images app

Step 1: Install NS Color Swatch Variant Images

1. Go to the Shopify App Store and search for NS Color Swatch Variant Images.

2. Click Install to add the app to your Shopify store.

3. In your Shopify Admin, use the search bar to find the app.

4. Click on the app to open it.

Step 2: Set up the app

1. Follow the onboarding instructions provided by the app.

2. Enable embed by toggling this button and Save.

Step 3: Display color swatches on Product pages

Now that the app is installed and running, let’s decide how your swatches will appear on both product pages.

1. From the app’s main instructions page, you can either click Choose Swatch Style or jump straight into Option Configuration from the left-hand menu.

📝 The app automatically syncs the most recent 100 products that already have options.

If you can’t find the one you’re looking for, click Add Product Options to manually pull it in.

2. A product list will pop up, simply tick the boxes for the items you want swatches on, then hit Done.

You can select multiple products at once.

3. Find the option you want to convert into swatches and toggle Display Style on Product Page to ON.

✨ If you also want swatches to appear on collection pages, switch on the second toggle. Yet, this is a premium feature, so you’ll need to upgrade from the Free plan to use it.

4. Below the toggles, you’ll see a dropdown with shape options like square, circle, or pill, plus a live preview of each.

For this guide, I’m going with the Circular swatch for a clean, rounded look.

5. You have two choices to display the swatches:

• Option 1: Use Shopify variant images (if your variants already have images uploaded).
• Option 2: Use Color/Custom images – pick a color from the color picker, enter a HEX code, or upload your own image.

6. If you pick the Color/Custom image option, click Edit Swatch.

7. In the pop-up window, set the color or upload an image for each variant. Double-check that each swatch is linked to the correct variant name.

8. Click Done, then Save. And your swatches are now live on your store.

But we’re not stopping here. Let’s make them match your store’s style perfectly.

Step 4: Customize your color swatches design

1. In the app’s sidebar, click Design Settings.

2. Find the swatch style you chose earlier (look for the “In Use” label) and click Customize.

Since I picked Circular Swatch, I’ll be editing that one.

3. There are five sections you can tweak:

• General Settings: Size, spacing, border thickness.

• Image Settings: Zoom level and position on hover.
• Selected Swatch: Border color and thickness for the selected option.

• Unselected Swatch: How unselected swatches look.

• Hover Swatch: Show variant names, shadows, tooltips, or zoom effects.

💡 Use the Preview panel to see changes instantly before saving.

4. When you’re happy with the look, click Save.

Then head to your storefront and check the new swatches ✨

✨ NS Color Swatch Variant Images also offers many must-have features for your store:

• Color swatches on the collection pages
• Automated variant image swatches
• Multiple variant images (Display images to specific variants)
• Separate products as variants (Keep individual URLs for SEO)
• Quick view product details

FAQs

How to add Shopify color swatches on the collection page?

To add Shopify color swatches on the collection page, you need to upgrade to the Growth or Pro plan of NS Color Swatch Variant Images. Then, just toggle the buttons in the app settings, and you’re all set.

It’s possible to use custom code to add color swatches on collection/ category pages. Yet, if you don’t have a strong technical background, the coding process may be challenging as you’re likely to make errors.

How to add color swatches in the Prestige theme on Shopify?

1. Go to Shopify Admin > Online Store > Themes.
2. Click Customize on the Prestige theme.
3. Navigate to the Default Product template.
4. Look for the Variant picker settings under the Product page section.
5. In Color selector type dropdown menu, select Color swatch.