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.
What to read next
- Quill Overview for a broader look at how Quill fits into QUANTM7
- Syntax Basics for the full syntax reference
- Filters for every available filter
- Objects for all the data you can access in templates