Overview

Quill is a template language for QUANTM7 storefronts. It uses Liquid syntax. If you know Liquid, you know Quill.

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 two places:

1. Custom sections in the visual editor. Add a code-based section next to the built-in ones. The editor handles layout. Quill handles the markup.

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

Both use the same syntax, filters, and objects. The only difference is scope. Sections are single blocks. 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.

Compatibility with Liquid

Quill uses Liquid syntax. Tags, filters, and control flow all work the same way. There are a few small differences:

If you have built Liquid themes before, you already know most of what you need. The Migrating from Liquid 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
• Section Schema to build configurable sections