Shopify Development 
This guide walks you through the process how to add multiple variant images in Shopify for each product variant using the NS Color Swatch Variant Images app. You’ll learn how to install the app, enable its features, and assign specific images to each variant. Thus, your customers can view only the relevant images based on their selected options.
❓ Why choosing an app? While it’s possible to achieve this manually with custom code, using an app is preferable to save time, avoid theme code edits that can break during updates, and offer easier long-term maintenance. Plus, with built-in support from the app’s development team, it’s a reliable solution for store owners who want more control over their product display without the hassle of coding.
Let’s get started!
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, then click Open to launch the app in your Shopify Admin.
3. Complete the onboarding process as guided in the app.
4. Head to App Embeds, toggle the switch to enable NS Color Swatch Variant Images, and click Save.
Step 2: Automatically assign variant images based on media order
This method lets the app automatically show only the relevant images for the selected variant, as long as your product images are arranged in the correct order in Shopify Admin.
Group and reorder images in the Media section
1. In your Shopify Admin, go to Products.
2. Click on the product you want to set up.
⚠️ Make sure you set a main variant image for each variant in the Variant section. This main variant image will be the first image in each group when we reorder the media in the next step.
Now you’ll tell the app how to show the relevant images just by ordering them in the Media area.
3. Drag and drop the images to arrange them in groups by color/variant.
4. Double-check that:
- Each variant’s main image appears first in its group.
- Images for different variants are not mixed together.
5. Save the changes.
6. Repeat these steps for other products.
Enable auto-assignment for variant images in the app
1. Go to NS Color Swatch Variant Images app > Variant Image.
2. Click Theme Setting > Add the theme you’re using and Enable auto-assignment > Confirm.
For example, I’m using Horizon, so I’ll add this theme.
*Please contact support through the live chat if your theme is unavailable here. We’ll support instantly.*
3. Now you can go to your store to confirm if the variant images are properly assigned for their associated variants.
📝 Even after enabling auto-assignment, you still have full control to customize variant images manually if you want to fine-tune things. Simply add the product inside the app and edit each variant one by one. This is helpful when you want certain images to appear (or not appear) for a specific variant.
So let’s move on, we’ll explore this method in the following part.
Step 3: Assign images to each variant manually
This method is suitable if you have a small number of products in your store, as you need to manually choose images to show for each variant of your product.
1. In the Variant Image settings, click Add Product.
📝 Note: You can select and customize one product at a time, so repeat the process individually for each product where you want to manage variant images.
2. From the list of variants under the selected product, click the pencil (edit) icon next to a specific variant to start assigning images.
3. Choose the relevant images from the product’s image gallery that should be displayed for that variant only.
4. Click Save to confirm.
Repeat these steps for each variant within the product to ensure every one displays only its appropriate images.
Once you’ve finished configuring, visit your online store to see the updated variant image display.
FAQs
How can images change based on the selected variant in Shopify?
By default, Shopify doesn’t hide or update images dynamically when a variant is selected. With a variant image app like NS Color Swatch Variant Images, you can assign specific images to each variant. The app automatically updates the image gallery based on the selected variant, giving your customers a cleaner and more intuitive shopping experience.
How do I hide variant images on Shopify?
To hide images for variants that are not selected, you’ll need a third-party app like NS Color Swatch Variant Images. It automatically hides unrelated variant images and shows only the ones tied to the customer’s current selection, keeping your product gallery tidy.
How to use variant images as swatches in Shopify?
NS Color Swatch Variant Images supports you to turn each variant image into a clickable swatch. When a customer clicks the swatch, the app updates both the selected variant and the displayed images, helping you replace dropdowns with visual, user-friendly variant selectors.
How to add the image slider for my variant image gallery?
You can add a fully customizable product image slider right in the NS Color Swatch Variant Images app. The Image Slider settings enable you to:
- Enable the product image slider
- Choose your slider style
- Add zoom effects
- Optimize the mobile experience
