How to show multiple images per variant on Shopify without an app (2026)

July 9, 2026
Variant Images
14 min read
a Shopify product image gallery filtering down to show only one color's photos, with a small settings gear and a metafield tag icon, representing a manual no-app setup

Setting up Shopify variant images without an app is completely doable, and for a small catalog it might even be the smart move. Native Shopify lets you attach one image per variant. That is it. Pick red in the swatch, the gallery jumps to the red photo, and every other shot stays visible below it. For a lot of stores that is fine. But say you sell a shirt in 6 colors and each color needs a front, a back, a detail, and an on-model shot. Suddenly one image per variant is not close to enough.

So people go looking for a way to assign multiple images to a variant using nothing but the tools Shopify already ships. Good news: there are three real methods, and none of them cost a cent. Bad news: two of them need theme code, all three break on a theme switch, and none of them scale past a handful of products without turning your afternoon into a debugging session.

This guide walks through each DIY method honestly. What it does, where it works, and the exact spot where it falls apart. Then, only after you have seen the real work involved, we will talk about when reaching for an app actually saves you money instead of costing it.

In this post

The one-image-per-variant limit (and what you actually want)

Native Shopify gives every variant a single “featured” image slot. You see it in the product editor: click a variant, pick an image from the product’s media, done. When a shopper selects that variant, the theme scrolls the gallery to that one photo. Everything else in the media library still sits there, mixed together, no matter which color is selected.

What most merchants actually want is two things at once. First, multiple variant images: a full set of shots per color, not one. Second, filtering, so the gallery shows only the selected variant’s media and hides the rest. Shopify does the first badly (one slot) and the second not at all. That gap is the entire reason this question gets asked a hundred times a week.

Before you touch any code, get your numbers straight. How many variants, how many images each, does it blow past Shopify’s ceiling? Shopify caps you at 250 media per product and up to 2,048 variants per product (that upper number only with Combined Listings). Run your catalog through our variant calculator first so you know whether you are solving a real problem or one photo away from being fine. And if your media library is a mess of mystery filenames, the image audit tool will flag what is actually attached where.

Here is a short video walking through the difference between the native behavior and true per-variant filtering, so the rest of this makes sense visually.

Method 1: native variant metafields (multiple images per variant)

This is the cleanest no-app method, and it is the one I would reach for if I only had a couple of products. The idea: create a metafield on the variant that holds a list of images, upload the right shots to each variant, then edit the theme so the gallery reads from that metafield instead of the default media order.

Step by step:

  1. Go to Settings, then Custom data, then Variants. Click “Add definition”.
  2. Name it something like “Gallery”. For the type, choose File, and turn on the “list of values” option so it becomes list.file_reference. That lets one variant hold several images.
  3. Save the definition. Now open any product, click a variant, and you will see the new metafield near the bottom. Upload the images for that specific variant into it.
  4. Repeat for every variant. Yes, every one. (This is the part that gets old fast.)
  5. Edit the theme. In the code editor, open the product media section (in Dawn-style themes this is around main-product.liquid or the media snippet). Add Liquid that reads variant.metafields.custom.gallery.value and renders those images, then a bit of JavaScript that swaps the shown set when the variant selector changes.

Does it work? Yes. The data lives in metafields, which is genuinely the right place for it, and it survives most content edits. The catch is step 5. Reading a metafield list is easy Liquid. Wiring the gallery to re-render on variant change, keeping thumbnails in sync, handling the case where a variant has no images, making it play nice with your theme’s zoom or slider, that is where a “quick edit” becomes a weekend. If you have never touched a theme’s media logic, budget real time for it.

Method 2: the alt-text grouping trick

No metafields here. This trick reuses a field Shopify already gives every image: the alt text. You tag each image with its variant option (say, “Red” or “Navy”) in the alt text, then write Liquid that shows only the images whose alt text matches the selected variant. It is a way to show only selected variant images without adding a single new field to your store.

The rough shape of it:

  • Give every product image alt text that starts with the color name, for example “Red front”, “Red back”, “Navy detail”.
  • In the product-media Liquid, loop over product.media and compare each image’s alt text against the selected variant’s option value.
  • Add a class that hides non-matching images, and JavaScript that re-runs the match when the shopper switches variant.

Two problems, and they are not small. First, alt text is your accessibility and SEO field. Stuffing it with “Red” so your filter works means screen readers and Google read “Red” instead of a proper description, which is a real trade-off (more on getting alt text right in our product image SEO guide). Second, it is fragile: rename a color, upload an image with a typo in the alt, and the filter silently drops photos. If you go this route, the bulk image renamer at least keeps your naming consistent so the matching does not fall apart on you.

Method 3: editing your theme’s Liquid gallery

Method 3 is really the engine under Methods 1 and 2. Whichever way you store the mapping (metafields or alt text), something in the theme has to actually filter the gallery. That something is Liquid, and if you want full control you edit it directly.

In a Dawn-descended theme you are looking at the media rendering block inside the main product section. You add logic that groups images by variant, outputs them into the gallery, and then hands off to JavaScript to show the correct group on load and on every variant change. If your store uses a page builder instead of a stock theme, the gallery markup lives somewhere else entirely, and the edit looks different for each one.

Honest opinion: this is the most powerful option and the one most likely to bite you. Themes update. The moment you accept a theme update or switch themes, your custom gallery code does not come along. It stays in the old theme version. Your carefully built per-variant filtering just… disappears from the live site, and half the time nobody notices until a shopper does. Before and after any change like this, run the page through our product page grader so you catch a broken gallery before your customers do.

Where Shopify variant images without an app break down

All three no-app methods share the same three cracks. Worth naming them plainly, because they are the reason most stores that start DIY eventually stop.

ProblemWhy it happensWho it hits hardest
Does not scaleUploading and mapping images by hand is per-variant, per-product manual workCatalogs past ~10 products or high variant counts
Breaks on theme changeCustom Liquid lives in one theme version and does not migrate on update or switchAnyone who ever updates or redesigns their theme
Fragile matchingA renamed color or a typo silently drops images from the filterStores that edit products often

Notice a pattern? Every crack is a maintenance cost, not a build cost. The build is a one-time afternoon. The maintenance is forever. Why does Shopify still cap you at one image per variant natively in 2026 and push the rest onto merchants? Genuinely no idea. It is the single most requested product-page behavior and it is still a code project. That is frustrating, and pretending otherwise would be dishonest.

The DIY route is right for a specific store: few products, one stable theme you never touch, and someone comfortable in Liquid. If that is you, go build it, and skip the rest of this post. If it is not, keep reading.

When an app is the right call

An app earns its keep the moment maintenance outweighs the one-time build. We built Rubik Variant Images and Swatch to do exactly what the three methods above do, minus the code and minus the breakage. Full disclosure: it is our app. It is rated 5.0 across 400 reviews and is Built for Shopify certified, and here is the honest pitch for when it beats DIY.

Show only the selected variant images on a Shopify product page

What it does that the DIY route makes hard:

  • Assign multiple images (and videos and 3D models) to each variant, then filter the product-page gallery so only the selected variant’s media shows.
  • Three ways to assign: manual drag-and-drop; AI auto-assign, which works one product at a time and reads the product’s data (product and variant names, image filenames, and image alt text) to match images to variants; and bulk assign, which groups by the Shopify gallery order and featured-image boundaries and runs in the background across hundreds of products with no AI.
  • Render swatches on the product page (image swatches, color swatches, or pill and button styles), plus optional product-card swatches on collection and search pages for a single product’s own variants.
  • Stores its data in metafields, so your setup survives theme updates and theme switches instead of vanishing with the old theme.

That last point is the real difference. It uses metafield-based loading with no external API calls, so the media loads with the page itself, and because the data is not baked into one theme’s Liquid, switching themes does not wipe your work. It also runs isolated from your theme’s CSS via Shadow DOM, works with the native variant selector or a custom one, and supports 350+ themes (Dawn, Horizon, Craft, Sense, Refresh, Impulse, Impact, Prestige, Focal, and more) plus 7 page builders: Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo.

“Very useful app for me, the standard shopify solution shows all variant images at once which may confuse buyers. With this app I can show the relevant images for the specific variant only. Besides that, I needed support for the configuration and I got very quick response from Umid who also solved my config problem very fast. Thanks.”

Sun Audio, Spain, 2025-05-16. Rubik Variant Images on the Shopify App Store

Pricing is flat, not tied to your Shopify plan: Free at $0/month for 1 product, Starter at $25/month for 100 products, Advanced at $50/month for 1,000, and Premium at $75/month for unlimited. Every plan includes monthly AI credits. Start on Free, wire up one product exactly the way you would test the DIY method, and compare the effort side by side. If your catalog is small and static, the free tier or the code route both work. If you are past that, the math tips fast.

One boundary to keep clean: this handles images for the variants of a single product on the product page. If what you actually need is to link separate products together or show swatches across different products on a collection page, that is a different job. For that, see how Shopify combined listings work on rubikify.com, and our own breakdown of variant image apps compared if you want to weigh options. For deeper setup detail there is also the full Rubik variant images guide.

Try Rubik Variant Images free
Try Rubik Combined Listings free

See the live demo store, watch the tutorial video, or read the getting started guide.

FAQ

Can you show multiple images per variant on Shopify without an app?

Yes, but not natively. Shopify only supports one image per variant out of the box. To assign multiple images to a variant you need either a variant metafield of type list of files plus theme code, or an alt-text based Liquid filter. Both work and both require editing your theme.

How do I show only the selected variant’s images and hide the rest?

Native Shopify jumps the gallery to the variant’s one featured image but leaves everything else visible. To display images specific to the selected variant and hide the others, you edit the product-media Liquid to filter media by variant, using a metafield mapping or alt-text matching, then add JavaScript to update on variant change.

Does the no-app method break when I update my theme?

Yes, and this is the biggest catch. Custom gallery code lives in one theme version. When you accept a theme update or switch themes, that code does not migrate, so your per-variant filtering stops working until you rebuild it. Metafield data survives, but the theme logic that reads it does not.

What metafield type do I use for a variant image gallery?

Use a File type set as a list of values, which Shopify stores as list.file_reference. Create it under Settings, Custom data, Variants. That single metafield holds several images per variant, which is what lets one variant show a full gallery instead of one photo.

Is the alt-text trick bad for SEO?

It can be. Alt text is meant to describe an image for accessibility and search. If you overwrite it with a color name so your filter matches, screen readers and Google read that color name instead of a real description. It works as a hack, but you trade away proper image SEO to get it.

When is a variant images app worth it over DIY?

When maintenance beats the one-time build. DIY suits a few products on one stable theme. Past roughly ten products, high variant counts, frequent edits, or planned theme changes, an app that stores data in metafields and survives theme switches usually costs less time than repeatedly fixing broken Liquid.

Co-Founder at Craftshift

You may also like