Is your Shopify theme suddenly broken after installing an app? Maybe your header shifted, buttons stopped working, sections disappeared, or your store layout looks distorted.
This usually happens because a third-party app added scripts (JavaScript or CSS) that conflict with your theme. But don’t worry — you can fix this! This tutorial is written so any store owner can follow it without being a developer.
💡 Why Do App Script Conflicts Happen?
Shopify apps often add:
- JavaScript files (functions that run on your pages)
- CSS styles (that may override your theme’s design)
- Code snippets inserted into your theme
Sometimes these files clash with your theme, causing layout issues.
🧭 Step 1 — Identify Which App Broke Your Theme
Ask yourself:
- When did the issue start?
- What app did you install or update recently?
90% of the time, the issue comes from the most recently installed or updated app.
If you’re unsure, check your Shopify activity:
Shopify Admin → Settings → Activity
🚨 Step 2 — Disable (Not Delete) the App
Before removing anything permanently, try disabling the app first.
Go to Shopify Admin → Apps → App you're testing
Look for:
- “Disable app”
- “Pause app”
- “Unpublish widget”
- “Turn off app embed”
If the problem disappears after disabling the app, you found the cause.
🔌 Step 3 — Turn Off App Embeds (Most Common Fix)
Most modern Shopify apps add their scripts through App Embeds.
Go to:
Online Store → Themes → Customize
Then bottom-left:
App Embeds
Toggle off embeds one by one to see which app restores your layout.
🧽 Step 4 — Remove Old or Unused App Code Snippets
Some apps leave code behind even after uninstalling. This leftover code can break your theme.
Check for files like:
- snippets/app-name.liquid
- assets/app-name.js
- assets/app-name.css
You can remove these if the app is no longer installed.
How to remove:
- Go to Online Store → Themes → Edit Code
- Search for the app name in the file search bar
- Delete only files clearly belonging to the app
Example: If you uninstalled "ReviewMagic", delete files like:
- snippets/reviewmagic-widget.liquid
- assets/reviewmagic.js
- assets/reviewmagic.css
🧱 Step 5 — Remove App Code from theme.liquid
The theme.liquid file often contains leftover script tags.
Open:
layout/theme.liquid
Look for code like:
Delete ONLY app-related code you recognize.
🧪 Step 6 — Test Your Store
Now test your store on:
- Desktop
- Mobile
- Incognito mode
This ensures cached scripts aren’t fooling you.
🔧 Step 7 — If Unsure, Duplicate Your Theme Before Editing
Always duplicate your theme before making changes:
Online Store → Themes → ••• → Duplicate
This gives you a safe backup you can revert to.
🛠️ Bonus Fix — Add “Script Isolation” Wrapper (Advanced but Safe)
Some apps break layout because they affect global elements. You can isolate their script so it only runs inside a specific div.
Wrap their code like:
{% render 'app-name' %}
This prevents CSS from affecting the rest of the page.
🎉 You're Done!
Your store layout should now be fixed. These steps solve 95% of app conflict issues for non-technical store owners.
Remember: Apps don’t always play nicely with each other. Following these steps protects your theme from breaking again.
🚀 Want Another Tutorial?
Just tell me which topic you want next, and I’ll create another full HTML article!