Templating overview
Storefront page templates are HTML where the dynamic parts are written in braces. You author HTML, CSS, and JavaScript as usual, and the runtime replaces the braces with real values before the page is served.
There are two kinds of placeholders:
- Tokens replace a single value, for example
{brand.store_name}. - Tags control what markup is shown, for example
{each products as=product}...{/each}and{if currentUser.isLoggedIn}...{/if}.
A first example
html
<h1>{brand.store_name}</h1>
{if currentUser.isLoggedIn}
<p>Welcome back, {currentUser.firstName}.</p>
{else}
<a href="/login">Sign in</a>
{/if}
<ul>
{each nav_links as=link}
<li><a href="{link.href}">{link.label}</a></li>
{/each}
</ul>
Token syntax
{object.field}reads a field, and{object.field.subfield}reads nested fields.{{var.name}}reads a project variable created in the designer.- A token that resolves to nothing renders as an empty string. Wrap optional values in
{if}so a missing value does not leave broken markup, and provide a fallback with{else}.
Tag syntax
- Loops:
{each <collection> as=<name> [limit=<n>]}...{/each}. - Conditions:
{if <condition>}...{elseif <condition>}...{else}...{/if}. - Links:
{page_link id=<page_id>}produces the URL for a page. - Blocks:
{block_ref id=<block_id>}and{block_ref code=<code>}embed a reusable block.
Where templates run
The same syntax is used across page templates, reusable blocks, and the built-in system templates (cart, checkout, login, and subscription pages). Tokens such as {cart.count} and {checkout.items} are only populated when the commerce extension is enabled.