Shopify multiple images per variant: show only the selected color's photos

To show several photos per color on a Shopify product page, assign each photo to a color with an app, because Shopify itself ties only one variant image to each variant. Iromi Color Variant Images, which we made at GRAMSHIFT, does this inside your theme's own gallery and is free for 3 products. When a shopper picks Navy, the gallery shows only the Navy photos, plus shared photos such as a size chart.

What changes on your store

The three ways, and what goes wrong with each

1. Turn on your theme's setting that hides other variants' media

Some themes, such as Dawn, can hide the images attached to other variants once a shopper picks one.

• Only each color's one variant image is linked to it. Back, close-up and on-model photos are not attached to a variant, so they still show for every color.
• Not every theme has the setting, and you cannot choose which photos are shared.

2. Edit the theme code

A developer tags each photo's alt text with its color and adds code that hides the other colors' photos.

• Theme updates overwrite it. When you update or switch themes, the code is gone or conflicts with the new version.
• Every photo needs its tag by hand, and new photos or a CSV re-import need tagging again.
• The slider and thumbnails have to be handled too. Hiding photos from outside the gallery's own code can leave empty slides or thumbnails of other colors.

3. Use an app

The product stays one product, and the app decides which photos show for each color. Apps differ in the details, so check these before you install one:

• Does it use your theme's own gallery, or replace it with a slider of its own?
• Does it edit your theme files, or work through an app embed you can switch off?
• Can each color have several photos, plus shared photos such as a size chart?
• Can it assign the photos for you, and for many products at once?

How Iromi Color Variant Images handles those

• Your theme's own gallery. Your layout, slider and zoom stay as they are, and the dots, thumbnails and photo counter follow the photos that are left. Size and color pickers work as before.
• No theme code edits. Switch the app embed off, or uninstall the app, and the product page shows all photos again.
• Change any photo by hand. Click Assign images next to a color, or move a photo from the menu under it.
• A color with no photos yet shows all photos, so the gallery is never empty.
• Translated stores work. A translated color name still shows the right photos.

How to set it up

1. Install Iromi Color Variant Images from the Shopify App Store.
2. In the app, click Enable app embed. The theme editor opens with the app embed switched on. Click Save.
3. In the app's Products list, open a product and click Auto assign. Check each color's photos, then click Save.
4. Open the product in your store and pick a color: only that color's photos and the shared photos stay in the gallery.

Putting the color name in each photo's alt text or file name (for example tote-forest-back.jpg) helps Auto assign place it. The Free plan covers 3 products, with Auto assign. Pro is $9.99 per month or $99.90 per year with a 7-day free trial and adds unlimited products and Bulk auto assign. Billing is on your Shopify invoice, so uninstalling the app ends the charge. Full steps and FAQ: Iromi Color Variant Images guide.

Limits to know

• If you leave Pro, your first 3 products stay on and the others are paused, not deleted.
• It works on product pages, in the main product gallery. Collection pages and product cards are not changed; for those, see how to show a card per color on collection pages.
• It was tested on Dawn and on Horizon, Shopify's current default theme. Themes with a very different gallery may not be picked up, so email us before you rely on it.
• Shopify treats photos you replace or import again as new photos. The app marks those products Needs attention, and Auto assign places the new photos again.

Questions, or a theme where the photos do not hide: email contact@gramshift.com (English or Japanese).

Frequently asked questions

How do I add multiple images to one variant in Shopify?

Shopify gives each variant one variant image. With Iromi Color Variant Images you assign as many product photos as you like to each color, for example front, back, close-up and on-model, and the gallery shows that set when the color is picked.

How do I show only the selected color's images on Shopify?

Install Iromi Color Variant Images, click Enable app embed and save the theme editor, then open a product in the app, click Auto assign and Save. When a shopper picks a color, the gallery shows only that color's photos and the shared photos, such as a size chart.

My theme can already hide other variants' media. Why would I need an app?

That theme setting works with the one variant image each variant has, so every other photo still shows for every color. An app lets each color keep its own set of several photos, and keeps shared photos for every color.

Does it edit my theme code?

No. The app works through an app embed in the theme editor and does not change your theme files. Switch the embed off, or uninstall the app, and your product pages show all photos again.

Is it free?

The Free plan covers color photos on 3 products, with Auto assign. Pro is $9.99 per month or $99.90 per year with a 7-day free trial and adds unlimited products and Bulk auto assign.