Chasing the Shopify Image Lightbox Bug on Mobile

Open your Shopify store on your phone. Tap any portrait product photo. If the picture fills more of the screen than the screen can hold, you have hit the default Shopify image lightbox on mobile. It ships enabled on Dawn, Sense, Studio, Crave, and Horizon. Community threads describing it go back to July 2022. A merchant we spoke with last month framed the stakes bluntly: "about 74% of my shoppers are mobile users." Their product pages were doing this on every single one.

What the merchant told us

They had already found the community CSS fix - the .product-media-modal__dialog .global-media-settings selector that adds a media query for widths under 749px and forces the modal to 170% width. They had pasted it into Theme settings > Custom CSS. It looked cleaner. Their mobile add-to-cart rate had not moved. They had opened three separate Shopify Community threads about it in a week, were on their second "have you tried square images?" reply from a well-meaning community member, and were starting to wonder whether the problem was actually the photos.

The one line that told us it was worth a call: their store was on Horizon. The CSS selector they pasted targets Dawn's DOM. On Horizon, it does exactly nothing. They had a fix in their Custom CSS that had never once run.

What we checked first

Three things, in this order.

1. Image Zoom setting. Online Store > Themes > Customize > Product page > Media. Almost every Shopify 2.0 theme ships with "Image lightbox" as the default. Switching it to "Standard" (inline zoom on hover) or off entirely removes the modal from the code path. This is a zero-code toggle that most merchants never see, because it is buried three layers deep in the customizer and defaults to the broken value.

2. Theme version. If the store is on Dawn, we check the exact version. Dawn 15.4.0 introduced a distinct second failure mode: the lightbox stops opening at all after clicking. GitHub Issue #3874 documented it in October 2025, was closed inactive in November, and subsequent Dawn releases quietly fixed it - though not in a way that shows up in the changelog. If you are on Dawn and the tap does nothing at all, check the version number before you write CSS.

3. CSS syntax in the merchant's own overrides. A December 2025 Horizon thread (community 579577) traced a "collection images too big" complaint to a typo: the merchant had written atuo instead of auto in a property value. The browser silently ignored it. Default styling stayed intact. Worth checking before you assume the selector is wrong.

Steps one and two rule out the two easy causes. Step three catches the case where the merchant thinks they already fixed it.

Why the community CSS fix was not the answer

The 170%-width CSS that circulates in a dozen Shopify Community threads works on Dawn. It has been called "way better" by the merchant who first shared it in thread 379475, and it is the fix most search results surface. It also has three limitations that no thread cleanly summarizes.

First, it is Dawn-specific. The .product-media-modal__dialog .global-media-settings selector targets Dawn's DOM structure. On Crave, the January 2025 fix (thread 387511) applied via theme.liquid uses a different mechanism. On Horizon, neither approach applies at all - Horizon renders product media through a different component tree.

Second, "way better" is not "fixed." The original contributor's own follow-up said, "It worked for me (well not perfect but WAY better)." On portrait photos with a tall aspect ratio the image is still oversized after the override; it is just less catastrophic.

Third, and this was the one that mattered on our call: the CSS fix does nothing about the close button. Merchant vashekcz used session replay tools in June 2024 to watch real customers on their Dawn store open the lightbox and get stuck inside it - the X icon in the top-right corner falls off-screen on portrait images, and users do not think to scroll up in a modal to find it. Reducing the overflow with CSS does not move the close button. Customers keep tapping the image, then tapping the edges, then leaving.

That last point is why the CSS-only path stopped being our default recommendation two years ago. If you want a second pair of eyes on whether your store's real customers actually use the zoom on purpose, the first 15 minutes with a help1 expert is free and pulling a handful of mobile session replays takes most of it.

The clue that changed the diagnosis

Once we knew the merchant was on Horizon, the fix path forked.

Horizon has three separate product-image bugs that all present as "images look wrong on mobile," and each needs a different override. They read like variants of the Dawn lightbox problem in the community threads. They are not.

The one that most often bites Horizon stores is a CSS variable failure documented by community expert tim_tairli in thread 589670 (February 2026). Horizon's base.css uses @supports (width: round(1px, 1px)) to gate the value of --slide-width on product media containers. On mobile browsers that fail the round() support check, the fallback code path sets inconsistent widths - thumbnails end up "really small or really big" as the original poster put it. The override is one line:

.product-media-container { --slide-width: 100% !important; }

Paste that into Theme settings > Custom CSS, save, reload on a real phone. The merchant who opened the thread confirmed it worked.

The second Horizon bug is the product page image expanding too tall on desktop. Roman_S resolved it in March 2026 (thread 599121) with .product-information__media slideshow-slide .product-media { height: 60vh; }. The trade-off is that images taller than 60% of the viewport get cropped at the bottom. Test with the tallest image in your catalog before shipping.

The third is Horizon's hero section cropping - r/shopify post 1qfew3w documented a 2048x1365 image with "literally half of that is cropped off at the bottom" at Height=Large. Shopify does not publish official Horizon hero dimensions anywhere. The community workaround is object-fit: cover !important; on .hero__image, combined with composing the source photo so the main subject sits in the middle 50-60% of frame height.

All three get diagnosed as the Shopify image lightbox problem by merchants who search "Shopify product image too big mobile" and land on a Dawn thread. The vocabulary matches. The fix does not.

What actually fixed it, in about six minutes

For this merchant, on Horizon, with mobile as their primary channel, we did three things.

1. Toggled Image Zoom off in Themes > Customize > Product page > Media. This removed the modal entirely. Session replays after the change showed no drop in engagement time on the product page.
2. Added the .product-media-container { --slide-width: 100% !important; } line to Custom CSS. This addressed the inconsistent mobile thumbnail sizes that were unrelated to the lightbox but had been showing up in the same "images look wrong" complaint.
3. Removed the Dawn CSS fix they had pasted in earlier. It was dead code on Horizon and it made the Custom CSS field harder to read for whoever inherits the store next.

Six minutes on a call, three settings changes, no code editor open. The last time we walked another merchant through a similar mobile-audit fix path, the shape was almost identical - and we wrote up that story in what we found in one fragrance store's mobile bugs if you want the other version.

The reason this shape works is not that the Shopify image lightbox is fundamentally hard to fix. It is that the search results funnel every merchant to the same Dawn CSS snippet regardless of which theme they are actually on, and the snippet becomes the story instead of the settings toggle that would end the whole thing.

What we still can't fix

The Shopify image lightbox has two gaps we cannot close with CSS. Worth naming because if you go through this exercise you will hit them.

The first is swipe navigation inside the modal. Merchants ask for this constantly - open one image, swipe to the next, without closing and reopening. No Shopify theme ships it. Community thread 324789 (Futurisnow, May 2024) is one of many that asked for a code path. None have surfaced. If your storefront needs swipe navigation, the honest answer is a page-builder or a paid theme that owns its own image gallery component.

The second is a fix that would need to be conditional on the merchant's source image size. Robehs in thread 357376 hit this directly: the CSS that reduces the desktop modal to 50% width makes 1000x1000px source images blurry, because the modal is now smaller than the image's pixel resolution supports. Merchants with high-resolution product photography want the overflow fix. Merchants with older, lower-resolution catalogs want the images to stay at their native size. There is no single CSS rule that handles both, and no thread has proposed a JavaScript approach that inspects image dimensions and adjusts. This is one of the few places where "reshoot the catalog" is the technically correct answer and also completely impractical for a solo merchant with 400 SKUs.

The question we hand back

Watch five real mobile sessions on your product pages tonight. Microsoft Clarity is free and installs in about the time it takes to read this paragraph. Count the taps that open the lightbox on purpose versus the taps that open it by accident and then flail. Then answer this honestly: is your Shopify image lightbox helping the customers you actually have, or is it a default that shipped with the theme and never got tested against real mobile behavior? Your customers already answered the question. All we do on this call is help you read what they said.