Quick answer: Before fixing anything, duplicate your theme and work on the copy. Then diagnose the problem: is it caused by an app, a recent change, a browser or device issue, or a theme setting? Most "broken theme" problems trace back to leftover app code, a recent edit, or a section setting. Test on phone and desktop before publishing.
Themes break in ordinary ways. Here are seven problems we see most, with the likely causes and safe fixes.
First, the safe-fix routine
- Duplicate the theme (Online Store โ Themes โ Actions โ Duplicate). Never experiment on your live theme.
- Note what changed recently: a new app, a theme edit, a Shopify update.
- Reproduce the problem on a specific page and device.
- Fix on the copy, test on phone and desktop, then publish the copy (or copy the fix across).
1. Layout looks broken or overlapping on mobile
Likely causes: custom CSS from an old edit, a section with fixed widths, an app adding elements. Fix: open the page on a phone or use your browser's mobile preview, right-click and inspect the element that overflows. Remove or adjust the offending CSS or section setting. Make sure grids use flexible widths.
2. Horizontal scrolling on mobile
Likely causes: an image, table or section wider than the screen. Fix: find the element sticking out (inspect, look for widths greater than 100%), then constrain it with max-width. Avoid hiding the problem with overflow rules that cut content off.
3. The Add to cart button doesn't work
Likely causes: JavaScript errors from an app, a variant mismatch, a theme update that conflicted with custom code. Fix: open your browser's console (right-click โ Inspect โ Console) and look for red errors. Disable recently installed apps in the duplicate theme one at a time to find the culprit. Test every variant.
4. Sections don't show or can't be edited in the theme editor
Likely causes: an older (pre-OS 2.0) template, a missing section file, a settings schema error. Fix: check that the page uses a JSON template with sections, and that the section file exists. If a recent code edit caused it, compare against the previous version of the theme (Shopify keeps a history for some changes) or the original theme download.
5. The site got slower
Likely causes: new apps, huge images, extra fonts, scripts left over from uninstalled apps. Fix: audit apps and code (see our app audit guide), resize images, and check Core Web Vitals (our guide).
6. Fonts or colors look wrong
Likely causes: a theme setting changed, a custom font not loading, CSS overrides. Fix: check Customize โ Theme settings โ Typography and Colors. If a custom font was added, confirm the font files load and have fallbacks. Limit the number of fonts to keep pages fast.
7. Images are blurry, cropped or the wrong size
Likely causes: low-resolution uploads, mixed aspect ratios, a theme setting that crops images. Fix: upload larger source images with consistent proportions, and adjust the theme's image ratio settings. See our photography guide.
Problems that point to something deeper
- Errors that appear only after uninstalling an app (leftover code).
- Issues that vary by browser (Safari vs. Chrome).
- Checkout problems. Remember that Shopify's checkout is hosted, so theme code usually isn't the cause. Check apps and checkout settings.
- Anything involving customer data or payment. Be cautious and get help.
How to avoid problems in the first place
- Back up the theme before changes.
- Make one change at a time and test it.
- Prefer theme settings and sections over custom code where you can.
- Remove unused apps and their code.
- Keep notes on what you changed and when.
- Freeze changes before big sales. See our Black Friday checklist.
When to call for help
If the problem costs you sales, affects checkout, or you're not sure what you're looking at, don't guess. We find the real cause, fix it on a safe copy, test on mobile and desktop, and send a plain-language explanation of what was wrong. See our bug fixing service, or request a quote. If you need a small feature your theme lacks, our custom section development builds it properly.
Frequently asked questions
How do I fix my theme without breaking my live store?
Duplicate the theme, work on the copy, test on mobile and desktop, then publish.
Why did my site break after uninstalling an app?
Leftover app code in the theme can cause errors. Search your theme and app embeds for the app's name and remove remnants carefully.
Why is my Add to cart button not working?
Often a JavaScript error from an app or custom code. Check the browser console and test by disabling apps on a duplicate theme.
When should I hire a developer?
When the problem affects sales or checkout, involves custom code you don't understand or keeps coming back.
Related services
- Shopify Bug Fixing & Troubleshooting โ the real cause found and fixed, with a plain-language report
- Custom Shopify Section & Feature Development โ custom sections you can edit in the theme editor
- Shopify Site Speed & Performance Optimization โ an audit of apps, scripts, images and theme code
