Your store was fine yesterday. Today the add-to-cart button doesn’t work, or the checkout button has vanished, or your product images are stacking weirdly on mobile, and you didn’t touch anything. This is one of the most common support requests Shopify merchants send, and it almost always traces back to one thing: something updated. An app pushed a new version, a theme update installed automatically, or a script tag from an app you forgot about started clashing with something else.
The good news is this is diagnosable in a fairly systematic way, without guessing. This post walks through exactly how to isolate the cause, in the order that actually finds the problem fastest.
Why This Happens on Shopify Specifically
Shopify apps inject code into your storefront in a few different ways: through theme app extensions and app embed blocks (the modern, Online Store 2.0-friendly method), through legacy ScriptTags that inject JavaScript globally, or through direct edits to your theme’s Liquid files during installation (older apps sometimes still do this). Any of these can conflict with:
- Your theme’s own JavaScript, especially around the cart drawer, product page variant selectors, or sticky add-to-cart bars
- Another app doing something similar (two apps both trying to control the cart drawer is a classic conflict)
- A recent theme update that changed a CSS class or JavaScript hook an app was relying on
Because Shopify apps update independently and silently (most auto-update unless you’ve explicitly locked a version, which isn’t standard practice for most merchants), the trigger for a break is often invisible, you didn’t do anything, but an app you installed eight months ago did.
Step 1: Confirm It’s Actually New (and Not Cached)
Before diagnosing anything, rule out a false alarm:
- Open the storefront in an incognito/private window to rule out your own browser cache
- Check on a second device or ask someone else to check
- If it’s a visual issue, hard-refresh (Ctrl/Cmd + Shift + R)
If the issue persists in a clean incognito session, it’s real. Move on.
Step 2: Check the Browser Console First
This is the single fastest diagnostic step, and most merchants skip it. Open your storefront, right-click, choose “Inspect,” and open the Console tab. Reload the page.
JavaScript errors will show up here in red, usually naming the file that failed (e.g. product-form.js or an app’s own script like klaviyo.js or recharge-checkout.js). This alone often tells you which app or theme file is involved, because the error will reference a specific script.
- An error referencing your theme’s own files (often named things like
theme.js,global.js, or matching your theme name) points to a theme-side issue. - An error referencing an app’s script (often the app name or a recognisable slug in the filename) points to that app.
- “Uncaught TypeError” or “is not a function” errors are the classic signature of two scripts trying to control the same element and clashing.
Step 3: Narrow It Down by Disabling Apps
If the console doesn’t give you a clear answer, use elimination:
- Go to Settings > Apps and sales channels in your Shopify admin.
- Note which apps were installed or updated most recently, check each app’s listing or your email for update notifications around the time the issue started.
- Temporarily disable (uninstall or deactivate, depending on the app) the most recently changed app first, then reload the storefront in incognito.
- If the issue disappears, you’ve found your culprit. If not, re-enable it and move to the next suspect.
This is slow but reliable. On a store with a lot of apps, prioritise this order:
- Apps that touch the cart, checkout, or product page (these cause the most visible breaks)
- Apps updated in the last 7 days
- Apps known to inject scripts globally (reviews widgets, upsell/cross-sell apps, page builders, currency converters)
Step 4: Check for Theme Updates and Duplicate Themes
If no app is the cause, check whether your theme itself updated. Some themes purchased from the Shopify Theme Store or third-party marketplaces get automatic updates, and a version bump can change a CSS class name or restructure a section, breaking any customisation built on top of the old structure.
Go to Online Store > Themes and check your theme’s version number against its changelog (usually on the theme developer’s site or documentation). If you or a previous developer made direct code edits to sections that the update overwrote, that’s a common source of a “sudden” break that’s actually a theme update silently reverting a customisation.
This is also why duplicating your live theme before making any manual edits matters, it gives you a known-good version to compare against or roll back to when something goes wrong.
Step 5: Isolate with a Duplicate Theme
For anything non-trivial, don’t troubleshoot on your live theme. Duplicate it (Online Store > Themes > Actions > Duplicate), and test app toggles or code changes on the duplicate first. This protects live sales while you diagnose, and lets you compare the working duplicate against the broken live theme line by line if needed.
Step 6: Check Theme App Embeds and Blocks
Since Online Store 2.0, many apps add functionality through app embed blocks, managed in Online Store > Themes > Customize > App embeds (usually a small toggle icon in the theme editor sidebar). A surprising number of “mystery” issues are actually an app embed that got toggled off during an update, or a new app embed conflicting with an existing one that does something similar (two review apps both trying to inject star ratings, for example).
Go through the app embeds list and check for:
– Duplicated functionality (two apps doing the same job)
– Anything toggled on that you don’t recognise
– Anything that was recently added automatically during an app install
Preventing the Same Conflict From Recurring
Diagnosing and fixing one conflict is useful; stopping the pattern is more valuable. A few habits genuinely reduce how often this happens:
Audit your installed apps periodically, not just when something breaks. Stores accumulate apps over time, a promo tool installed for one campaign eighteen months ago, a reviews app replaced by a better one but never uninstalled. Each dormant app is still injecting code and still capable of causing a conflict when it updates. A quarterly review of what’s actually installed, and what’s actually still needed, catches this before it causes a break.
Keep a change log. A simple shared document noting when apps were installed, updated, or removed, and when theme changes were made, turns “something broke and I don’t know why” into “we updated this app on Tuesday, that’s probably it”, cutting diagnosis time dramatically.
Avoid installing multiple apps that do the same job. Two review apps, two upsell apps, two currency converters, overlapping functionality is one of the most common conflict sources, because both apps are trying to control the same part of the page.
Test major app updates on a duplicate theme when the app allows it, particularly for apps that touch checkout, cart, or product page functionality, treat a major version update the same way you’d treat installing a brand new app, not something to assume will be seamless.
Remove apps properly, not just deactivate them. Some apps leave code (ScriptTags, snippet files, or Liquid edits) behind after uninstalling unless removed cleanly through their own uninstall flow or manually cleaned up, this “orphaned code” is a common source of conflicts that seem to come from nowhere months later, because the app that caused it is no longer even listed as installed.
When to Stop Troubleshooting and Bring in Help
Diagnosing app conflicts is genuinely solvable by a technically comfortable store owner in a lot of cases, the console error step alone resolves plenty of issues. But there’s a point where it stops being worth your time:
- The issue is costing you sales in real time and every hour matters
- You’ve gone through the elimination process and still can’t isolate the cause
- The fix requires editing Liquid or JavaScript directly and you’re not confident doing that on a live store
- It keeps happening, a pattern of recurring conflicts usually means the underlying app stack needs a proper review, not another one-off fix
This is exactly the kind of issue a Shopify support and maintenance retainer is built around, not just fixing the immediate break, but reviewing why your store is fragile enough that a routine app update can take down checkout, and tightening that up so it doesn’t keep happening.
A Quick Diagnostic Checklist
- Confirm it’s real (incognito, second device)
- Check the browser console for JavaScript errors
- Note recently updated or installed apps
- Disable/re-enable apps one at a time, starting with the most recently changed
- Check theme version and changelog for recent updates
- Test on a duplicate theme, not live
- Review app embeds for duplicates or unexpected toggles
- If unresolved, escalate rather than keep guessing
Frequently Asked Questions
How do I know if it’s an app problem or a theme problem?
The browser console is the fastest way to tell, JavaScript errors usually name the specific script file involved, which points to either your theme or a specific app. If the console shows nothing and it’s purely a layout issue, it’s more likely a theme/CSS conflict than an app script error.
Can I just uninstall the app that’s causing the problem?
Usually yes, and it’s often the fastest fix, but check what data or functionality you’ll lose first (a reviews app might hold your review history, a subscription app holds active subscriber data). Deactivating temporarily to confirm the cause is safer than uninstalling outright until you’ve confirmed it’s the actual culprit.
Why did this happen if I didn’t change anything?
Most Shopify apps update automatically in the background, and some themes do too. A change on the app developer’s side, not anything you did, is the most common cause of a store that “broke itself.”
Should I lock my apps so they stop auto-updating?
Shopify doesn’t offer a general merchant-facing setting to block all app auto-updates, since updates often include security fixes. The more reliable protection is testing on a duplicate theme and having a process to check your storefront after major app or theme updates, rather than trying to freeze everything in place.
How long should diagnosing a conflict like this take?
For a single obvious conflict, an experienced developer can often isolate it within 30-60 minutes using the console and elimination method above. Conflicts involving multiple overlapping apps, or issues that only appear intermittently, can take considerably longer.
Next Step
If your store is breaking more often than it should, or you’d rather have someone else on call for exactly this kind of issue, book a call to talk through ongoing support, or start with a Shopify audit to see what’s fragile in your current setup before it causes a bigger problem.
