1. Open Shopify admin, go to Online Store > Themes.
  2. Click … > Edit code on the theme you want to modify.
  3. In the Layout folder, open theme.liquid.
  4. Just before the closing tag, paste the jQuery CDN script tag.
  5. Click Save. jQuery is now loaded site-wide.

That is the short version. The long version covers which jQuery version to pick (and why most Shopify-specific code is written for jQuery 3.x), whether to use the CDN or a self-hosted copy, when you should NOT add jQuery (most modern theme code doesn’t need it), and how to handle the conflict that happens when your theme already loads jQuery via a different script.

Key Takeaways
1
Most newer Shopify themes (Dawn and forks based on it) don’t include jQuery by default; adding it is necessary only when a specific app or custom snippet requires it.
2
The standard add-jQuery snippet goes in theme.liquid just before the closing head tag, loaded from a stable CDN.
3
If your theme already loads jQuery (Debut, older Shopify themes), don’t add a second copy: it doubles file size and creates conflicts.
4
For new feature work, native JavaScript usually beats jQuery in 2026 (smaller bundle, no dependency, better mobile performance).

Step 1: Open Theme Code Editor

Log into your Shopify admin. Go to Online Store > Themes in the left sidebar. Find the theme you want to modify (usually your live theme), click the … menu, and select Edit code. This opens the in-browser code editor with your theme’s file structure on the left.

If you don’t see “Edit code” as an option, you don’t have the right staff permission. Ask the store owner to grant you the “Themes” permission under Settings > Users and permissions.

Step 2: Open theme.liquid

In the file tree, expand the Layout folder. Click on theme.liquid. This is the master template that wraps every page on your store. Anything you add to its or just before its closing loads on every page.

Step 3: Add the jQuery Script Tag

Scroll down until you find the closing tag (usually around line 30 to 60 depending on your theme). Just before that tag, paste this snippet:

Three things to notice:

  • jQuery 3.7.1 from code.jquery.com. This is the official jQuery CDN. cdnjs.cloudflare.com works too. The version matters: 3.x is the current stable line. Don’t use jQuery 1.x or 2.x in 2026; they’re missing modern features and have known security issues.
  • integrity hash. The SRI (Subresource Integrity) hash protects against CDN compromise. Modern browsers refuse to load the script if the hash doesn’t match.
  • crossorigin=”anonymous”. Required for SRI to work cleanly with cross-origin scripts.

Step 4: Save and Test

Click the Save button in the upper-right corner of the code editor. Open your storefront in a new tab. Open the browser console (right-click > Inspect > Console) and type jQuery.fn.jquery. If jQuery is loaded correctly, you’ll see the version string (e.g. “3.7.1”). If you see “ReferenceError,” something didn’t save or the script tag is in the wrong place.

Should You Use jQuery on Shopify in 2026?

The honest answer for most stores: probably not. Three rules:

  • If a Shopify app or specific snippet requires it, add it. Some legacy review apps, custom upsell widgets, and older Shopify integrations still depend on jQuery. Adding it is the simplest fix.
  • If your theme already loads jQuery, don’t add a second copy. Check your live theme: view source on your storefront, search for “jquery” in the HTML. If you find an existing script tag, skip this whole guide. Older themes like Debut and many third-party themes include jQuery by default.
  • For new custom code, native JavaScript usually wins. Modern browsers support everything jQuery used to abstract (querySelectorAll, fetch, classList, addEventListener). Skipping jQuery for new code saves you 30KB and removes a dependency that doesn’t get security updates as fast as the language itself.

How to Check Which jQuery Version Your Theme Already Loads

Open your storefront, open the browser console, and type:

typeof jQuery !== 'undefined' ? jQuery.fn.jquery : 'not loaded'

This returns the version string if jQuery is already loaded, or ‘not loaded’ otherwise. If a version is already loaded and it’s older than 3.x, consider upgrading by replacing the existing script tag (don’t stack a newer copy on top; that creates conflicts).

Handling jQuery Conflicts

If your store loads jQuery from two places (theme + manual snippet), the second copy overrides the first. Plugins written for the original version often break. The fix is to pick one source:

  • If the theme loads jQuery, remove your manual snippet and rely on the theme version.
  • If you need a newer version than the theme provides, upgrade the theme’s existing script tag in place; don’t add a second one.
  • If a specific plugin needs an older version, use jQuery.noConflict(true) and namespace the plugin’s jQuery to a unique variable (e.g. var pluginJQ = jQuery.noConflict(true);). This is rare; most modern plugins handle it themselves.

Common Errors and Fixes

  • “$ is not defined” in console. Either jQuery isn’t loaded, or it loaded after the script that tried to use it. Move your jQuery tag to the top of head, or wrap dependent code in document.addEventListener('DOMContentLoaded', ...).
  • Script loads but a plugin fails. Plugin probably needs an older jQuery version. Check the plugin’s docs for the minimum/maximum supported version.
  • Save fails with “Liquid syntax error”. You probably broke a Liquid tag while editing. Undo the edit (Cmd+Z) and try again, this time without disturbing any {% %} or {{ }} blocks.
  • jQuery loads on desktop but not mobile. Some themes conditionally load scripts. Check theme.liquid for {% unless request.user_agent %} or similar logic.