Shopify

How to Fix Shopify Theme Errors Without Breaking Your Site

Fix shopify theme errors on a duplicate theme first. Here's where to look, what the error messages mean, and when to call a developer.

A small business owner sits at a counter in a retail shop, calmly working on a laptop with a plain dark screen.

You added a banner, or installed an app, or clicked update on your theme. Now a page is blank, the cart button does nothing, or there's a line of red text where your product photo used to be. It's 9pm, the store is live, and you're one click away from making it worse.

Most Shopify theme errors are small. A leftover snippet from an app you deleted months ago. A customization that stayed behind when the theme updated. Liquid asking for something that isn't there anymore. None of that is hard to fix. What breaks stores is fixing it in the wrong place, on the live theme, with customers on the site.

By the end of this page you'll know how to work on a copy safely, where to look first, and when to stop and hand it to someone else.

Always fix Shopify theme errors on a duplicate theme

The live store is not a workbench. Every edit you make in the code editor on a published theme is live the second you hit save. No preview, no confirmation, no undo button worth trusting.

So make a copy first. In your Shopify admin, go to Online Store → Themes, find your live theme, click the three-dot menu next to it and choose Duplicate. You'll get a second copy sitting in your theme library, unpublished. Rename it something you'll recognize in a week: "Live copy – cart fix – Tuesday" beats "Copy of Dawn (2)".

Now do all your poking around in that copy. Click Customize or Edit code on the duplicate theme, make your change, then use Preview to see it on a real page with real products. Your customers are still being served the published theme the whole time. They see nothing.

If the fix works, you publish the copy and the old one drops back into the library, still intact. If the fix makes things worse, you close the tab and walk away. Nothing happened.

That second option is the whole point. An owner editing the live theme at 9pm, tired, trying one more thing, is the most common way a small error becomes a dead storefront. Not because the edit was stupid. Because there was no way back.

One note on theme limits: Shopify caps how many themes you can store at once. If you're at the limit, delete an old duplicate you no longer need before you start, obviously leaving the live one alone.

Read what the code editor is actually telling you

Shopify tells you what's wrong. It just says it in a place most owners never open.

Go to Online Store → Themes, click the three dots next to your duplicate, and choose Edit code. If a file is broken, Shopify usually flags it at the top of the editor with the file name and a line number. Click through and the cursor lands on or near the problem line.

Two kinds of messages cover most of what you'll see.

A Liquid error names something the theme asked for and couldn't get. It often reads like "Could not find asset snippets/something.liquid" or "Liquid error: Unknown tag." Translation: a line of code is calling a file or a tag that isn't there anymore. Nine times out of ten the file got deleted when an app was removed, and the line calling it stayed behind.

A syntax error means the code is malformed, not missing. These show up most in settings_schema.json and settings_data.json, the files that hold your theme settings. JSON is fussy about punctuation. One extra comma after the last item in a list, or one bracket that never closes, and the whole file fails to load. The error will point at a line number. The actual mistake is often on the line just above it, because that's where the missing character belongs.

Write the message down word for word before you change anything. It's the fastest thing to hand someone later.

The app conflict hiding in your leftover code

Uninstalling an app removes the app. It doesn't always remove what the app wrote into your theme. Snippets stay in the Snippets folder. A line in theme.liquid keeps calling a file that's gone. A script tag keeps loading JavaScript from a service that no longer answers. None of that shows up in your app list, because as far as Shopify is concerned, the app is gone.

That's why this one is hard to catch on your own. You look at the admin, see a clean list of installed apps, and conclude the problem is somewhere else. Meanwhile the storefront is trying to load code from an app you removed months ago.

On your duplicate theme, go to Edit code and use the search box. Search the app's name. Search the vendor's name. You're looking for {% render %} or {% include %} lines pointing at snippets, and for <script> tags in theme.liquid — usually near the top in the head, or just before the closing body tag. Also open the theme editor and check App embeds in the left panel. App embeds can stay switched on after the app is gone.

When you find a suspect line, comment it out instead of deleting it. In Liquid that's {% comment %} and {% endcomment %}. In an HTML block it's <!-- and -->. Save, preview the duplicate, and see if the error clears. If it doesn't, uncomment it and keep looking. Commenting out means you can always put it back.

Keep a running note of what you removed and where. If two leftovers are fighting each other, an app conflict can hide behind the first fix and look like a whole new problem. The note is what tells you it isn't.

Run Theme Check after an update to catch what got left behind

Updating a theme doesn't carry your edits forward. Shopify builds a fresh copy of Dawn, or whatever theme you bought, with the vendor's files. Any section, snippet or setting a developer added for you stays behind in the old version. Publish the new one and the storefront loads pages that are missing half of what they used to call.

It also goes the other way. Theme authors rename settings and restructure sections between releases. A custom section that worked fine last year may be asking for a setting key the new files no longer define, so it renders empty or throws an error on one template only.

Before you publish anything, do this on the updated copy while it's still unpublished:

  • List every file your old theme has that the new one doesn't. Those are your customizations.
  • Copy them over one at a time, previewing after each.
  • Run Theme Check on the theme. It's Shopify's linter, built into the Shopify CLI, and it flags theme errors like missing snippets, undefined objects and deprecated filters before a customer ever hits the page.
  • Preview the home page, a collection, a product page and the cart.

Keep the old theme in your theme library. Don't delete it for a couple of weeks. If something surfaces later, that's your reference for how the page used to be built.

When Liquid can't find what it's looking for

When something is missing, Liquid stays quiet. It prints nothing at all.

Say you had a metafield called specs.warranty and your product template pulled it into a tab. Someone renames the metafield, or deletes the definition, or a data app that created it gets uninstalled. The Liquid tag still runs. It finds nothing, returns an empty string, and the tab renders as a blank box with a heading and no text under it. No error message anywhere.

It gets worse with loops and conditionals. If a section loops over a collection that no longer exists, you get an empty grid. If an if statement checks an object that's gone, the whole block quietly disappears, and a section you paid to have built is just missing from the page.

So when a section looks half-built rather than broken, go looking for a rename. Open the template in the code editor and find every metafields reference in that section. Then open Settings, then Custom data, and check that each one still exists with the exact same namespace and key. Capitalization and spelling have to match.

Blank where content should be is the tell.

Two apps loading JavaScript on the same page break each other

A reviews widget and an upsell tool can both work fine on their own and break each other the moment they load on the same page. The add to cart button stops responding. A popup opens behind the product image. The star ratings show on collection pages but not on the product page. It looks random. It isn't.

Both apps are injecting their own JavaScript and CSS into the same page, and one is overwriting or blocking what the other set up. Whichever loads second usually wins, which is why the same page can behave differently on a slow connection than on a fast one.

Open the page in Chrome, right-click, choose Inspect, and click the Console tab. Red errors there almost always name the file that failed, and the file name usually contains the app's name. That's your suspect.

To confirm an app conflict, work on your duplicate theme. Disable one app at a time, reload the broken page, and check the console again. When the red error disappears, you've found the pair.

Then contact the app's support with a screenshot of the console error and the URL of the page. App developers deal with these conflicts constantly and often have a settings change or a code fix ready. Do not start rewriting their script yourself.

Checkout and cart pages break differently than the rest of the store

Checkout doesn't run on your theme. Shopify hosts it, and on most plans you can't edit those files even if you want to. So a fix you made in a theme file, a snippet you deleted, a script you pulled out of theme.liquid — none of that touches what a customer sees after they click Check out.

The cart sits in between. A cart page is usually part of the theme, but the slide-out cart drawer is often injected by an app, and upsell or discount apps rewrite cart behavior with their own scripts. That's why a cart can break while every product page on the storefront looks fine.

Test these separately. Put a real item in the cart, go all the way through to the payment screen, and note the exact step where things go wrong: the cart page, the first checkout screen, shipping, or payment. Do it once on your phone and once on a desktop.

If the break happens after checkout starts, the cause is almost never your theme code. Look at apps with checkout access, payment apps, discount apps, and anything that installed a tracking pixel. Shopify's Customer Events section is where those pixels live, and a bad one there can stall the page.

Write down which page failed and what you clicked right before. Checkout problems cost you money every hour they sit, so flag them ahead of cosmetic fixes.

Check Shopify's status page and clear your browser cache first

Sometimes nothing is wrong with your store. Open status.shopify.com and look at the components list. If admin, storefront, or checkout is showing an incident, stop working. Any "fix" you make during an outage is a guess you'll have to undo later.

Next, rule out your own machine. Load the broken page in a private window, then in a different browser, then on your phone on cell data instead of wifi. If it looks fine anywhere else, your browser was holding an old copy of the page. Clear the cache and reload. Owners have spent whole evenings chasing a problem that was a stale file sitting on one laptop.

Ask whoever reported it to do the same test. "It's broken on my screen" and "it's broken for customers" are two different jobs.

If the store really is broken and you need it working now, use the theme's version history. In the admin, go to Online Store, then Themes, open the three-dot menu on your live theme and pick version history. Shopify saves a snapshot each time the theme is edited or updated. Find the last timestamp before the problem started and restore it.

That rollback buys you time. It does not tell you what happened, and it will wipe any good changes made after that point, so note what you'll need to redo. Then go find the cause on a duplicate theme, where breaking things costs you nothing.

What to hand a developer so this gets fixed fast

Most of the cost in a theme fix is the developer figuring out what you already know. Write it down before you send the first message.

Four things:

  • The error text, copied exactly. Not "it says something about Liquid." The full line from the admin banner or the browser console, pasted as text, plus a screenshot if the page looks wrong.
  • The page it happens on. The URL. Whether it happens on every product page or one, on desktop or phone, logged in or out, and the first time you noticed it.
  • The theme version. Online Store, Themes, then the theme name and version number shown next to it. Say whether you updated recently, and whether your customizations were made before or after that update.
  • Apps installed and removed in the last ninety days. Both lists. The removed ones matter more, because that's where the leftover snippets and script tags come from. Check your Shopify billing history if you can't remember what you uninstalled.

Add one more line: what you already tried. If you rolled back a version, say which one. If you duplicated the theme and disabled a snippet, say which snippet. A developer who knows you already ruled out the browser cache and Shopify's status page won't spend an hour ruling it out again.

Send it as one message, not six. Same reason you want a full address and a photo of the panel before you roll a truck.

If the list is long, or the store is down and you'd rather hand it off than keep testing, we can sort through it with you — book a New Project Consultation.

More onshopifywebsites

Chris Hobbick

About the author

Chris Hobbick

I build and fix websites, Shopify stores and business software. I work directly with business owners to understand the problem and agree on the work and price.

Meet Chris →

The Newsletter

One useful idea. Once a week.

Practical notes on websites, online stores and the daily work software can help with.

Unsubscribe whenever you want.