Why does my product page crash the theme editor when the live preview works fine?
The theme editor throws an error or freezes on your product page, but the storefront preview link works perfectly. Here's why that split happens and how to isolate the app or block causing it.
What's going on
My product page loads fine when I preview the storefront directly, but the second I try to open it in the theme editor under Online Store, Themes, Customize, it either throws a generic error, freezes on a spinner, or the whole customizer panel collapses. It only happens on this one template. Is my theme broken, or is this a Shopify bug?
This is a genuinely confusing failure mode because it inverts the usual troubleshooting instinct: if the storefront itself was broken, you'd suspect your Liquid code. But when the live page renders correctly and only the editor breaks, the problem is almost always something that only runs, or runs differently, inside the theme editor's environment, most often a JavaScript conflict introduced by an app block or app embed on that specific template.
Why it happens
The theme editor doesn't just render your storefront, it also loads the extra JavaScript that powers drag-and-drop section reordering, live settings updates, and other editing features, none of which run on a plain storefront page. A script from a theme customization, or more commonly a third-party app's block or app embed, can throw an uncaught JavaScript error that the plain storefront simply ignores or fails on quietly, but that crashes the surrounding editor because the editor's own scripts expect a clean execution environment.
Product pages are especially prone to this because they tend to accumulate the most app blocks of any template: reviews, upsells, size charts, countdown timers, badges, popups, and mega menu triggers all commonly target the product information section. Any one of them initializing twice, querying a DOM element that doesn't exist yet in editor mode, or conflicting with another app's script can be enough to crash the customizer while leaving the storefront untouched.
A smaller number of cases come from schema issues rather than JavaScript: a block reference left in a JSON template after the block was deleted from the section's schema, or a setting referencing a metafield or resource that no longer exists, can make the editor refuse to load a page with a compatibility error even though the storefront renders using cached or fallback values.
5 ways to fix it
Duplicate the theme, then disable app embeds one at a time
Go to Online Store > Themes, click the ... menu next to your live theme, and choose Duplicate. Open the duplicate in the editor, not your live theme, so you're free to experiment without risk. In the duplicate, open the theme editor's app embeds panel and toggle app embeds off one by one, reloading the customizer after each toggle, until the crash stops. This isolates whether an app's global embed, rather than a block, is the trigger, which is the most common cause of editor-only breakage.
Remove app blocks from the product section, then re-add them one at a time
If disabling embeds doesn't fix it, go into the product template's product information section in the duplicate theme and remove any app blocks that were added there. Save, refresh the customizer, and confirm the crash is gone. Then re-add the app blocks one at a time, refreshing the editor between each, to find the specific block responsible. Once identified, check that app's block settings for anything unusual, such as a reference to a deleted field, or contact the app's support with the exact error.
Check the browser console for the actual JavaScript error
The theme editor loads extra JavaScript beyond what the plain storefront runs, to power live previews and drag-and-drop editing, so a script that throws an uncaught error can crash the surrounding editor even though the storefront simply ignores it. Open your browser's developer tools (F12), reproduce the crash, and read the Console tab for the failing script and line number. This usually points straight at the offending app's JS file, or a theme script conflicting with it, without needing to disable anything first.
Rule out browser-side interference
Before assuming it's a code conflict, test in an incognito or private window with extensions disabled, and try a different browser. Ad blockers, privacy extensions, and stale cached editor assets are a known cause of theme editor failures that have nothing to do with your theme or apps at all, and this five-minute check can save a long debugging session.
If it's a specific block or section, validate the schema
For custom or heavily edited sections, use Theme Check, available through Shopify CLI or as inline warnings in the online code editor, to catch invalid schema JSON, references to settings that no longer exist, or blocks left in a JSON template after being deleted from the section file. This is a known cause of the theme editor refusing to load a page. Fixing the schema error directly is usually faster than working around it once you've narrowed down which section is at fault.
Bottom line
Editor-only crashes are almost always a JavaScript conflict between an app's script, whether a block or an embed, and the theme, surfaced by the extra editing JavaScript the theme editor loads that a plain storefront preview never touches. Work through it in a duplicate theme so you never risk the live storefront, isolate the culprit by toggling embeds and blocks off one at a time, and check the browser console for the actual error before guessing. If the offending piece turns out to be a popup, mega menu, or similar overlay app, favor apps that are upfront about whether they use an embed or a block, since that makes conflicts like this much faster to diagnose next time.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.