Fix Shopify Product Images: Desktop Disappearing Act Solved

Ever had one of those head-scratching moments where something on your Shopify store just… vanishes? Especially when it works perfectly fine on mobile, but disappears into thin air on a desktop browser? If you’ve experienced product images doing a disappearing act on specific products, you’re definitely not alone. It’s a frustrating bug that recently popped up in the Shopify community, and thanks to some brilliant detective work, we’ve got the full scoop on why it happens and, more importantly, how to fix it.

The Case of the Vanishing Product Images

The issue started with a store owner, chaserchim, who noticed their product images were completely gone on desktop views for certain products, yet looked perfectly normal on smaller screens. What made it even more baffling was that it was consistent across all themes they tried. They’d checked image assignments, cleared caches, and even tried reverting code changes, but the problem persisted. Sound familiar?

Another helpful community member, Ros222, quickly jumped in to confirm the initial diagnosis: the images weren't actually missing; instead, the desktop product media column was collapsing to 0px wide. This meant the images were technically loading, but there was no space for them to display. Ros222 suggested checking custom CSS around elements like .product-information__media or media-gallery, and even considering global CSS injected by an app, given the "across all themes" symptom.

The Hidden Culprit: Non-Breakable Spaces!

But the real "aha!" moment came from tim_tairli, who dug deep and found the surprising root cause. It turns out the problem lay not in the images themselves, but in the product descriptions of those particular products! Specifically, the "Ingredients" section in those descriptions contained what are called "non-breakable-spaces," represented by the HTML entity .

Now, what’s so bad about a non-breakable space? Well, it effectively tells the browser to treat a series of words connected by these spaces as a single, incredibly long word. Imagine your entire ingredient list, like "Water Sugar Salt Flour," being read as one giant string "WaterSugarSaltFlour."

Here’s a peek at what those pesky symbols look like lurking in your code:

This "single word" then interacts with a known CSS Grid bug (CSS grid doesn't support word-wrap, overflow-wrap and hyphens properties). Essentially, when the browser tries to calculate the width of your product info wrapper (which often uses CSS Grid for layout), it initially accounts for the massive length of this "single word" before applying any word-wrapping rules. The result? The layout gets stretched out, pushing the product image column to a zero width, making your images vanish!

Your Action Plan: How to Fix Disappearing Product Images

Thankfully, there are several ways to tackle this, ranging from a quick clean-up to a more robust CSS solution. Here’s what the community recommended:

Option 1: The Manual Clean-Up (Recommended First)

This is often the best first step, especially if you don’t have a huge number of affected products. It also has the added benefit of potentially improving your SEO, as search engines prefer clean, properly formatted content.

Go to your Shopify admin and navigate to Products.
Find an affected product and click to edit it.
Scroll down to the Description section.
Click the <> button in the rich text editor toolbar to switch to HTML view.
Look for the symbols, particularly within sections you might have copy-pasted (like ingredient lists).
Carefully replace each instance of with a regular space.
Save your product changes and check the product page on your live store.

Option 2: The Quick CSS Patch (Great for Many Products or Immediate Fix)

If you have many products affected, or just want a faster site-wide solution, adding a bit of custom CSS can fix it. This tells the browser to break words more aggressively, preventing the layout from stretching.

From your Shopify admin, go to Online Store > Themes.
Find your current theme, click Actions > Edit code.
In the left sidebar, under "Assets," find a file like theme.css, base.css, or custom.css. If your theme has a "Custom CSS" section in Theme Settings (often under the cog icon), that's even better!
Paste the following code into the bottom of the file or the Custom CSS section:

/* prevent stretching of grid parents if very long words 
   https://github.com/rachelandrew/gridbugs/issues/46
*/
.text-block.rte * { 
  word-break: break-word;
}

Here’s a visual of the difference this small piece of code can make:

Before:

After:

Option 3: The Targeted CSS Fix (For Specific Layouts or Advanced Users)

If the general word-break: break-word; causes unintended side effects elsewhere (which is unlikely but possible), you might opt for a more specific CSS solution that targets the grid column sizing directly. This is a bit more advanced, as it deals with specific theme class names and media queries.

Follow steps 1-3 from Option 2 to access your theme's CSS.
Paste the following code:

/* prevent stretching of grid parents if very long words 
   https://github.com/rachelandrew/gridbugs/issues/46
*/
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr minmax(0,1fr);
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: minmax(0,1fr) 2fr;
    }
  }

A Note on Copy-Pasting and Community Spirit

This whole situation highlights a common pitfall: when you copy-paste content from external sources (like Word documents, other websites, or even some rich text editors), you can inadvertently bring over hidden formatting or special characters like . To avoid this in the future, it's often best to paste content as plain text first (e.g., paste into Notepad or use "Paste as plain text" in your editor) and then reformat it within Shopify.

And let's give a huge shout-out to community members like tim_tairli and Ros222! Their willingness to dig deep and share complex solutions is what makes the Shopify ecosystem so powerful. In fact, tim_tairli even suggested that chaserchim leave a review on the Horizon theme page with a link to the discussion, so the theme developers could incorporate a fix into future versions. That's the spirit!

So, if your product images are playing hide-and-seek on desktop, you now know where to look. It's often the little things, those hidden characters, that can cause the biggest headaches. But with a bit of detective work and the right fix, you can get your store looking perfect again.

Shopify Product Images Disappearing on Desktop? The Hidden Fix!