Modern Shopify themes rely heavily on JavaScript. When it fails, add-to-cart buttons stop working, sliders freeze, and variants don't switch. Here's how to debug JS in Shopify.
The Console is Your Friend
Open DevTools (F12) and check the Console tab. Red errors are blockers.
- Uncaught ReferenceError: A variable is missing. Often caused by an app being removed but its code remaining.
- $ is not defined: jQuery is missing or loaded in the wrong order.
App Conflicts
Apps often inject script tags that conflict with theme code. To isolate the issue, append ?replace_main_menu=... (just kidding, use a fresh theme copy). Better yet, disable app embeds in the Theme Editor one by one.
Network Tab
Check for 404s on script files. Slow loading scripts can block the main thread. Use async or defer attributes on your script tags to improve performance.
Scope Issues
Shopify sections are independent. Ensure your JS selectors are scoped to the specific section ID to avoid cross-contamination when the same section is used multiple times.
