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

Template Annotations

Template annotations allow Squarespace 7 to identify each element of your page – like the site title, or a blog post – and allow you to edit those fields right on the page. Annotations are added to your template's markup in the .region, .list, .item, and .block files.

This page will detail each of the template annotations and show examples of how you can add them to your template. Template annotations are optimizations to Squarespace's editing tools. Your template will still work without the annotations.

Content Field

The data-content-field data tag is used in various places throughout Squarespace sites. It has several possible values, listed below.

Site Title

<h1 data-content-field="site-title">{website.siteTitle}</h1>

A shortcut to edit the Site Title. When 'Edit' is clicked, the panel containing the Site Title is opened.

Main Content

<main role="main" data-content-field="main-content">{squarespace.main-content}</main>

Edit the main content of a page. This attribute usually correlates with the placement of the aria role="main" attribute.

<nav data-content-field="navigation-mainNav"></nav>

Identifies one or more of the navigation elements on your site. The navigation value has an optional secondary argument, separated by a hyphen, that accepts the id of a navigation.

Connected Accounts

<div class="social-links" data-content-field="connected-accounts"></div>

Edit your connected accounts.

Title

<h1 data-content-field="title">{item.title}</h1>

Edit the title of an item.

Location

<div data-content-field="location"></div>

Edit your website's location data.

Item ID

<article data-item-id="{item.id}"></article>

This attribute identifies an item that is editable. It usually goes in the .item and .list files that make up your collections.

Collection ID

<article data-collection-id="{collection.id}"></article>

This attribute identifies a collection that is editable. It usually goes in the .list file.

Open Block Fields

<squarespace:block-field id="footerBlocks" label="Footer Blocks" columns="12" />

This attribute provides a label for the open block field. If no label is provided, the label defaults to the ID of the block field.

Index Types

An Index is one or more pages that can be visually grouped together on a single page. There are currently two different index types, grid and stacked. Avenue is an example of a grid index while Pacific is an example of a stacked index. In your index.conf file in the collections folder you can specify which type of index you're using on your site, which will help the Squarespace content editor optimize the content editing on that page.

Stacked: Pages within stacked indexes are edited directly on the index page.
Grid: Pages within grid indexes are typically edited on the individual item page, rather than the index page.

Here's an example index.conf file taken from the pacific index:

{
  "title" : "Index",
  "folder": true,
  "fullData": true,
  "acceptTypes" : ["page", "gallery", "album"],
  "addText": "Add Section",
  "icon": "projects",
  "index" : true,
  "indexType" : "stacked"
}