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.

Therefore, in this tutorial, I’ll walk you through how to change image based on variant in Shopify, from the simplest built-in method to app solutions.

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

Method	Description	Best For	Setup Complexity
Shopify Built-in Image Switching	Use Shopify’s default feature to assign variant-specific images via the product editor.	Merchants using Online Store 2.0 themes	⭐ Easy
App-Based Customization (e.g., NS Color Swatch Variant Images)	Use a third-party app to gain more control over how variant images are displayed across product, collection, and quick view pages.	Merchants needing more design flexibility	⭐⭐ Easy

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.

✅ Best for: Stores using Dawn or other Shopify 2.0-compatible themes

✅ Pros: Built-in, fast, and requires no extra tools or coding

❌ Limitations: Limited design flexibility and doesn’t always work well on collection pages or with custom layouts

🔍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

✅ Best for: Merchants who want a richer, more intuitive variant browsing experience

✅ Pros: No coding needed, easy to set up, and more versatile

❌ Limitations: Requires installing an app

🔍How to set it up:

1. Install NS Color Swatch Variant Image app from the Shopify App Store.

2. Click on the Variant Images tab inside the app.

3. Choose the product or product group you’d like to configure.

4. Click Edit on the variant.

5. Select the image(s) you’d like to show when customers click on that variant.

5. 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.

Bonus Tip: Assigning multiple images to one variant

The previous method can let you assign the right picture. Let’s say your “Black Hoodie” has a front view, a back view, and a close-up of the fabric. You don’t want to show just one image – you want all three, but only when the customer selects the “Black” variant.

This detail often gets overlooked, but it can greatly improve product clarity and help customers make confident decisions.

✅ Best for: Visual-heavy products like fashion, beauty, or home décor

✅ Why it works: It gives customers all the visual context they need, without overwhelming them with unrelated content

🔍How to set it up:

1. Follow steps 1 – 4 from the setup above.

2. Instead of choosing just one image, select multiple images from your product gallery.

3. Click Save once you’ve selected all relevant images for that variant.

Now, when a customer clicks on “Black,” they’ll see only the images related to that variant – not all the images for the entire product. This creates a guided and personalized browsing experience.

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.