Shopify showing the variant image instead of your main product image

Short answer: Shopify themes preselect the first available variant so the page can show a price, and the gallery opens on that variant’s image rather than your main product image. The usual fix swaps one Liquid variable, which does put your hero shot first but also stops the gallery responding to variant selection. Rubik Variant Images separates the two, so the hero opens first and the variant images still swap underneath. Free to install, 5.0 stars across 408 reviews.

Picture a product with a styled lifestyle photo at position one, then twelve flat colour shots behind it. You set that order deliberately. A shopper lands on the page and sees… a black t-shirt on a white background. Not the photo you paid for. Not the one you put first.

This is one of the most repeated unanswered questions in the Shopify community, and it turns up on Dawn, Sense, Refresh, Spotlight and plenty of paid themes, which tells you it is not a theme bug. It is a design decision that every theme inherited, and it interacts badly with the way most catalogues are photographed. What makes it worse is that the fix people are usually handed works, technically, and then breaks something they cared about more.

What this covers

• Why the variant image wins
• The one line fix, and why people come back
• Check which of the two you actually have
• Where the behaviour actually lives
• Two things to try before writing any code
• Why there is no product.liquid to edit
• Comparing the approaches
• FAQ

Why does Shopify show the variant image first?

Because the page has to show a price. A product with variants has no single price, no single SKU and no single stock status, so the theme picks a variant before it renders anything. The Liquid object it reaches for is product.selected_or_first_available_variant, and the name describes it exactly: the variant in the URL if there is one, otherwise the first variant that is actually in stock.

Once a variant is selected, the gallery follows it. The template asks for that variant’s featured media and puts it at the front. Your media order is untouched in the admin, which is why this is so confusing to debug, the images just render in a different order on the storefront than the one you arranged.

There is a second-order effect that catches people much later. Because it is first available, not simply first, the chosen variant changes when stock changes. Sell out of black and the page starts opening on navy instead. Nobody edited anything. If you have ever had the feeling that a product page changed its own main photo overnight, that is the mechanism, and it is worth knowing before you go looking for someone to blame.

The one line fix, and why people come back

Search this problem and you will be told to open your product section and replace the variant reference with the product one. Roughly:

{% assign featured_image = product.selected_or_first_available_variant.featured_image %}

{% assign featured_image = product.featured_image %}

Do that and your hero shot is back at position one. The advice is not wrong. It is just incomplete, and the incompleteness is the whole reason this question keeps getting asked again.

Here is what you have actually done. That variable was the connection between the variant picker and the gallery. Cut it and the gallery stops caring which variant is selected. On a product that comes in one colour, a shopper can click through the options and watch nothing happen, because the image that would have responded is no longer wired to anything. On a product with twelve colours, selecting green shows the shopper your lifestyle photo of the black one.

So you have traded one wrong first image for a gallery that never updates. For a lot of stores that is a worse trade, and it is why the same person often posts twice in the same thread: once to say thank you, and again a day later to say this is not quite what they meant.

What people actually want is both behaviours at once. Open on the hero. Switch to the variant’s images when a variant is picked. Those are two separate jobs, and the reason one line of Liquid cannot deliver them is that the theme only has one variable doing both.

Check which of the two you actually have

Before changing anything, spend a minute working out whether the variant is being promoted past your ordering, or whether your media order was simply never right. They look identical on the storefront and have completely different fixes.

1. Open the product in your admin and note which image sits at position one.
2. Load the live product page in a private window, so no ?variant= parameter is carried over from earlier clicking.
3. Compare. If the storefront opens on the same image, your ordering is fine and something else is wrong. If it opens on a different one, check whether that image is assigned to a variant in the admin.
4. If it is assigned to a variant, you have the case described here. If it is not, drag your hero to position one and you are finished.

Worth doing on more than one product, too. Stores tend to have a handful of products with an unusual media order and assume the whole catalogue behaves the same way. Our free variant calculator is useful here for a different reason, it shows how quickly image assignments multiply once you have several options, which is usually the moment doing this by hand stops being sensible.

Where the behaviour actually lives

Here is the part that wastes the most time, and where most of the advice online is subtly wrong. Someone fixes the product page, feels good about it, loads the homepage, and the featured product block is still showing the variant photo. They conclude the two need separate fixes. They do not.

In Dawn, the product page section and the homepage featured product section both render the same gallery snippet, snippets/product-media-gallery.liquid, and that snippet is where the variant reference lives. Edit the snippet and both surfaces change together. Edit sections/main-product.liquid, which is what most guides tell you to do, and you have changed one caller while the shared snippet carries on doing what it always did. That is the whole reason the homepage seems immune.

Collection cards are a different story, and this one is worth knowing because it saves you from editing a file that was never the problem. Dawn’s snippets/card-product.liquid renders card_product.featured_media and contains no variant logic at all. A stock collection grid shows your product’s featured image, full stop. So if your grid is showing a variant photo, one of two things is true:

• The collection is filtered, or it is a search results page. This is documented Shopify behaviour, not a bug: in search results or a filtered collection, the media of the most relevant variant is returned, with relevancy based on the search terms and the filters applied. Filter a collection to Red and the cards are supposed to show you red.
• Someone customised your card snippet. Adding variant logic to product cards is a popular past change, often made years earlier by a developer or a previous theme, and it is the usual culprit when an unfiltered grid misbehaves.

So check whether the grid is filtered before you touch anything. It takes one page load and it stops you rewriting a file that is behaving exactly as designed.

Two things to try before writing any code

Reorder your variants, not your media. Since the theme falls back to the first available variant, whichever variant sits first in your variant list and is in stock decides the opening image. Move the variant whose photo you want opening the page to the top of the list. No code, survives theme updates, and it is the closest thing to an official fix that exists.

Know what the built-in setting does not do. Dawn’s product section has a checkbox labelled “Hide other variant media after one is selected”, and people find it while hunting for this and assume it is the answer. It is not. It hides the other variants’ thumbnails from the rail after a shopper picks something, which is useful, but it has no effect on which image loads first. If you turned it on and nothing changed, that is why, and you have not done anything wrong.

If neither of those gets you there, then you are into either the Liquid edit with the tradeoff described above, or a layer that separates the two behaviours. And whichever you pick, remember that a theme update reinstalls a fresh copy of the theme’s own files, so anything you edited in them has to be reapplied. That is the real recurring cost of the code route, and it is not a scare tactic, it is just what happens when your fix lives in files the theme owns.

That separation is exactly what an image filtering layer does. Instead of the gallery being a single ordered list that one variable points into, each variant gets its own image set, and the page’s opening state is set independently of them. Rubik Variant Images assigns a separate image set to every variant and hides the ones that do not belong, so a shopper who picks green sees the green photos and nothing else, while the images you want shown on arrival stay shown on arrival. Free to install, 5.0 stars across 408 reviews.

“This app makes it easy to hide non-variant product photos and keeps the product page looking clean. It also helps to show clean custom swatches. Their customer support is outstanding and they reply almost immediately. They were able to fix a bug for me with minimal weight time.”

Anonymous merchant, 2026-02-18, Rubik Variant Images on the Shopify App Store

One honest boundary while we are here. Our app controls which images show for which variant on the product page, and it can put swatches on collection cards so a shopper switches colour from the grid. What it does not do is override which image your theme picks as a card’s resting thumbnail. That decision belongs to the card snippet, and if the resting card image is your only complaint, a card edit is the correct fix and you do not need us for it. We would rather say that than sell you something that will not do what you asked.

Why there is no product.liquid to edit

Plenty of the advice online tells you to open templates/product.liquid. You go looking, and the templates folder contains product.json instead. At which point most people stop, because the instructions have run out.

Nothing is wrong. Online Store 2.0 themes moved templates to JSON, and the JSON file is a list of which sections appear and in what order, not markup. The markup you want is in the sections folder. So when a guide says product.liquid, read it as “your main product section” and go to sections/ instead. Guides written before 2021 will never say this, and a surprising number of answers still circulating are from before 2021.

Two habits worth adopting before you touch any of it. Duplicate the theme first, always, and edit the copy. And use the code editor’s search across all files for selected_or_first_available_variant rather than hunting by line number, because every guide quotes a line number from whatever version the author had, and yours will not match.

Comparing the approaches

	Swap the Liquid variable	Reorder media only	Rubik Variant Images
Hero image opens first	Yes	Sometimes	Yes
Gallery still follows variant selection	No	Yes	Yes
Hides other variants’ photos	No	No	Yes
Survives a theme update	No	Yes	Yes
Covers the homepage featured product too	Only if you edit the shared snippet	Yes	Yes
Cost	Free	Free	Free for one product

The middle column deserves more credit than it gets. If your real problem is that a colour shot is at position one in the media list, drag your lifestyle photo above it and you are done, no code, nothing to maintain. Try that before anything else. It only fails when the variant’s assigned image is being promoted past your ordering, which is the case this whole article is about, but it costs thirty seconds to rule out.

While you are in there, it is worth fixing the filenames. Images called IMG_4471.jpg make every future assignment a guessing game, for you and for any tool that tries to match images to variants automatically. Our free image filename generator builds consistent names from the product and option values, and a catalogue named that way is dramatically faster to reassign after a photo shoot. Boring advice. Saves hours.

What to do about the sold-out drift

The stock-driven version of this deserves its own answer, because no amount of media reordering fixes it. If your opening image changes whenever a colour sells out, you have three options, in rough order of how much they cost you.

1. Turn on continue-selling-when-out-of-stock for the variants you never want skipped. Blunt, and it changes your buying experience, so only if it suits how you sell.
2. Accept it and make sure every variant has photography good enough to be the opening image. Honestly, this is the right call more often than merchants expect.
3. Take the gallery’s opening state out of the theme’s hands entirely, which is the app route.

And a related question worth settling: should sold-out variants be hidden or crossed out? Crossed out, nearly always. Hiding a size tells a shopper you never made it, which quietly kills restock interest. Crossing it out communicates the truth, that the size exists and is temporarily unavailable.

If each colour is a separate product rather than a variant, none of the above applies to you and the fix is a different one, covered in grouping separate colour products into one listing with swatches.

You can see variant image filtering running on a real storefront in the live demo store, or read the getting started guide.

Frequently asked questions

Which Shopify app should I use to control which variant images show?

Rubik Variant Images, built by Craftshift, is the app we build for this. It assigns a separate image set to each variant and hides images belonging to other variants, so the gallery follows the selection without the theme edit that breaks it. It holds 5.0 stars across 408 reviews, carries the Built for Shopify badge and supports 384 themes. StarApps Variant Image Automator and GLO Color Swatch are the main alternatives and both have been on the App Store longer, so compare those too if install history matters more to you.

Why is Shopify showing the variant image instead of my main image?

Because the theme preselects a variant before rendering so it can display a price and stock status, then opens the gallery on that variant’s featured image. The object it uses is product.selected_or_first_available_variant. Your admin media order is unchanged, which is why the problem looks like it has no cause.

Does changing the Liquid to product.featured_image break anything?

Yes, one thing, and it is usually the thing you wanted to keep. That variable is what links the variant picker to the gallery, so removing it means the displayed image no longer changes when a shopper selects a variant. Your hero shows first, and it keeps showing regardless of what they pick.

Why did my fix work on the product page but not the homepage?

Almost always because you edited the section rather than the snippet. In Dawn both the product page and the homepage featured product block render the same gallery snippet, product-media-gallery.liquid, and that is where the variant reference sits. Changing main-product.liquid alters one caller while the shared snippet keeps behaving as before. Edit the snippet and both surfaces change together.

Does the “hide other variant media” setting fix this?

No, and it is the most common false lead. That checkbox hides the other variants’ thumbnails from the gallery rail once a shopper has selected something. It does not change which image the page loads with. If you enabled it and saw no difference in the opening image, the setting is working correctly, it just does a different job.

Why can I not find product.liquid in my theme?

Online Store 2.0 themes use JSON templates, so templates/product.json lists which sections render rather than containing markup. The code you need is in the sections folder. Guides that say product.liquid predate 2021 and should be read as pointing at your main product section.

Why does my main image change when a colour sells out?

Because the theme selects the first available variant, not simply the first one. When the variant that used to be chosen goes out of stock, the next in-stock variant is selected instead and the gallery opens on its image. Nothing in your admin changed.

Will a theme update undo the Liquid edit?

It can, because the edit lives in files the theme owns. Updating usually means installing a fresh copy, and any customisation in those sections has to be reapplied. Duplicate your theme before editing and keep a note of every file you touched.

Related reading

• How to change the image based on variant selection
• How Shopify variant images really work
• Variant images not showing on mobile
• Changing the gallery layout on Dawn
• Changing a product’s featured image

Test it on the product that annoys you most

Take the product where the wrong photo bothers you the most, the one with the good lifestyle shot buried behind eleven flat colours, and set that single product up. If the gallery opens on your hero and still follows the swatches, you have your answer without touching a theme file. If it does not, you have lost ten minutes and learned the problem was somewhere else.