adding JQuery in <head> of theme.liquid breaks my site, but I need to run jquery code in custom.js

Technical Q&A

Topic summary

A developer is experiencing conflicts when trying to use jQuery in their Shopify theme’s custom.js file.

The Problem:

  • Without including the jQuery library via a <script> tag, they encounter an “Uncaught TypeError: $ is not a function” console error
  • Adding the jQuery CDN link to the <head> section of theme.liquid causes the rest of the site and images to break
  • They’re using the “pipeline” theme

Current Status:

  • The issue remains unresolved
  • Another user has asked for clarification about which file (jQuery or custom.js) is being loaded first, suggesting load order may be a key factor in troubleshooting
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

I am running jquery code in custom.js

My code works if I include

in the of theme.liquid, but if I do, the rest of the site & images breaks.

If I don’t include the jquery src… I get a console error:

Uncaught TypeError: $ is not a function

I’m using the “pipeline” theme… not sure what I should do.

2

@koakaya - which file are you loading first? jquery or custom?