How do I troubleshoot when a Shopify app breaks my theme?

If a Shopify app breaks your theme, it is usually caused by code conflicts, incorrect installation, or leftover code after uninstalling the app. Follow the structured troubleshooting process below to safely identify and fix the issue without damaging your live store.

Understand How Shopify Apps Integrate with Themes

Shopify apps connect to your theme in three main ways:

• App Blocks: Added through the theme editor and can be repositioned or removed easily.
• App Embeds: Enabled or disabled inside Theme settings → App embeds.
• Custom Code Injection: Some apps insert code directly into theme files.

Theme issues typically occur due to CSS conflicts, JavaScript errors, or leftover injected code.

Step 1: Make Sure the Problem Is Not Local

Before blaming the app, rule out browser or device issues:

• Clear browser cache and cookies.
• Open your store in Incognito/Private mode.
• Test on another device (mobile, tablet, different computer).
• Try a different browser (Chrome, Safari, Firefox, Edge).
• Disable VPN or firewall temporarily.

If the issue appears everywhere, continue to the next step.

Step 2: Check If the App Is Causing the Issue

Method A: Temporarily Uninstall the App

1. Go to Settings → Apps and sales channels.
2. Find the recently installed or updated app.
3. Click the three dots (⋯) next to the app.
4. Click Uninstall.
5. Check your storefront.

Result: If the issue disappears, the app is responsible.

Method B: Test on a Different Theme

1. Go to Online Store → Themes.
2. Add a free theme (such as Dawn).
3. Click Customize and preview it.

If the issue only appears on your original theme, it is likely a theme-app conflict.

Step 3: Check App Blocks and App Embeds

Check App Blocks

1. Go to Online Store → Themes → Customize.
2. Open a page template.
3. Look for blocks labeled with the app name.
4. Remove or disable the block if it causes layout problems.

Check App Embeds

1. Inside the theme editor, click Theme settings.
2. Select App embeds.
3. Toggle off the suspected app.
4. Click Save and preview your store.

Step 4: Remove Leftover App Code (Advanced)

If the issue remains after uninstalling, the app may have left code behind.

Important: Always duplicate your theme first.

1. Go to Online Store → Themes.
2. Click the three dots (⋯) → Duplicate.
3. Click the three dots again → Edit code.
4. Search for the app name or related keywords.
5. Remove only clearly app-related code.
6. Save and preview changes.

Common files to check include theme.liquid, product templates, cart templates, and the Snippets folder.

If you are not comfortable editing code, contact the app developer or hire a Shopify Expert.

Step 5: Restore a Previous Theme Version

If the issue started after editing theme code:

1. Go to Online Store → Themes → Edit code.
2. Open version history.
3. Restore a version from before the issue started.

This will remove recent code changes.

Step 6: Contact App Support

If the app is confirmed as the cause:

1. Go to Settings → Apps and sales channels.
2. Select the app.
3. Click Get support.

Include:

• Description of the issue
• When it started
• Screenshots
• Your theme name and version

Common App-Related Issues

• Broken layout due to CSS conflicts
• Missing buttons caused by JavaScript overrides
• Duplicate content from multiple app blocks
• Slow loading due to heavy scripts
• Mobile display issues from non-responsive app code

Prevent Future App Conflicts

• Always test apps on a duplicate theme first.
• Install one app at a time.
• Keep your theme updated.
• Check compatibility with Online Store 2.0 themes.
• Backup your theme before editing code.

Quick Summary

To fix a Shopify app that breaks your theme, first rule out browser issues. Then uninstall the suspected app to confirm the cause. Disable app blocks or app embeds in the theme editor. If needed, remove leftover code after duplicating your theme. Contact the app developer if the issue continues.