Product media · July 2026

Shopify Product Images Disappear on Desktop: Media Gallery Debugging Checklist (2026)

If Shopify product images load on mobile but vanish on desktop, do not start by re-uploading every image. First prove whether the image is missing or whether the desktop product media container has collapsed.

~7 min read · product media, desktop CSS, gallery debugging, image loading

Quick Fix with Thunder

Thunder is not a theme-code debugger, but it fits the QA workflow: fix the layout bug in a duplicate theme, then test the product page for image weight, lazy-loading mistakes, third-party scripts, and mobile Core Web Vitals regressions.

Pair this checklist with the Shopify speed optimization guide, the Shopify image optimization guide, and the Shopify speed optimization service if product media changes are also hurting load speed.

Install Thunder

First, prove whether the images are actually loading

Open the product page in Chrome DevTools and inspect the product image. If the image has a valid Shopify CDN URL and the Network tab returns a 200 response, the asset is not the main problem.

Next, look at the image and each parent wrapper. If you see width or height at 0px on desktop, you have a layout collapse. That is why clearing cache or reassigning images does nothing.

  • Check the image URL directly in a new tab.
  • Inspect the product media wrapper width and height.
  • Compare desktop vs mobile computed styles.
  • Look for desktop-only media queries that alter the gallery grid.

Check the product media column and grid CSS

Most modern Shopify themes render product pages as a two-column grid: media on one side, product information on the other. If a customization changes the grid template, column span, or max width, the media side can collapse while the rest of the product page looks normal.

In DevTools, inspect selectors similar to media-gallery, .product__media, .product-information__media, .product-media-container, and any theme-specific product grid wrapper. The exact class names vary by theme, but the symptom is the same: the image exists inside a wrapper with no visible space.

Undo recent CSS in a duplicate theme, not the live store

Duplicate the theme and remove only the most recent custom CSS or product-section changes first. Do not rip out the whole product template unless you have to. A desktop-only image bug is often one small rule that changed a grid column, display mode, or overflow behavior.

If the image comes back, add the removed rules back one by one. That gives you the exact selector causing the collapse instead of another round of guessing.

Disable app embeds and global injected CSS

If the issue appears across multiple themes, check anything that can affect every theme: app embeds, custom pixels, page builders, product options apps, sticky-cart apps, and global CSS snippets pasted into theme settings.

Turn off nonessential app embeds in the duplicate theme, reload the product page, and then add them back one at a time. For broader script cleanup, use the third-party scripts guide and the SEO/app script overlap guide.

Retest speed after the image is visible

Once the gallery works, check whether the restored media is too heavy or lazy-loaded incorrectly. Product images can be visible and still hurt LCP if the first gallery image is oversized, delayed, or loaded behind too much JavaScript.

Use the Shopify LCP guide and Core Web Vitals guide after the layout fix, especially for image-heavy product pages.

FAQ

Why do Shopify product images show on mobile but disappear on desktop?

The most common cause is responsive CSS or product-template layout logic that gives the product media column zero width or zero height at desktop breakpoints. The images may still load from Shopify CDN, but the gallery container collapses so nothing is visible.

Does this mean the product images are missing from Shopify admin?

Not usually. If the image URLs load directly and the images appear at smaller widths, the assets are assigned correctly. The problem is usually theme CSS, grid columns, a media-gallery setting, or app/custom code changing product-page layout.

What should I inspect first in DevTools?

Inspect the product media wrapper and check its computed width and height. Look for selectors like product media, media-gallery, slideshow-slide, product-information media, grid-template-columns, display, overflow, and desktop-only media queries.

Can speed apps or app code cause product image layout bugs?

Any app or custom code that injects global CSS or changes lazy loading/product media behavior can expose layout bugs. Test in a duplicate theme with app embeds disabled, then add changes back one at a time.

Fix the media layout, then keep the product page fast

Thunder helps reduce image, script, and Core Web Vitals friction after product-page theme changes are working correctly.

Install Thunder on Shopify