Over the course of website customizations and installing / uninstalling 3rd party apps, you can introduce code misconfigurations and server errors.
If you’re on Shopify, these are often caused by old or broken app code.
When you uninstall an app from Shopify, it doesn’t always remove ALL the app code from your theme – we regularly find old app code still loading on the sites we optimize.
You can find these errors using the Chrome Dev Tools console, it looks like this:
*FYI that error is likely due to an app that was uninstalled in the Apps section, but the code wasn’t removed from the Theme.
I’ll guide you through the process here but if you prefer to save time, we have a Single Task optimization service you can purchase to have us fix your errors for you.
Console errors can indicate:
- Old app code still loading on your site
- Broken file paths
- Typos in your code
- Misconfigured apps/code
How to Check for Errors
Open Google Chrome and the page you want to test, then use the keyboard shortcut below to open up the Console:
Mac keyboard shortcut
Command + Option + J
Windows keyboard shortcut
Control + Shift + J
Your console might look a little different than the screenshots – I have mine set to a cool dark theme 😎
Here we have a page with a few console errors:
The first 2 lines look to be code typos.
If I click on the file source at the right (index), it opens up the exact position of that error in the Sources tab:
To solve this, I would start by reading more of the code here to get a reference point, then I would search in the theme (starting at theme.liquid) and try to locate the code controlling this.
What I’m guessing here is that they’re using a Shopify liquid variable but it is either empty or has a typo, so it’s producing a blank result.
The 3rd error on this page shows a resource failing to load. In this case, I would look at the domain name (bam.nr-data.net) and try to see where that’s coming from:
This is likely caused by a misconfigured (or uninstalled) app.
The detective work here is to find out which app it belongs to, then reach out to the app developers to get this one solved. I inspect the theme code and use Google search to try and find the connection between this domain and the app/plugin.
Use the Chrome Dev Tools console to identify and fix errors on your site. This is a key step in performance optimization because it helps you spot bottlenecks and unused apps/resources being loaded.