How to Change Image Based on Variants in Shopify 

Ever selected a color or size on a Shopify product page… only to realize the image didn’t change? That’s not a great experience – not for you, and definitely not for your customer.

This guide will provide you with two methods to change images based on variants in Shopify:

• Shopify’s Built-in Method: A quick solution for image switching on Online Store 2.0 themes.
• Using a Third-Party App (NS Color Swatch Variant Images): For more advanced features, including multiple images per variant, swatches on product and collection pages, and custom swatch styles.

By following these steps, you can enhance your store’s product presentation, improve the shopping experience, and give your customers a clearer view of their options.

So, without any further ado, let’s dive in.

Method 1: The built-in Shopify method (Works with most themes)

If you’re using a Shopify Online Store 2.0 theme (like Dawn), the good news – Shopify supports image switching by variant right out of the box.

🔍 How to set it up:

1. Go to your Shopify Admin.

2. Navigate to Products

3. Click the product you want to edit.

4. Scroll down to the Variants section and click into each variant (e.g., “Blue”, “Large”, etc.).

5. Upload a specific image for that variant.

6. Save your changes.

If your theme supports it, the product image will now update automatically when a customer selects a different variant on your storefront.

Method 2: Using a 3rd-party app – Customize your variants with more twists

Shopify’s default image-switching is helpful, but sometimes you want to take things a step further – like showing variant images on collection pages, styling your swatches, or displaying multiple images per variant.

That’s where using a third-party app can make a real difference. In this tutorial, I’ll be using NS Color Swatch Variant Images. This app is designed specifically for Shopify merchants who want more control and customization over how variants appear across their store. You can:

• Display variant images as color/image/text swatches
• Show variant swatches on products, collections, and even quick view popups
• Assign multiple images to a single variant (e.g., front, back, side views)
• Customize the appearance of swatches to better match your store’s branding

🔍 How to set it up:

Step 1: Set up NS Color Swatch Variant Image app for Shopify

1. Search for NS Color Swatch Variant Images on the Shopify App Store and click Add app.

2. Once installed, open the app from your Shopify admin and follow the quick Get Started instructions.

3. Click on Embed App to enable the integration.

4. You’ll be redirected to the Shopify theme editor. Here, just toggle ON the switch next to the app name and click Save.

Step 2: Assign specific variant images to each variant

Now, let’s dive into the exciting part, setting it up so each variant displays its unique images..

⚠️ If this feature isn’t available with your current theme, feel free to reach out through the live chat in the bottom right corner.

1. Open the app and navigate to the Variant Images tab in the menu.
2. Click on “Add Product” to begin assigning images to each variant.

3. Choose the product or product group you’d like to configure. Then, click Save.

4. Click Edit on the variant.

5. Select the images you’d like to show when customers click on that variant.

6. Click Save to publish your changes.

Whether you’re selling apparel, accessories, or beauty products, helping customers see exactly what they’re getting can make a huge difference.

Video tutorial by NestScale – Show Only Relevant Variant Images on Shopify in 3 Minutes

Welcome to this quick 3-minute tutorial by NestScale! In this video, we’ll show you how to display only the relevant variant images for your products on Shopify, making your store more user-friendly and visually appealing. Let’s dive in!

FAQs

Q: How do I change the description based on the variant selected in Shopify?

A: By default, Shopify doesn’t support changing product descriptions dynamically based on variant selection. However, you can achieve this in two ways:

• App-based method: Use apps that let you display different content for each variant.
• Custom code (advanced): You can use JavaScript to detect the selected variant and then change the description dynamically. This requires editing your theme files, so it’s best done by a developer.

Q: How do I hide variants on Shopify?

A: To hide a variant in Shopify:

• Temporarily: Set the variant’s inventory to 0 and uncheck “Continue selling when out of stock.” This will prevent customers from selecting it.
• Permanently: If you no longer want to offer a variant, go to the Variants section of your product and delete it. Alternatively, use apps that can help you with this if you want to conditionally hide variants based on user tags, location, or other logic.

Q: How do I change product pictures in Shopify?

A: To update or change product images:

1. Go to your Shopify Admin > Products
2. Click the product you want to edit.
3. In the Media section at the top, you can:
   • Upload a new image
   • Reorder images using drag-and-drop
   • Delete old images by clicking the trash icon
4. Click Save when you’re done.

If you’ve assigned images to specific variants, make sure to update those in the Variants section as well.