Template Docs Commerce APIs Tools
Get Started
Get Started

Custom JavaScript

You can use any custom JavaScript file or library in your Squarespace Template. Squarespace provides a script loader that minifies and combines your custom scripts, which you can use if you like. Alternatively you can package your scripts using the preprocessor of your choice.

Using the Script Loader

Squarespace's script loader minifies your code and allows you to combine all of your JavaScript files into one, cutting down on HTTP requests. Loading JavaScript in Squarespace is very similar to the standard script tag syntax in HTML. The syntax is outlined in the code sample below.

<squarespace:script src="plugin.js" combo="true" />
<squarespace:script src="site.js" combo="true" />

NOTE: The script's src path is relative to the template /scripts folder.

Using your own JavaScript Preprocessor

You can use any JavaScript workflow tool, like NPM, gulp, Browserify or webpack. You can include the compiled code in your /scripts folder, and link to those files using regular script tags, or the Squarespace Script Tag.

Including External Third Party Libraries

You can use libraries hosted on an external server or CDN, but we recommend having a local fallback in case the CDN isn’t available. Here’s an example:

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
   window.jQuery || document.write('<script src="scripts/jquery-2.2.1.min.js"><\/script>')