Why Shopify Theme Editor and Live Preview Can Differ

This is one of the most common questions I get from merchants and junior developers alike: "It looked right in the editor, why does it look different now that it's live?" It's rarely a bug in the traditional sense. It's usually one of a handful of predictable causes.

The editor renders inside an embedded preview

Shopify's theme editor previews the store inside an iframe whose dimensions can differ from the top-level browser viewport. Layouts that depend on viewport units, embedding context, or specific breakpoints can therefore render differently from the published page in its own browser tab.

The desktop/mobile toggle isn't a real device

The mobile preview toggle simulates a narrower viewport, but it does not reproduce physical-device touch input, mobile browser chrome, or every viewport behavior. Elements that depend on mobile Safari positioning or address-bar changes still need testing on a real device.

Browser chrome eats real viewport height

On an actual phone, the browser's address bar and any bottom toolbar take up real vertical space, and that space changes as the user scrolls. None of that is reflected in the editor's simulated mobile view, which is one reason sticky elements in particular can look fine in preview and cramped on a real device.

Preview state isn't always the same as published state

Unpublished changes, draft content, or settings that haven't been saved yet can render in the editor's preview without reflecting what's actually live. If a change was made in the editor but not fully saved, or a linked app block hasn't synced, the preview and the live store can genuinely be showing different states.

Cached assets on the live store

CSS, JavaScript, and images can be cached by the browser or a CDN layer. After a theme update, a live visitor — or even the developer testing right after publishing — might be looking at a cached version of an old asset for a short period, which can look like a mismatch when it's really just a caching delay.

Different apps injecting content

Some apps inject scripts or elements directly into the live storefront that don't run inside the theme editor's preview context. A review widget, a currency converter, or a personalization app might simply not activate inside the editor iframe, making the live page look different purely because more things are actually running on it.

What this means practically

The theme editor is a good tool for making and previewing changes quickly, but it's not a substitute for checking the actual published store, on a real device, especially before assuming a layout issue is a bug versus an artifact of the preview environment itself. When something looks different live, working through this list — viewport differences, caching, app scripts, unsaved state — usually finds the cause faster than guessing at the code.