Template Overview

Each Squarespace Template is made up of smaller templates and configuration files. This section will help you understand the purpose of each file and how they are organized.

Languages and Filetypes

In addition to standard front-end code languages (HTML, CSS, JavaScript), our templates are powered by the following languages and pre-processors:

JSON Template

Most template files are written in JSON Template. It is an easy to use, easy to read, minimalist template language. These are templates for HTML so they can be opened as HTML files in your editor.

You should go read the JSON Template Docs if you are not already familiar with JSON-T.

LESS CSS

Template CSS files (.css or .less) are processed through LESS. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Template Structure Overview

Squarespace templates are organized using the following folder structure:

/assets/ design assets: images, fonts and icons
/blocks/ block files — .block, .block.conf
/collections/ collection files — .list, .item, .conf
/pages/ static page files — .page, .page.conf
/scripts/ Javascript — .js
/styles/ stylesheets — .css, .less
/ sitewide templates and configuration — .region, template.conf

Templates may or may not include all of the folders listed above. If a template is missing one of the folders listed on this page, the folder can be added it using SFTP or Git.

Each template is made up of a collection of template files. Template files fall into three categories: site-wide files, collection-specific files, and block-specific files.

Template Structure Detail

A deeper look at the files and folders you will find in every Squarespace template.

/assets/

This folder is a general purpose storage folder for template assets: Images, Icons, Web Fonts, etc. There is a 1MB file size limit on each individual file uploaded to /assets/. After uploading, your template assets are accessible via:

http:/yoursitename.com/assets/your-asset-file.png

/blocks/

In this folder, you will find the templates and configuration files for Squarespace blocks. These templates let you customize the HTML behind the various content types that users can add using the page builder. These are primarily used to configure navigations.

  • .block - Block template files. (JSON Template)
  • .block.conf - Block template configuration settings. (JSON)

See Blocks for more details.

/collections/

In this folder you can define the presentation for the various kinds of content in your template. You can have an unlimited number of collection types in each site. Each collection can be configured to support specific post types and can be sorted chronologically (like a blog) or user ordered (like a gallery). Each collection must have a configuration file and at least one .list or .item file.

All .list and .item files are written in JSON Template.

  • .list - Templates for the list view of a collection. Example: blog.list templates a list of blog posts. This is the default view of every collection. (JSON Template)
  • .item - Templates for the individual page view (permalink) of a collection item. Example: blog.item templates a single blog post page. If a .list file is not provided, the .item will become the default template for the collection (redirecting visitors on the first individual item page instead of the item list page). (JSON Template)
  • .conf - Contains the configuration settings for a collection. There is one configuration file for each collection. (JSON)

See Collections for more details.

/pages/

This folder contains static site HTML pages. These are a special type of collection that do not inherently have data of their own. These pages can not be modified within the Squarespace interface by the end user.

  • .page - HTML markup for a page. (JSON Template)
  • .page.conf - Contains configuration settings for a page. (JSON)

/scripts/

This folder contains the scripts for your website. To include a script in your template, in the <head> area of your template, use:

<squarespace:script data-preserve-html-node="true" src="your-script.js" combo="true"/>

This syntax will ensure that your script is loaded via the proper URL, and Squarespace will automatically attempt to merge multiple scripts into a single download if the combo parameter is set to true.

See Custom Javascript for more details.

/styles/

This folder contains the CSS styles for your website. All Squarespace CSS is processed using less.css syntax. To include CSS files in your template, edit the template.conf and list the files in the order you wish to include them. For example:

"stylesheets" : [ "global.css", "my-site.less", "another-style.less" ]

All stylesheets added to the template.conf in this way will be merged and served as one CSS file automatically. You do not need to add any stylesheet links to the HEAD section of your site.

NOTE: Adding a reset stylesheet

If you add a file named reset.css to the /styles/ folder it will automatically get added to the top of the site.css file. It should not be listed in the "stylesheets" variable in template.conf

site.region

Typically this file is used as the global site wrapper template – containing the site header, footer, and sidebars. Every template must have at least one .region file. Simple templates will have a single .region, more advanced templates will have multiple .region files describing header, body, and footer variants.

See Layouts & Regions for more details.

template.conf

Contains the configuration settings for the template. This is where you can name your template, specify layouts, add navigation sections, specify stylesheets to be rolled up into site.css, and other general site options.

See Template Configuration for more details.