Overview

Quill is a template language for QUANTM7 storefronts. If you have used Liquid or similar template languages before, the syntax will feel familiar.

How Quill works

A Quill template mixes HTML with template tags. The server reads the template, fills in the data, and sends back plain HTML. The browser never sees the raw tags.

Here is what happens when a page loads:

Template (stored in database)
  → Parser (converts to syntax tree)
  → Context builder (fetches product, collection, store data)
  → Renderer (walks the tree, resolves variables, applies filters)
  → HTML output
  → Sanitisation (scripts stripped for security)
  → Cached page (served until data changes)

Pages load fast because the server does all the work. The HTML is cached and only rebuilt when you change your data. Nothing runs in the browser.

Where Quill runs

Quill templates run in three places:

1. Custom HTML sections in the visual editor. Add a custom HTML section and use template syntax ({{ }} or {% %}) to pull in store data. The editor detects template syntax and provides syntax highlighting, autocomplete, and validation. See the Custom HTML Templates guide.

2. Custom sections built with the section schema system. Define a template and a JSON schema. The editor generates the settings form automatically.

3. Full theme templates for layouts, pages, and snippets. These give you full control over every page on the site.

All three use the same syntax, filters, and objects. The difference is scope. Custom HTML sections are single blocks with global data. Custom sections add schema-driven settings. Themes control the whole page.

What you can access

Quill lets your templates read your store data. These are the main objects:

Each object has properties you access with dot notation: {{ product.title }}, {{ store.currency }}, {{ customer.name }}.

See the Objects reference for complete property lists.

Syntax at a glance

Quill has three types of delimiters:

Filters modify output using the pipe character:

{{ product.price | money }}
{{ product.title | truncate: 30 }}
{{ collection.products | where: 'available', true | size }}

Sections and schemas

Sections are the building blocks of a theme. Each one has a template and a schema. The schema tells the editor what settings to show in the sidebar.

<section class="banner">
  <h2>{{ section.settings.heading }}</h2>
  <p>{{ section.settings.subheading }}</p>
</section>

{% schema %}
{
  "name": "Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading"
    }
  ]
}
{% endschema %}

The merchant edits the heading and subheading through the visual editor. No code changes needed. The schema drives the form automatically.

For Liquid developers

If you have built themes with Liquid before, Quill will feel natural. The tag and filter syntax is the same. There are a few differences in the data model:

The Migration Guide covers the differences in detail.

Next steps

• Syntax Basics to learn the full syntax
• Filters to see every available filter
• Objects to explore the data model
• Custom HTML Templates to use templates in custom HTML sections
• Editor Features for syntax highlighting, autocomplete, and validation
• Context by Page to see which objects are available on each page type
• Section Schema to build configurable sections