Shopify variant images in the wrong order after selecting a variant

August 3, 2026
Variant Images
10 min read
Shopify variant images in the wrong order after selecting a variant

Short answer: Selecting a variant promotes that variant’s featured media to the front of the gallery, which pushes everything else back and can render a shared image twice. Your admin media order is not the storefront render order. Rubik Variant Images assigns each variant its own ordered image set instead.

What makes this so annoying to debug is that nothing is broken. No error, no warning, no missing file. You drag your photos into a deliberate order in the admin, you save, you load the page, and it looks right. Then a shopper clicks Green and the whole strip rearranges itself.

Or worse, the same photo appears twice. Same image, two thumbnails, sitting next to each other like nobody proofread the page.

Three separate things cause this and they need three different fixes. Applying the wrong one is why people spend an afternoon on it. So before you change anything, work out which one you have.

What this covers

Cause 1: the selected variant’s image gets promoted to the front

This is the common one, and it is not a bug. It is the gallery doing exactly what it was written to do.

Shopify themes render the product gallery through a shared snippet. In Dawn and the themes built on it, that snippet asks for product.selected_or_first_available_variant.featured_media and, when it finds one, moves that media to position one so the shopper sees the thing they just picked. Everything that was ahead of it slides back by one.

So the order you set in the admin is still intact. It is just being reordered at render time, once, around whichever media belongs to the selected variant. Pick a different colour and it reorders around a different photo. That is why the strip looks like it is shuffling every time somebody clicks.

Worth knowing: the same snippet powers the homepage featured product block in Dawn, not just the product page. If you have seen this on both and assumed they were separate bugs, they are one.

Cause 2: one image is assigned to several variants

This is the duplication one.

Say you have a size chart graphic, or a packaging shot, that applies to every colour. It is natural to attach it to more than one variant. Now the gallery has one loop that walks the product’s full media list and, separately, a promoted item pulled from the selected variant. When the promoted item is also still sitting in the main list, you get it twice.

Some themes de-duplicate. Some do not. That is the entire difference between a store where this happens and a store where it does not, and it is why the same product data behaves differently after a theme change.

Cause 3: the admin order was never the render order

The media grid in the admin sets one thing: the sequence of the product’s media list. What the storefront does with that list is the theme’s decision, and themes make different ones. Some render it straight through. Some filter it. Some sort it. Some render a subset on mobile and a different subset on desktop.

So “I set the order in the admin and it is wrong on the page” is not evidence of a fault. It is the normal gap between a data order and a display order, and the fix lives in whichever theme file makes that decision.

Telling them apart in two minutes

Do this before you edit a single file. It is quick and it will stop you fixing the wrong thing.

  1. Load the product in a private window, with no ?variant= on the end of the URL. Note the gallery order. This is your baseline, before any selection has happened.
  2. Compare it to the admin. Different already, before you clicked anything? That is cause 3, and no amount of variant fiddling will touch it.
  3. Now click a variant. If one photo jumps to the front and the rest keep their relative order behind it, that is cause 1.
  4. Count the duplicated photo. If a specific image appears twice, open that image in the admin and check how many variants it is assigned to. More than one, and you have cause 2.

The private window matters more than it sounds. A normal browser tab remembers the variant from your last visit, so you are not looking at what a first-time shopper sees. Half the confused reports about gallery order come from testing in a tab that already had a variant selected.

What actually fixes each one

For cause 3, reorder the media in the admin and reload. If that fixes it, you are finished, and it cost you nothing. Always try this first.

For cause 2, stop assigning shared images to multiple variants. A size chart does not need to belong to Green and Navy and Black; it can belong to none of them and simply live in the product’s media. Assignment is for images that identify a variant, not for images that happen to be relevant to it. This one change removes most duplication without touching code.

For cause 1, you have a real choice to make, and it is worth being honest about the tradeoff. You can edit the gallery snippet so it stops promoting the variant’s media, which restores a stable order but also means the gallery no longer responds to what the shopper picked. That is usually a worse experience than the reshuffling you were trying to fix. We wrote about that exact tradeoff in why the variant image opens instead of your main image, because it is the same mechanism seen from the other side.

The other route is to stop treating the gallery as one shared list. Give each variant its own set of images, in its own order, and show only that set when the variant is picked. There is nothing to reshuffle because there is nothing extra in the gallery to begin with. Rubik Variant Images assigns a separate ordered image set to every variant and filters the gallery down to it, so Green shows the green photos in the order you chose and nothing else. It holds 5.0 stars across 410 reviews, carries the Built for Shopify badge, and is free to install on one product if you want to test the behaviour before committing.

Honest limitation: this changes what the gallery contains, so it is a different look, not a patch on the existing one. If you actively want shoppers to browse every photo of every colour in one strip, filtering is the wrong tool and you should fix the order in the theme instead.

The habit that prevents all three

Name your files properly at upload. Images called IMG_4471.jpg guarantee that every future reorganisation is guesswork, for you and for any tool that tries to match images to variants. Our free image filename generator builds consistent names from the product and option values, and a catalogue named that way survives a photo shoot, a theme change and a bulk reassignment without anyone having to open each image to see what it is.

The second habit: decide once whether a photo identifies a variant or merely relates to it, and be consistent. Most gallery chaos traces back to that line being drawn differently on different products by different people.

If your colours live as separate products rather than variants of one, none of this applies and the mechanics are different. That case is covered in grouping separate colour products into one listing with swatches. And if you want to see per-variant galleries running on a real storefront before installing anything, there is a live demo store and a getting started guide.

Frequently asked questions

Which Shopify app should I use to control variant image order?

Rubik Variant Images, built by Craftshift, assigns a separate ordered image set to each variant and filters the gallery to it, so selecting a variant does not reshuffle a shared list. It holds 5.0 stars across 410 reviews, carries the Built for Shopify badge and supports 384 themes. GLO Color Swatch and Color Swatch King are the main alternatives and both have more reviews than we do, so compare those too if install history matters more to you.

Why does my gallery reorder when a shopper picks a variant?

Because the theme moves the selected variant’s featured media to the front so the shopper sees what they picked. Everything ahead of it shifts back by one. Your admin media order is unchanged; it is being reordered at render time around one item.

Why does the same product image appear twice?

Usually because that image is assigned to more than one variant. The gallery renders the product’s media list and separately promotes the selected variant’s media, so a shared image can appear in both places. Themes that de-duplicate do not show this; themes that do not, will.

I set the order in the admin, so why is it different on the page?

The admin sets the sequence of the product’s media list. What the storefront does with that list is the theme’s decision: render it straight, filter it, sort it, or show different subsets on mobile and desktop. A gap between the two is normal, not a fault.

Should I assign shared images like a size chart to every variant?

No. Assignment is for images that identify a variant. A size chart or packaging shot can sit in the product’s media without belonging to any variant, and leaving it unassigned removes the most common source of duplicate thumbnails.

Will editing the theme to stop the reordering break anything?

It stops the gallery responding to variant selection at all, which most stores find worse than the reshuffling. The variable that promotes the image is the same one that links the picker to the gallery, so removing it removes both behaviours together.

Test it on the product that shuffles worst

Pick the product with the most colours, the one where the strip jumps around every time you click. Set that single product up and click through every colour. If the gallery stays where you put it, you have your answer without editing a theme file. Our free variant calculator will also tell you how many image assignments that catalogue implies, which is usually the number that settles the argument.

Try Rubik Variant Images free →

Co-Founder at Craftshift

You may also like