Quick Start Beginner Tutorial

Template Overview What is JSON? View JSON Data Templating Basics

Template Configuration Layouts & Regions Template Partials Menus & Navigation Folders & Indexes Collections Static Pages

What is JSON-T? JSON-T Directives JSON-T Predicates JSON-T Formatters JSON-T Helpers JSON-T System Variables

Open Block Field Navigation Tag Category Tag Custom Query Tag

Custom JavaScript Image Loader

Local Development Custom Post Types Template Annotations Style Editor Error Reporting URL Queries

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>
<script>
   window.jQuery || document.write('<script src="scripts/jquery-2.2.1.min.js"><\/script>')
</script>