QUANTM7 Docs

Quick Start

Write your first Quill template in five minutes.

This guide walks you through writing a basic Quill template. By the end, you will understand how to output data, loop through a list, and apply filters.

Your first template

Quill uses double curly braces to output data. Here is the simplest possible template:

<h1>{{ product.title }}</h1>
<p>{{ product.price | money }}</p>

This outputs the product title as a heading and the price formatted as currency. The | money part is a filter. It takes the raw price value and formats it for display (for example, 2999 becomes £29.99).

Adding a condition

Use if tags to show content based on a condition:

{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <span>Sold Out</span>
{% endif %}

Tags use {% %} braces. They control logic but do not output anything on their own.

Looping through a list

Use for to iterate over arrays like product images or collection items:

<div class="product-grid">
  {% for product in collection.products %}
    <div class="product-card">
      <img src="{{ product.featured_image | img_url: '400x400' }}" alt="{{ product.title }}" />
      <h3>{{ product.title }}</h3>
      <p>{{ product.price | money }}</p>
    </div>
  {% endfor %}
</div>

The loop runs once for each product in the collection. Inside the loop, you have access to the current product object and the forloop variable (which tells you the index, whether it is the first or last item, and so on).

Filters

Filters modify output. Chain them with the pipe character (|):

{{ product.title | upcase }}
<!-- Output: SILK BLOUSE -->

{{ product.description | strip_html | truncate: 100 }}
<!-- Output: first 100 characters of the description, with HTML tags removed -->

{{ product.created_at | date: '%B %d, %Y' }}
<!-- Output: July 03, 2026 -->

Filters never change the original data. They only transform what gets displayed.

Variables

Use assign to create a variable:

{% assign sale_price = product.price | minus: 500 %}
<p>Sale: {{ sale_price | money }}</p>

Variables are scoped to the template. They do not affect other templates or the underlying data.

On this page