Fixing JavaScript Issues in Shopify

Where JavaScript on a Shopify store comes from

The difference between the rows matters. App embeds can be switched off per theme without uninstalling anything, which makes testing easy. Pasted code does not know the app has gone, so it keeps loading files that may no longer exist or calling functions nobody defines. And content_for_header must stay in the layout: removing it breaks Shopify features, so the way to reduce what it loads is to remove the apps behind it.

Telling the sources apart in DevTools

Open the product page with DevTools, go to the Console panel and reload. Every error shows a file name on the right. Click it to open the Sources panel, then look at where the file came from:

• Theme files are served from the theme's assets, with /cdn/shop/t/ or cdn.shopify.com and assets in the address, and names such as global.js, theme.js or product-form.js.
• App extension files usually have extensions in the address, along with an identifier for the app.
• Other app files load from the app developer's own domain, which normally names the app.
• Inline code shows the page address itself as the source. Search the theme code for a distinctive word from that code to find which file prints it.

The JavaScript Checker lists every script on the page with its size and execution time and captures the console errors, so running it on the home, collection, product and cart pages gives you the full inventory in one place. In the console, typing Shopify.theme shows the name and ID of the theme being viewed, which is a quick way to confirm you are testing the right copy.

Common Shopify JavaScript errors and what they mean

Some problems throw no error at all. The classic Shopify example is an upsell or bundle app that adds an item to the basket through the cart API while the theme's cart drawer and item count stay unchanged, because the theme only refreshes when its own code makes the change. That needs the app to trigger the theme's refresh, or a setting in the app for your theme; it is a compatibility question for the app developer rather than something to patch in theme code yourself.

The fix, step by step

Loading theme scripts correctly

Most current themes already load their own files with defer. Older themes, and code added by apps or developers, often do not. A blocking script in the head of theme.liquid delays the whole page on every template.

{%- comment -%} Before: script_tag outputs a blocking tag {%- endcomment -%}
{{ 'slider.js' | asset_url | script_tag }}

{%- comment -%} After: same file, does not block the page {%- endcomment -%}
<script src="{{ 'slider.js' | asset_url }}" defer></script>

Load scripts only where they are used. A size-guide script belongs in the product section that needs it, not in the layout for every page. Scripts placed inside a section file load only on templates that include that section.

If you write your own theme code, remember that the theme editor reloads individual sections as merchants change settings. Code that sets things up once on page load will stop working in the editor after a change. Themes handle this by listening for the shopify:section:load event and setting the section up again, and by using web components that initialise themselves when inserted.

Checkout, thank-you pages and old additional scripts

Shopify has moved checkout customisation to checkout extensibility, with tracking handled by pixels under Customer events. Stores that still have code in the older additional scripts box or in checkout.liquid should check the upgrade notices in their admin, because older methods are being retired on Shopify's published timetable. Once tracking runs as a pixel, remove the old code so conversions are not reported twice.

Pixels run in a sandboxed environment, which means they cannot read or change your storefront's page, and they can respect the customer privacy settings you configure. That isolation is exactly why moving tracking into them tends to make storefront pages lighter and less error-prone.

Keeping the store clean

• Prefer apps that use app embeds and app blocks. Their code can be switched off in the theme editor and is removed properly when you uninstall.
• Before uninstalling an app, ask the developer whether it edited your theme and how to remove its code, and check the app's own uninstall instructions.
• Keep a change log of theme edits, including who made them and why, so pasted snippets can be traced later.
• Test theme updates on a copy and re-run the JavaScript Checker before publishing.
• Review your app list every quarter and remove anything no one can name a current use for.

For layout shift and loading speed on Shopify specifically, see the Shopify Core Web Vitals guide.