How to Add Shopify Color Swatches on Product Page? (2025)

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 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 3: Set up the app

1. Follow the onboarding instructions provided by the app.

2. Enable embed by toggling this button and Save.

Step 4: Configure product options

1. Navigate to Option Configuration in the app menu.

2. In the dropdown menu beside the search bar, select In my store.

3. Enter the product name to choose which options will display color swatches.

4. Choose a swatch style from the dropdown menu.

5. Click Edit swatch.

6. In the pop-up:

• Solid color swatch: Use the color picker or enter a color code.

• Image swatch: Upload an image from your computer.

7. Click Done and toggle on the button to display Shopify color swatches on Product page.

8. Click Save to apply changes.

Step 5: Customize swatch design

1. Go to Design Settings in the menu.
2. Click Customize to adjust the design of your swatches.

💡 Tip: Notice the “In use” status to find the swatch style you’re using.

5. Modify settings such as:

• Size
• Background color
• Border color
• Hover effect
• Tooltip display
• Variant description

💡 Tip: Everytime you make changes, you can check the Preview to see how they looks like.

6. Save your adjustments, and we’re done. You can go to your online store to view your new color 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

To unlock these features, you can upgrade to the Growth or Pro plan right in the app settings.

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.