Shopify product images not loading or showing blank
When Shopify product images stay blank, the files are rarely missing. More often the gallery script crashed before it could reveal them, or lazy loading never fired for images that should have loaded straight away, both typically caused by an app or a theme edit. Check the browser console and the Network tab filtered to images: an error points to a script problem, while 404 responses mean the image URL itself is broken.
What you'll see
Product pages show empty grey boxes where photos should be. Images might appear only after you scroll, after a refresh, or after a few seconds, and the problem may happen in Safari or Firefox but not in Chrome. Sometimes the add to cart form disappears alongside the images, which is a strong hint that one script failure is behind both.
Why it happens
1. The gallery script fails before it starts
Many themes hide product media until a slider or gallery script has set it up. If that script, or one loaded before it, throws an error, the images stay hidden even though they downloaded fine.
2. Lazy loading never triggers
Images marked to load lazily wait until they are near the screen. If the first product image was set to lazy by a custom edit, or a lazy-load app waits for an event that never fires, the main photo can stay blank until the shopper scrolls.
3. Too many scripts competing on load
A page carrying many app scripts can be slow enough on mobile connections that images render late or time out, and the delay is worse in some browsers than others.
4. Image links point to files that no longer exist
Images inserted by URL from another host, or files deleted from Content > Files while still referenced in a description, return a 404 and show as broken.
How to fix it
- Open a product page in a private window in both Safari and Chrome. In DevTools, check the Console for errors and the Network tab with the Img filter for requests that fail or return 404.
- If there is a console error, note the file. A message such as "is not a function" coming from an app file points to an app conflict rather than to your images.
- Disable app embeds under Online Store > Themes > Customize > App embeds one by one, starting with image optimisers, lazy-load and gallery apps, and retest in preview.
- Inspect the main product image and check its loading attribute. Current Shopify themes load the first image eagerly; if yours says loading="lazy" on that first image, a custom edit probably changed it.
- Re-upload any image whose request returned 404, and replace images hot-linked from other sites with files uploaded to Shopify so they are served from Shopify’s CDN.
- Review the apps list and remove ones you no longer use, then load the page again on a phone over mobile data to see whether images appear promptly.
How to check it's fixed
- With the cache disabled in DevTools and a Fast 4G throttle on, load three different product pages; the main image should render without scrolling or refreshing.
- Repeat in Safari and Firefox, since some of these failures are browser-specific.
- Check the Network tab again and confirm no image requests return errors.
What a QAlaunch scan shows for this
- Broken images and image requests that return 404 or fail to load.
- JavaScript console errors that may stop a gallery from rendering.
- Slow mobile performance in the PageSpeed (Lighthouse) results, including large image payloads.
- It checks whether images load, not whether each one is the right photo for the product.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why do images load in Chrome but not Safari?
Safari and Firefox handle some JavaScript and lazy-loading behaviour differently. An app script that errors only in one browser can stop the gallery there while everything looks fine in Chrome, so always test in more than one.
Will an image compression app fix this?
Not if the cause is a script error or broken lazy loading, and an extra optimisation app can add another script to the page. Shopify already serves resized images from its CDN, so try removing apps before adding one.
How do I find which product images are broken across the store?
Check the Network tab on your best-selling product pages first. For larger catalogues, a crawl or a paid report covering several pages will surface broken image requests faster than clicking through by hand.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the Shopify-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
More for Shopify: all Shopify fixes · Shopify testing · Shopify mobile checkout bugs
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Shopify Community: product images not loading/showing · Shopify Community: product images not loading consistently