How to Add jQuery to Shopify Themes: A Quick Guide

If you are working on a custom Shopify theme or trying to implement specific JavaScript modifications, you might run into a common issue. When you open your browser's developer console and type jQuery, you may see the following error:

Uncaught ReferenceError: jQuery is not defined

This happens because modern Shopify themes do not pre-package jQuery by default. However, adding it to your store is a straightforward process. In this tutorial, I'll walk you through exactly how to add jQuery to your Shopify theme so you can start using it immediately.

Step 1: Get the jQuery Script

First, we need to grab the official library source code.

1. Navigate to releases.jquery.com.
2. Locate the version you wish to use (usually the latest release is best).
3. Click on the Minified link.
4. A window will pop up with a script tag. Copy this code to your clipboard.

Step 2: Edit Your Shopify Theme Code

Next, we need to inject this script into the head of your website so it loads on every page.

1. Log in to your Shopify Admin.
2. Go to Online Store > Themes.
3. Click Actions (or the three dots) > Edit Code.
4. In the layout folder, open the theme.liquid file.
5. Scroll down to find the closing </head> tag.

We are going to paste the script right before this closing tag. It is good practice to add a comment so you remember why this code is there.

  <!-- jQuery Add -->
  <script src="https://code.jquery.com/jquery-3.x.x.min.js" integrity="..." crossorigin="anonymous"></script>
</head>

Once pasted, click Save in the top right corner.

Step 3: Verify the Installation

To ensure everything is working correctly:

1. Navigate back to your storefront.
2. Open your Developer Console (Right-click > Inspect > Console).
3. Type jQuery and hit Enter.

Instead of an error, it should now return the jQuery function (e.g., f (e, t) { ... }).

Conclusion

Because we added this script to the theme.liquid head element, jQuery is now loaded globally. You can now utilize jQuery selectors and functions (like grabbing <a> tags or manipulating DOM elements) within any section, snippet, or asset file across your entire Shopify store.

If this guide helped you solve your issue, please feel free to share it with other developers!