How to Add Image Swatches to your Shopify Store?

This guide shows you 2 simple ways how to add image swatches in Shopify – no coding effort is required. Here’s a brief so you can choose a method to follow through:

1. Using the built-in feature in Shopify

• Pros: Fast, simple to implement
• Cons: No customization options. Not applicable for some old theme versions.

2. Using NS Color Swatch Variant Images app

• Pros: Highly customizable, simple to use
• Cons: Some advanced features require upgrading to paid plans

Method 1: Using Shopify’s Built-in Image Swatches

Step 1: Create your product

1. In your Shopify Admin, navigate to the Products section.

2. Click on Add Product.

3. Enter a product name and upload your product images.

4. Once done, click Save.

Step 2: Add Image Swatches using Category Metafields

1. Scroll down to find the Category Metafield section.

2. Click on Colors > Add new entry.

3. Give your swatch a label.

4. Upload an image swatch from your media gallery.

💡 Note: Even when using an image swatch, Shopify still requires you to choose a base color, make sure to select one and click Save.

You can repeat this process by clicking Add New Entry for additional image swatches.

Step 3: Link Metafields to product variants

1. Scroll back up to the Variants section.

2. Click Add Options.

3. When selecting Color as the option, Shopify will automatically pull values from your Category Metafields.

4. Click Save and you’re done.

Method 2: Use NS Color Swatch Variant Images

Step 1: Install NS Color Swatch Variant Images

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

2. Click Install to add it to your store.

3. Once installed, open your Shopify Admin, type the app name into the search bar, and click to launch it.

Step 2: Initial app setup

1. Follow the onboarding steps displayed in the app dashboard.

2. Go to App Embeds, switch the toggle on for NS Color Swatch Variant Images, and click Save to activate it.

Step 3: Configure product options

1. From the app menu, navigate to Option Configuration.

2. In the dropdown beside the search bar, select In My Store.

3. Enter the product name you want to configure.

4. When the product appears, choose the swatch style you’d like to use from the dropdown.

5. Click Edit Swatch to make adjustments.

6. Upload an image swatch directly from your computer for each color variation.

7. Click Done, then enable the toggle to show swatches on the product page.

8. Press Save to apply the updates.

Step 4: Personalize swatch design

1. Go to the Design Settings section in the menu.

2. Find the swatch style you’re working with and click Customize.

💡 Tip: Look for the “In use” tag to easily spot your active swatch style.

3. You can modify various design elements, including:

• Swatch size
• Background color
• Border color
• Hover effect
• Tooltip appearance
• Variant description text

💡 Tip: Use the Preview feature to see how each change looks in real-time.

3. After customizing, make sure to click Save.

4. Head to your online store and view your product pages to see the newly added image swatches in action.

✨ Want to save time and access advanced features?

If you manage a store with lots of products or numerous variants, you can streamline your workflow by upgrading to the Growth or Pro plan of NS Color Swatch Variant Images. These plans unlock powerful features like:

• Add image swatches on the collection page
• Automatic assignment of variant images to swatches
• Support for multiple variant images (displayed per variant)
• Option to group separate products as variants
• Quick view popups for faster product browsing
• Auto-translated variant labels for international stores

With these upgrades, you can scale your swatch setup efficiently while delivering a polished, user-friendly experience to shoppers.

FAQs

How to use variant images as swatches in Shopify?

In the Growth or Pro plan of NS Color Swatch Variant Images, you can have color swatches displayed automatically using your current variant images in Shopify. However, you can also do this manually with our thorough step-by-step guide above.

How can I make variant images change to the selected swatch?

You can do this by assigning specific variant images to each variant in NS Color Swatch Variant Images using the Variant Image feature.