How to Add, Update, and Delete jQuery in Squarespace
There are several ways of adding jQuery to your Squarespace site, including using a CDN like Google, or downloading jQuery to your computer and hosting it on your website. You can add any jQuery version to your site via the header or footer code injection.
Different jQuery versions and which one you should use
The best and safest version of jQuery you should add to your site is usually the latest version, which as of right now is jQuery core 3.6.0. It is recommended that you include jQuery using a CDN like Google Hosted Libraries or jQuery Core instead of downloading jQuery and manually adding it to your site, because CDNs can be loaded and cached to browsers, resulting in faster load times.
Because jQuery has been around for such a long time, there are a lot of versions available including 1.x, 2.x, and 3.x versions (about 71 at the time this article was written). If you’ve used jQuery on your site for a while, you more than likely have an older version included, but that doesn’t necessarily mean you need to update it to a newer version if everything on your site is working (more on that in the next section of this article).
With all versions of jQuery, it is best practice to use the minified version, because the file is much smaller and will load faster on your site. If you are using the library from the jQuery website, you will need to manually select the “minified” option. The jQuery versions hosted by Google will automatically be minified.
Adding jQuery to your Squarespace site
Before we get into the tutorial, make sure that you don’t already have jQuery installed on your site, because loading multiple versions of jQuery is not recommended for security and speed reasons.
Navigate to your site’s header or footer code injection via Settings > Advanced > Code Injection > Header. Wherever you choose to add the jQuery reference (header or footer). you will need to make sure it is added before the code snippets ad/or plugins that depend on jQuery.
Copy and paste the following jQuery CDN script to your site’s header code injection and save your changes
The order in which you add jQuery and the dependent code snippets are very important! The jQuery script below must be placed before any of the code files or snippets that use the library, otherwise, the code will not work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Safely upgrade to a newer version of jQuery on your Squarespace site
Let me start this section off by saying if it ain’t broke, don’t fix it. In other words, if you have an older, stable version of jQuery on your Squarespace site (like v1 or v2) and nothing is broken on your site due to the jQuery version, there is no need to risk messing something up by changing versions. However, sometimes you may be using a Squarespace plugin that requires a newer version of jQuery than what you currently use on your site. Unfortunately, it’s not always simple to just switch versions of jQuery, especially if your site uses one of the earlier versions, because you might run into code compatibility issues. Here is the safest way of updating jQuery to your site that is easily undoable in case something goes wrong.
Disable the older version of jQuery by commenting it out. You can achieve this by adding opening and closing comment tags <!-- ... --> around the jQuery script as follows:
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> -->
Add the updated version of jQuery right below the one you just disabled. Save your changes.
View the live version of your site to click around and test out if all of your other plugins and code snippets are still working. Check both mobile and desktop views to make sure both are still working.
If you notice something stopped working when you switched jQuery versions, this means you will not be able to use that version of jQuery on your site. From here you can count back from the latest version of jQuery you just tried, and see if any of the older versions will work as you need them to. For instance, if you just tried jQuery 3.5.0, and then 2.2.4, and so on and so forth.
If one of the newer versions ended up working, leave it as enabled and leave the older version as disabled. I wouldn’t recommend deleting the older version completely until a few days or weeks when you are absolutely sure everything is working as expected. If upgrading to a newer version did not work, delete it and reenable the older one by removing the surrounding comments you added in step 1. You might try contacting the plugin creator to see if they can help to fix this issue.
Safely delete one of many jQuery references on your site
There are some instances where you might have multiple references to different jQuery versions. Sometimes this is necessary because different code snippets or plugins may require different versions of jQuery; however, sometimes the multiple references are unnecessary and can actually slow down your site. Here are some steps to follow so that you can safely remove any unnecessary jQuery references.
If all jQuery references on your site have the same version number (i.e. 3.5.0, or 4.2.1), you can automatically delete the other ones and just keep one. If this is not the case, process to step 2.
Disable one version of jQuery by commenting it out. You can achieve this by adding opening and closing comment tags <!-- ... --> around the jQuery script as follows:
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> -->
View the live version of your site to click around and test out if all of your other plugins and code snippets are still working. Check both mobile and desktop views.
If everything is still working on your site, this means you can safely delete this version of jQuery. If you notice something stopped working when you disabled one of the jQuery reference, this means you should keep that version of jQuery, so enable it again by removing the enclosing comment tags.
Repeat steps 2-4 of this section for as many jQuery versions as you want to test.
If you have finished testing all versions of jQuery on your site using the steps above and it turns out all of them are necessary, then deleting one of them is not an option unless you want to delete the code that depends on it.
Pros and cons of using jQuery on your Squarespace site
jQuery is a library used to shorten and simplify the amount of complicated code that plain JavaScript (also known as Vanilla JavaScript) requires. The reason jQuery is such a popular library among web developers (including myself) is that it allows us to write concise and easier to read code than using plain JavaScript. To give you a better idea of the power of jQuery, the same 3,000 lines of jQuery code that I currently use on my website would be about 3,500 lines in Vanilla JavaScript.
The problem is that the pros of jQuery really only benefit developers and plugin creators; when you consider non-developers, jQuery becomes more of a nuisance than a benefit. In fact, a while ago when I decided to take on the task of removing all jQuery dependencies from all plugins in my store and began to market the them as jQuery-free (no dependencies on external libraries) plugins, I noticed a gradual increase in interest and sales - that’s how much some people prefer not to deal with external libraries on their sites.
The most common reason Squarespace users like you might need jQuery is that a third-party plugin you want to use requires it. In terms of Squarespace plugins, jQuery can complicate things, because plugins are all created by different developers with different coding styles (some better than others). When you start to add multiple plugins and code snippets that were written by different coders, some might work with all versions of jQuery while others might not work with a select few, and when that happens, non-developers most likely have no way of knowing how to resolve the errors without a developer’s help.
Generally, there is nothing wrong with jQuery on its own, but because of the nature of third-party Squarespace plugins, using jQuery can cause things to mess up if not done correctly and frustrate plugin users.
Before you go, check out my Squarespace 7.1 plugin store for a collection of jQuery-free plugins that will level up your site. If you enjoyed this tutorial, subscribe to my email list so that you never miss a new blog post or tutorial.
Free Resources for Designers and Developers
DevTools Minicourse
Get in-depth training on how to use one of the most powerful tools in modern web development.
11-Step CSS Guide
Learn 11 simple ways to improve your custom CSS for cleaner, more understandable code.
Create a Free Product Comparison Table
Create free comparison tables for products, services, pricing packages, and more.
