If your Shopify store works in preview but breaks live, the cause is almost always the same: preview and live aren’t identical environments. They render from the same theme code, but the surrounding conditions differ — app embeds are enabled per theme, caching and the CDN serve the published version differently, Markets and geolocation change what a real shopper sees, and some code only runs inside the theme editor. When a page looks perfect in the editor and then falls apart once it’s the live theme, the gap is in one of those layers. The fix is to compare the two environments feature by feature until you find where they diverge. This guide walks through every likely cause.
Preview and live are different environments
It’s tempting to treat “preview” as a faithful dress rehearsal of the live store. It mostly is — but not completely. The theme preview (and the theme editor) runs in a context that has your admin session, design-mode hooks, and often a specific theme’s app settings. The live store runs anonymously, through Shopify’s CDN and cache, under whatever Market and region the visitor is in, using whichever theme is actually published.
So “it works in preview” tells you the code is capable of working. It does not tell you the live conditions match. That distinction is the whole problem — and once you see it, the fix becomes a process of elimination rather than guesswork.
Why it matters
A break that only shows up live is the worst kind, because you can’t see it from the place you were testing. Meanwhile real shoppers hit it first:
- A broken add-to-cart, upsell, or bundle widget that previewed fine.
- Styling that reverts or layout that collapses only on the published page.
- An app feature — reviews, currency, tracking, a countdown — that’s simply absent live.
- Lost sales and eroded trust from the moment you clicked Publish.
Because the editor looked clean, these often go unnoticed until conversions dip or a customer emails. Speed matters: every hour the live theme is broken is revenue leaking.
The specific causes (and how to diagnose each)
1. App embeds and app blocks enabled per theme
This is the single most common cause. App embeds (theme app extensions) are toggled per theme, not per store. If you enabled an app on the theme you were previewing — or the app auto-enabled on a draft — that setting doesn’t travel to the theme you publish. The same is true of app blocks you added to a section. Publish a different theme, or a theme where the embed is off, and the app’s functionality disappears live.
Diagnose: On the live theme, open Online Store → Themes → Customize → App embeds and confirm each app you depend on is toggled on. Check that any app blocks are present in the sections that need them.
Fix: Enable the app embed on the theme you’re actually publishing, re-add missing app blocks, then re-preview that theme before publishing. If an app conflict or leftover code is involved, resolve that too.
2. Caching and the CDN serving old assets
Shopify serves CSS, JS and images through a global CDN with aggressive caching. Right after you publish, the live URL can serve an older cached asset while the preview (which you just loaded fresh, logged in) serves the new one. Your browser cache adds a second layer. The result: preview shows your change, live shows the previous version.
Diagnose: Hard-refresh the live page (Ctrl/Cmd+Shift+R) and load it in a private/ incognito window. Test on a different device and network — your phone on cellular is a clean cache. If the break vanishes after a hard refresh, it was caching.
Fix: Give the CDN a few minutes to propagate, hard-refresh, and confirm across devices. If assets are versioned by filename, a publish usually busts the cache on its own; if you edited a file in place, a cached copy can linger briefly.
3. Markets, currency and geolocation differences
Shopify Markets lets you show different pricing, currency, language, or even content by region. Your preview runs from your own location and admin context; a live shopper in another country may hit a different Market with different currency formatting, translated strings, or region-specific blocks. Geolocation redirects and currency selectors can change layout or break code that assumed one currency or locale.
Diagnose: Test the live store under the Markets your customers actually use — use the market/country selector, or a VPN, to load the store as a shopper in each region. Watch for currency formatting, translated content, and any region-gated section.
Fix: Make templates and any custom code currency- and locale-agnostic (don’t hardcode
$ or assume two decimal places), and verify each active Market renders correctly before
publishing. A live-vs-expected mismatch by region can also surface as
pages behaving differently than you expect in search and for real visitors.
4. Unpublished or missing assets
Preview can reference an asset — an image, a font, a snippet, a metafield, a section — that exists in your working context but isn’t actually published or isn’t present on the live theme. A duplicated theme you’ve been editing may include files the published theme doesn’t. Draft products, unpublished pages, or metaobjects that show for you in admin won’t render for anonymous shoppers.
Diagnose: Confirm every referenced product, page, collection and image is published/active, not draft. Verify the live theme contains the same sections, snippets and assets as the one you previewed.
Fix: Publish the assets, or port the missing files into the theme you’re publishing. This overlaps with the classic case where a theme update replaces files and strands your custom code — the previewed theme and the published theme simply aren’t the same set of files.
5. Code that only runs in the theme editor’s design mode
Shopify exposes a design mode inside the theme editor, and themes fire specific
events (shopify:section:load, shopify:block:select, and related) so sections
re-initialize as you edit. Custom code that hangs its setup on those editor events — or
that checks Shopify.designMode — can run in preview and never run live, because
those events don’t fire on a normal storefront page load. The reverse also happens: code
guarded to skip design mode is invisible in the editor but active live.
Diagnose: Search your custom JS for Shopify.designMode, shopify:section:load, and
similar editor-only hooks. If initialization only happens in those handlers, it won’t run
for a real visitor.
Fix: Initialize on standard load events (DOMContentLoaded, or the section’s own
render) and re-initialize on the editor events, so the code runs in both contexts.
6. Third-party scripts gated by conditions
Analytics tags, A/B tools, consent banners and app scripts often run conditionally —
only on certain domains, only outside admin/preview, only after consent, only when a
cookie or feature flag is set. A script allow-listed for the live domain won’t fire in the
*.myshopify.com preview, and vice versa. Consent-gated scripts won’t run live until the
shopper accepts, changing behavior you never saw while testing logged in.
Diagnose: Open the browser console and network tab on the live store and watch for scripts that fail, 404, or are blocked. Compare which tags fire in preview vs live. Accept/decline the cookie banner and re-test.
Fix: Align the script’s conditions with where it actually needs to run, and test the real consent states. If an app’s script breaks the flow, treat it like an app conflict — isolate and resolve.
Preview vs live comparison checklist
Run this side by side — preview in one window, the live store (incognito, real device) in another:
| Layer | Preview | Live | What to check |
|---|---|---|---|
| App embeds / blocks | Per theme | Per theme | Enabled on the published theme? |
| Caching / CDN | Fresh, logged in | Cached, anonymous | Hard-refresh; test incognito + phone |
| Markets / region | Your location | Shopper’s Market | Currency, language, region blocks |
| Assets | Working theme | Published theme | Everything published & present? |
| Editor-only code | Design mode active | No design mode | Does init run on normal load? |
| Third-party scripts | Preview domain | Live domain + consent | Do tags fire; console errors? |
If a row looks different across the two columns, that’s your break.
How to prevent it: a pre-publish checklist
- Test the preview link on a real device and network, not just inside the editor — log out, use your phone on cellular, and click through the real flows.
- Verify app embeds and app blocks are enabled on the exact theme you’re about to publish.
- Hard-refresh and test in incognito after publishing to rule out caching.
- Load the store under each active Market/region your customers use.
- Confirm all referenced products, pages and assets are published, not draft.
- Publish to a duplicate first where you can, verify, then swap it live.
- Check the console for errors on the live storefront, in the consent states shoppers will actually be in.
Common mistakes
- Only testing inside the theme editor. The editor is the one place that hides most of these differences — admin session, design mode, fresh cache, your own region. Passing there proves the least.
- Assuming an app is on for every theme. Embeds are per theme; publishing a different theme silently drops them.
- Blaming the code first. Nine times out of ten the code is fine and the environment differs — chase the environment before you rewrite anything.
- Testing logged in. Your admin session changes what runs. Real shoppers are anonymous.
When to get help
Handle it yourself when the difference is obvious — an app embed to toggle on, a cache to clear, a Market to account for. Bring in help when the store breaks live and you can’t reproduce it in preview, when multiple layers interact, when custom code behaves differently across environments, or when you’re losing sales while it’s broken. A developer can compare preview and live properly, trace the exact divergence, and fix the root cause so publishing stops being a gamble. That’s what our Shopify development service and theme customization service do; if the break also dented conversions, a free profit audit will surface what else it cost you.
Fine in preview, broken live? Send us your store URL — we’ll compare preview and live, find the app-embed, cache or Markets difference that’s breaking it, and fix it. See our Shopify development service or get a free profit audit.