When a shopper taps "Forest Green", the product photos should show the forest green item. It sounds obvious, yet a gallery stuck on the default red photo is one of the most common problems we see on product pages. Shopify handles the simple version natively: one image per variant that the gallery jumps to. Showing a full set of photos per color takes either a theme setting or a little custom work.
Native single-image swap
Every variant can have one assigned image. When the customer picks that variant, Online Store 2.0 themes such as Dawn move the gallery to that image. No code is needed.
This works well when you have one hero shot per color and a few shared lifestyle photos. It falls short when you have five photos of each color, because the gallery jumps to the first green photo but still shows the red and blue photos around it.
Setup
- Upload all product images to the product's Media section. Order them by color so each color's photos sit together.
- Click a variant (or use Edit variants in bulk) and choose its image from the uploaded media.
- Repeat for each variant. For a product with Color and Size, assign the same image to every size of a color.
- Add alt text to each image that names the color, such as "Forest green crewneck sweatshirt, front".
- Preview the product page, click through every color and confirm the gallery follows.
Assigning images across many products by hand is slow. A product CSV can set each variant's image in one import; our CSV import guide for variants shows the columns to fill.
Multi-image per variant (metafield)
To show only the selected color's photos, you have three options, from easiest to hardest:
- Theme setting. Dawn and several other themes have an option in the product section to hide other variants' media after a variant is selected. Check the theme editor first; it may already be there.
- Theme with built-in variant galleries. Some paid themes group media by variant using image alt text or ordering. Read the theme's documentation for the naming convention.
- Metafield and custom code. Create a variant metafield that holds a list of images, fill it for each color, and have the theme show only the selected variant's list. A developer can set this up; after that, adding a new color is just filling in the metafield.
Swatches and gallery images together
Color swatches and gallery images should agree. If a swatch shows a bright green but the photo is a darker green, shoppers notice. Many stores use a cropped product photo as the swatch itself, so the chip matches exactly; see our guide to image swatch setup.
For personalized products, the gallery is only half the story. A customer adding a name to a mug wants to see their name on the mug in the chosen color. PIMW Product Personalizer draws the customer's text on the product image as they type, and you can set it up so the preview uses the right image for the chosen color. Our walkthrough on adding live product previews shows how.
Performance
More images per product means more to download. Keep the gallery fast:
- Upload images around 2,000 px on the long side. Shopify serves resized versions automatically, but huge originals still slow the admin and some themes.
- Let the first image load right away and lazy-load the rest. Most modern themes do this by default.
- Don't put 60 photos on one product. Ten to fifteen well-chosen images usually cover every color.
Mobile
On phones, the gallery is usually a swipeable slider above the options. When the customer taps a color below, the slider should jump to that color's first image so they can see the change without scrolling back up. Test this on a real phone, not just a narrow browser window. Our mobile variant picker guide covers the option buttons themselves.
Common mistakes
- Assigning an image to the Small variant of a color but not to the other sizes, so the gallery only switches for one size.
- Uploading images in random order, so a color's photos are scattered across the gallery.
- Using lifestyle photos with mixed colors as a variant image.
- Forgetting alt text, which helps both accessibility and image search.
Frequently asked questions
How to show variant images in product gallery?
Upload the photos to the product's media, then assign an image to each variant. Online Store 2.0 themes like Dawn move the gallery to that image when the variant is selected.
Can each variant have multiple gallery images?
Shopify assigns one image per variant natively. To show a full set per color, use a theme setting that hides other variants' media, a theme with variant galleries, or a variant metafield plus custom code.
How to auto-swap gallery on variant selection?
Assign an image to every variant and most modern themes do it automatically. Older or custom themes may need code changes.
Does gallery swap affect page speed?
Very little, as long as only the first image loads right away and the rest are lazy-loaded. Keep the image count reasonable and avoid oversized uploads.
How to bulk assign variant images?
Use a product CSV, where the Variant Image column sets each variant's image. For large catalogs or regular updates, a script using the Shopify Admin API also works.
Should gallery zoom work on variant images?
Yes. Zoom and lightbox features apply to whichever image is showing, so variant images behave like any other product photo.
Mobile gallery UX for variants?
Use a swipeable gallery that jumps to the chosen color's first image when a swatch is tapped. Test it on a real phone.
Best app for advanced variant gallery?
Check your theme's settings first, since many already support per-variant galleries. If yours doesn't, a dedicated variant image app or a small custom build fills the gap.
Related reading
Sources & further reading
Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.
- Shopify Help Center: Product variants
- Shopify.dev: Product variant limits
- Shopify Help Center: Line item properties (customization)
Try it free on Shopify
PIMW Product Personalizer's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install PIMW Product Personalizer