The Horizon Snippet Hiding Your Product Hero Image

Quick Answer: Horizon's product gallery calls selected_or_first_available_variant.featured_media before anything else on page load. That single expression, on line 232 of one snippet, is why your lifestyle photo loses slot one to a horizon variant image the customer never asked to see.

Open your live Horizon store in an incognito tab. Load any product page that has a color variant, without a ?variant= in the URL. Look at the very first image. If it is a specific color shot instead of the lifestyle photo you dragged into slot one, you already know why you're here. Shopify Staff confirmed the behavior twice, once in August 2025 and again in August 2026, and thread 661385 is still collecting new merchants surprised by it three weeks after a fix was published.

What we checked first

The instinct with any wrong-image-first bug on Shopify is reorder. Every "how do I fix this" answer that predates August 2026 gave the same advice: drag the hero to position one in the product's Media section, and make sure it is not assigned to any variant. We tried it on the first merchant who came to us with this complaint. It worked. Then it stopped working the moment they added a new color and dragged variants around, and the horizon variant image was back in slot one.

We tried a second workaround. Reorder the variants themselves so the variant matching your hero photo sits at the top of the list. Same failure mode. It holds until someone touches variant order for any reason: a launch, a restock, a size chart update, a color renaming.

At this point we were about 40 minutes in and the fix we had given the merchant was already brittle. This is the shape of a workaround, not a real fix.

Why the trail went cold

We opened Horizon in the theme customizer and clicked into the Media Gallery block, hoping for a settings-level answer. There is a toggle called "Hide other variants' media." The name reads like it should do exactly what we wanted. It does not. The toggle only hides images explicitly assigned to other variants. Any image with no variant assignment - your lifestyle shots, your marketing photos, anything you dropped in without tagging a color - stays visible regardless of the toggle. On Horizon v4.1.3 in grid layout, that produces a mixed grid: the selected color's photo sitting next to unassigned lifestyle shots even with the toggle on.

Then we went hunting through the Shopify Community. Thread 556892, August 2025: Staff member kjellr replies to a merchant asking for exactly this feature: "there's no way to prevent Horizon from pre-selecting a variant by default." Acknowledged. Filed as feedback. No fix. A year later, in August 2026, Steve_TopNewYork from Shopify Staff answers thread 661385 with the same message in different words: "this requires theme customization rather than a built-in setting."

That is the point where most of our shopify theme customization projects get expensive. When the platform confirms that no setting exists, the merchant has three doors: pay a developer, install an app that patches around the gap, or accept the default. We were still on door three when we spotted thread 661606.

The clue we almost missed

Thread 661606 is titled "Horizon theme - Remove default variant selection on product page." It was marked Solved on 2026-08-06 by a merchant called lelongdelajambe. The reply that solved it, from a user called ajaycodewiz, is fifteen lines long. It tells you to edit one file, find one expression, and replace it with a shorter version of the same expression.

We almost skipped it. The title is about "removing default variant selection," which sounds like a different bug from "wrong image shows first." They are the same bug, seen from opposite ends. The gallery resolves its first image by asking which variant is currently selected. If Horizon has already selected a variant on your behalf, the gallery renders that variant's featured media before the page has done anything else. Fix the pre-selection, and the gallery no longer has a variant to prefer.

The file is snippets/product-media-gallery-content.liquid. The expression is selected_or_first_available_variant. Replace with selected_variant. That is the whole change. On September 7, the day we are writing this, we opened the same file on Shopify's public github.com/Shopify/horizon main branch and confirmed the expression is still sitting at line 232. The fix target has not moved.

What the two expressions actually do

The compound accessor selected_or_first_available_variant returns one of two things. If a variant is currently selected (via a URL parameter, a click, a saved cart state), return that variant. Otherwise, fall back to whichever variant is the first available one. Horizon always has a "first available" variant ready, so this expression never returns nil at first paint. It always resolves to a specific variant, and the gallery uses that variant's featured media as the opening image.

selected_variant, by contrast, returns nil until the customer has actually chosen something. With a nil variant, the gallery has nothing to prefer, so it falls back to the default image ordering set in the product admin. That is the order you set when you dragged your lifestyle photo into slot one. Same file, same line, just a shorter accessor.

Why it takes months for merchants to find this

The reason merchants search for this for weeks and do not find the answer is that Horizon's variant picker and gallery are, by design, isolated web components. Craftshift's 2026 Horizon guide has the cleanest phrasing of this: "The variant picker (a web component) does not communicate with the gallery (another web component) to filter images." Which means the picker is not what causes the gallery to open on a color shot. The gallery causes it, independently, by resolving selected_or_first_available_variant before the customer touches anything.

That gap is why you cannot fix this by reading the picker's settings, by toggling the gallery block's filters, or by moving images around in the admin. The fix lives in a different file from the file you are looking at when you see the bug.

The other reason it takes forever: the horizon variant image behavior on the product page is not the same problem as the horizon variant image behavior on collection pages, and neither is the same as the out-of-stock-first-variant problem that greys out Add to Cart. They all look like the same thing from the outside, and they live in three different files.

What still breaks after you make the swap

The one-line change fixes the product page. It does not fix the collection page product card. If your product cards on collection pages are showing variant photos instead of the featured image, that is a separate problem in a separate block. The fix is in the theme customizer: hide the Media block on the product card and drop in an Image block with the dynamic source set to "featured image." tim_tairli documented this on thread 420453 back in June 2025 and it still applies. The trade-off is that you lose the second-image-on-hover animation that the Media block gives you. If hover animation matters for your brand, no clean fix exists yet.

Two more things the one-line swap will not do:

1. It will not filter unassigned lifestyle photos out of the grid when a customer picks a color. The "Hide other variants' media" toggle still misses those. Ploqo published a small follow-on filter in the same product-media-gallery-content.liquid file that restricts the grid to only the selected variant's featured image when both the toggle is on and the presentation mode is grid. That closes the grid-mode gap. We have not tested it in carousel mode.

2. It will not fix the Horizon featured-product section block on your homepage. That block's variant picker moves the radio button when you click, but does not update the price, image, or Add to Cart link. Craftshift's 2026 variant-button guide catalogs this and no community code fix has surfaced. If you use the featured-product block on a landing page, replace its ATC with a "View product" link and let the picker on the product page do the real work.

What we did about it

We applied the swap on a duplicate theme, tested on a multi-variant product with no URL parameter, tested again on a URL with ?variant= in it, tested a single-variant product, tested on mobile and desktop. Gallery opened on the hero every time. Price, stock, and Add to Cart behaved the same as before. The merchant then flagged something we had not warned them about: on a multi-variant product, the Add to Cart button now shows an unselected state until the customer clicks a swatch. That is the intended UX for a forced-selection storefront, but if your merchandising strategy is to let customers add to cart with a default variant already picked, this fix is the wrong one for you. Consider the app path (Easify Product Options is the one we see most often in these threads) or the admin reorder workaround, and hold on the code change.

We also opened a separate ticket for the featured-product section on their homepage. It was one of those cases where the merchant felt "half the site is broken" and could not articulate why. Three problems - wrong opening image, broken featured-product picker, OOS auto-selection greying out the ATC - all rooted in Horizon's variant-selection architecture, all requiring separate fixes on separate surfaces. That kind of tangle is why we built help1's expert chat, and the first fifteen minutes are free; it is often faster than a fourth round of forum threads. For patterns like this that keep showing up in Horizon audits, we have written about the theme bugs we find in nearly every audit we run.

Here is the question that keeps coming back on this kind of shopify theme customization work: how many other one-line fixes are sitting in your live theme right now, waiting for one merchant on one Solved thread to name them? If the last three "your theme just does that" answers you have accepted turn out to be one-word swaps in a Liquid snippet, what else were you told, before that, that was also wrong?