How To Add jQuery To Your Shopify Theme – 5 Minute Fixes

Are you trying to add jQuery to your shopify theme? This tutorial will show you how to add jQuery to your Shopify theme in only 5 minutes.

This tutorial requires you to modify the code of your Shopify store’s theme. It’s recommended to back up your theme before proceeding

1. Open your Shopify admin

Open up your Shopify admin, that’s the place where you manage your products and orders. You can also use the button below as a shortcut.

2. Go into the online store page

You can find the online store tab in the middle left of your screen in the Shopify admin.

How To Add jQuery To Your Shopify Theme - Part 2 - Open Your Dashboard

3. Click Actions > Edit code

Click the Actions button, it will reveal a dropdown, then click the “Edit code” button.

How To Add jQuery To Your Shopify Theme - Part 3 - Edit your theme code

4. Click “theme.liquid”

You can find this file near the top of the file explorer section on the left of your screen, under “Layout”, click the file named “theme.liquid”. This will open up the file that we need to edit.

5. Insert the jQuery code

We need to put the jQuery code in between the opening and closing <head> tags.

The code we need to insert is shown below. Please copy it now.

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">
</script>

We will now paste this into our theme.liquid file between the <head> tags, you can see where I placed mine below

How To Add jQuery To Your Shopify Theme - Part 5 - Insert the jQuery include script

jQuery should now be successfully loaded inside your Shopify theme. You now know how to successfully add jQuery to your Shopify theme. If you are having trouble with this tutorial or some of my content is outdated just let me know in the comments below.

jQuery these days is a heated subject with strong opinions on wether it should be still be used as commonly. You can read about that here if you are interested. It’s mostly relating to efficiency and bloating.