Custom HTML Templates

Use Quill template syntax inside custom HTML sections to build dynamic, data-driven content blocks.

Custom HTML sections let you drop raw HTML into your storefront through the visual editor. When you add Quill template syntax to that HTML, the server fills in your store data before sending the page to the browser. The result is dynamic content that works with zero client-side JavaScript.

When to use templates in custom HTML

Use templates when you need store data inside a custom section. For example:

A welcome banner that shows the store name and currency
A footer block that pulls in the store address
A collection navigator that loops through all collections
Conditional content based on the visitor's country

If your custom HTML is purely static (no store data needed), skip template syntax. It will render the same way it always has.

Basic example

A static custom HTML section might look like this:

<div class="welcome-banner">
  <h2>Welcome to Our Store</h2>
  <p>Free shipping on orders over £50</p>
</div>

With template syntax, you can pull in real data:

<div class="welcome-banner">
  <h2>Welcome to {{ store.name }}</h2>
  <p>Free shipping on orders over {{ store.currency_symbol }}50</p>
</div>

The server replaces {{ store.name }} with the actual store name and {{ store.currency_symbol }} with the correct currency sign. The browser receives clean HTML with no template tags.

How detection works

The system checks your HTML for {{ }} output tags or {% %} logic tags. If it finds either, the section is processed through the Quill engine on the server. If neither is present, the section renders as plain HTML through the existing client-side path.

This means existing custom HTML sections keep working without any changes. Template processing only happens when you opt in by using template syntax.

Available data

On the homepage, your templates can access these objects:

Object	Example	What it contains
`store`	`{{ store.name }}`	Name, currency, logo, email, phone, address
`store.address`	`{{ store.address.city }}`	Address fields (address1, city, province, zip, country)
`request`	`{{ request.country }}`	Visitor's path, host, country code, locale
`collections`	`{% for c in collections %}`	All store collections (id, title, handle, url)
`page_title`	`{{ page_title }}`	Current page title
`canonical_url`	`{{ canonical_url }}`	Canonical URL for the page
`theme`	`{{ theme.settings }}`	Theme settings object

See the Context by Page guide for what is available on each page type.

Practical patterns

Store information block

<div class="store-info">
  <img src="{{ store.logo }}" alt="{{ store.name }}" />
  <h3>{{ store.name }}</h3>
  {% if store.email %}
    <p>Email: <a href="mailto:{{ store.email }}">{{ store.email }}</a></p>
  {% endif %}
  {% if store.phone %}
    <p>Phone: {{ store.phone }}</p>
  {% endif %}
</div>

<nav class="collection-nav">
  <h3>Browse by Category</h3>
  <ul>
    {% for c in collections %}
      <li>
        <a href="{{ c.url }}">{{ c.title }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>

Country-based content

{% if request.country == 'US' %}
  <div class="shipping-notice">
    <p>Free US shipping on all orders over $75.</p>
  </div>
{% elsif request.country == 'GB' %}
  <div class="shipping-notice">
    <p>Free UK delivery on orders over {{ store.currency_symbol }}50.</p>
  </div>
{% else %}
  <div class="shipping-notice">
    <p>We ship worldwide. Rates calculated at checkout.</p>
  </div>
{% endif %}

Formatted store address

<address>
  {{ store.name }}<br />
  {{ store.address.address1 }}<br />
  {% if store.address.city %}{{ store.address.city }}, {% endif %}
  {% if store.address.province %}{{ store.address.province }} {% endif %}
  {{ store.address.zip }}<br />
  {{ store.address.country }}
</address>

Filters

All Quill filters work inside custom HTML templates. Common ones for this context:

{{ store.name | upcase }}
{{ store.email | escape }}
{{ "Welcome" | append: ", " | append: store.name }}
{% assign domain = store.url | remove: 'https://' %}

See the Filters reference for the full list.

Error handling

If your template has a syntax error (missing endif, unknown filter, etc.), the section will render as an empty block in production. Your storefront stays online. The rest of the page loads normally.

In the visual editor, template errors appear inline with the line number and a description of the problem. Fix the error and the preview updates right away.

See Editor Features for details on the validation and debugging tools built into the editor.

Security

Template output is HTML-escaped by default. The {{ }} tags escape special characters so that user data cannot inject scripts. Two security measures apply to all custom HTML sections:

Script stripping. Any <script> tags in the output are removed before rendering.
Image optimisation. Images hosted on QUANTM7's CDN are converted to responsive <picture> elements with WebP.

If you need to output raw, unescaped HTML from a variable, use the raw filter. Only do this with data you control.

Limitations

Template rendering happens on the server. The output is static HTML. If you need interactive behaviour (click handlers, animations), add that in the custom JavaScript field.
The product and customer objects are not available in homepage custom HTML sections. They require a product page or logged-in session context. Use the objects listed in the Available data table above.
Template errors do not block save. You can save a broken template, but you should fix errors before publishing.