Directives

This page describes the directives the backend template engine understands. Use them in the page builder via the corresponding backend blocks, or write them directly in coded templates.

Conditionals: `@if`, `@else`, `@elseif`, `@endif`

Show one block when a condition is true, optionally with else branches.

@if(article)
  <h1>{{ article.title }}</h1>
@else
  <p>Article not found.</p>
@endif

@if(condition) — Renders the following content only when the condition is truthy.
@else — Optional; rendered when the @if condition is false.
@elseif(condition) — Optional; additional condition; first matching branch is used.
@endif — Ends the conditional block.

Conditions

You can use:

Word operators (safe in HTML): eq, neq, lt, lte, gt, gte
Example: @if(orders.length gt 0)
Symbols (where allowed): ===, !==, ==, !=, <=, >=, <, >
Logic: and, or, unary !
Property checks: @if(article.author_avatar), @if(related_articles && related_articles.length)

Example with @elseif and array length:

@if(posts && posts.length)
  @foreach(post in posts)
    <article>…</article>
  @endforeach
@else
  <p>No posts yet.</p>
@endif

Loops: `@foreach` … `@endforeach`

Repeat a block once per element in an array.

@foreach(post in posts)
  <article>
    <h3><a href="{{ post.details_url }}">{{ post.title }}</a></h3>
    <p>{{ post.excerpt | default:post.summary | default:'' | raw }}</p>
  </article>
@endforeach

@foreach(item in array) — item is the variable name for the current element; array is an expression that must evaluate to an array (e.g. posts, related_articles).
@endforeach — Required; ends the loop.
@each(item in array) … @endeach — Same loop under another name; either closer works.
@foreach((key, value) in object) — Loop over an object’s keys and values.

Inside the block you can use {{ item.property }}, @if, nested @foreach, and filters.

The `loop` variable

Inside every loop, loop describes the current pass:

Property	Value
`loop.index`	Position, counting from 0
`loop.iteration`	Position, counting from 1
`loop.first` / `loop.last`	`true` on the first / last pass
`loop.count`	Number of items
`loop.remaining`	Items still to come after this one
`loop.even` / `loop.odd`	Based on `loop.iteration`
`loop.depth`	`1` for an outer loop, `2` inside it, and so on
`loop.parent`	The enclosing loop’s `loop`, in a nested loop

For example, an ItemList with a position and no trailing comma:

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"ItemList","itemListElement":[@foreach(post in posts){"@type":"ListItem","position":{{ loop.iteration }},"url":"{{ post.url }}"}@if(!loop.last),@endif@endforeach]}
</script>

loop, like the item variable, exists only inside the loop.

Variables set inside a loop

A variable you @set inside a loop keeps its value after @endforeach, and each pass sees the value the previous pass left. Use it for counts and totals:

@set(shown = 0)
@set(total = 0)
@foreach(product in products)
  @set(shown = shown + 1)
  @set(total = total + product.price)
@endforeach
<p>{{ shown }} products, {{ total }} in total</p>

Because the value carries over, reset a per-item variable at the top of the loop body when only some items set it:

@foreach(product in products)
  @set(badge = '')
  @if(product.on_sale)@set(badge = 'Sale')@endif
  <span>{{ badge }}</span>
@endforeach

Variables: `@set`

Define a variable for use later in the template.

@set(greeting = "Hello")
<p>{{ greeting }}, {{ name }}!</p>

Use when you need a reusable value or a clearer expression. To put a quote of the same kind inside a string, escape it with a backslash, or use the other kind of quote around it:

@set(title = "He said \"hi\"")
@set(title = 'It\'s here')
@set(title = 'The "best" plan')

Directives on one line

Directives work on a line of their own or inline, next to other directives and text. These two are the same:

@if(lang eq 'en')@set(show_banner = 'yes')@endif

@if(lang eq 'en')
@set(show_banner = 'yes')
@endif

Inline you can use @if( @elseif( @else @endif, @foreach( @endforeach, @each( @endeach, @set(, @setSessionItem( @clearSessionItem(, @component( and @yield(:

<ul>@foreach(item in items)<li>@if(loop.first)<b>{{ item }}</b>@else{{ item }}@endif</li>@endforeach</ul>
<a class="btn@if(active) btn--active@endif" href="/">Home</a>

Two directives need their own line:

@extends(…) — On its own line, at the top of the file.
@block(…) — On its own line, directly after a tag (</style> @block("head")), or with its @endblock on the same line (<title>@block("title")About@endblock</title>).

In any other position they are printed as text, and ef lint warns about it. An @ that doesn’t start one of these directives is left as it is, so emails (support@example.com), handles (@yourbrand), CSS at-rules (@media, @font-face, @import) and @ in scripts need no escaping. A word such as @settings or use @set to is text too: a directive needs its (.

Components: `@component`

Include a reusable component by name, with optional arguments.

@component("header", { title: "Home" })

The engine looks up the component by name and renders it with the given arguments in context.

Inheritance: `@extends`, `@block`, and `@yield`

Use a base template and override only certain regions. @yield("name") and @block("name")…@endblock both define named regions in a base layout that child templates can fill. The difference: @yield has no default content (renders empty if not overridden), while @block can include default content as a fallback.

Base template (e.g. layout)

The base defines named blocks that child templates can override:

<!DOCTYPE html>
<html>
<head><title>Site</title></head>
<body>
  @block("content")
    Default content here.
  @endblock
</body>
</html>

Child template

The child declares which base it extends and redefines one or more blocks:

@extends("layout")
@block("content")
<main>
  <h1>{{ article.title }}</h1>
  {{ article.body | raw }}
</main>
@endblock

@extends("pageSlug") — Must be at the top; use the base page’s slug.
@block("name") … @endblock in the child — Replaces the same-named @block or @yield in the base. Only the blocks you define are overridden; the rest of the base layout is used as-is.

`@yield` vs `@block` — when to use which

@yield("name") is a slot with no default content — nothing renders if the child does not provide an override. @block("name") default @endblock has optional default content that renders when no child override is provided.

	`@block("name") default @endblock`	`@yield("name")`
Default content	Yes — rendered when child doesn’t override	No — renders empty
Typical use	Optional sections (header, sidebar, scripts)	Required slots (title, main content, page-level style)

Example base layout using @yield for required slots and @block for optional ones:

<head>
  <title>@yield("title") · My Site</title>
  <style>@yield("style")</style>
</head>
<body>
  @block("header")<header><a href="/">Home</a></header>@endblock
  <main>@yield("content")</main>
  @block("scripts")@endblock
</body>

Child template:

@extends("layout")
@block("title")About@endblock
@block("style").about { padding: 80px 0; }@endblock
@block("content")<h1>About us</h1>@endblock

In the page builder, inheritance is supported with a read-only base layer: only the block regions are editable, and on save only the child source (extends + blocks) is stored.

Session storage

You can store and read simple values in the visitor’s session from templates. Use this for things like remembering a choice across requests (e.g. a selected option, a flag) without using the frontend.

Call	Purpose
`@setSessionItem('key', value)`	Store a value in the session. Use `@setSessionItem('key', null)` to clear that key.
`{{ getSessionItem('key') }}`	Output the stored value, or empty if not set.
`@clearSessionItem('key')`	Remove the key from the session (same as setting it to null).

Rules:

Keys may only use letters, numbers, and underscores (a–z, A–Z, 0–9, _). Other characters are stripped.
Values are stored safely (encoded). You can pass strings or numbers; other types are JSON-serialized. There is a size limit per value (~64 KB).
Clearing: Passing null (or nothing) to setSessionItem removes the key, as does @clearSessionItem('key').

Session length and when it resets

Lifetime: Session data (including values you store with setSessionItem) lasts 3 hours from when the session was first created. The timer does not reset on each page load—so after 3 hours the session expires and all stored values are gone.
When it resets: The session is tied to the visitor’s session cookie. It is cleared when:
- the 3-hour lifetime has passed,
- the visitor clears their cookies,
- or they use a different browser or device (new session).
Use session storage for short-lived, per-visit state (e.g. “has seen this step”, “selected option for this visit”). For long-lived or cross-device data, use a different mechanism (e.g. customer account, database).

Examples:

@setSessionItem('selected_plan', 'premium')
<p>You chose: {{ getSessionItem('selected_plan') }}</p>

@if(getSessionItem('seen_intro'))
  <p>Welcome back.</p>
@else
  @setSessionItem('seen_intro', '1')
  <p>First time here? Read this…</p>
@endif

@clearSessionItem('cart_note')
@setSessionItem('cart_note', null)

Summary

Directive	Purpose
`@if(condition)` … `@endif`	Conditional block
`@else` / `@elseif(condition)`	Else branches
`@foreach(item in array)` … `@endforeach`	Loop (`@each` … `@endeach` is the same)
`loop.index` / `loop.iteration` / `loop.first` / `loop.last`	Position inside a loop
`@set(variable = expression)`	Set variable
`@setSessionItem('key', value)`	Store (or clear with null) session value
`{{ getSessionItem('key') }}`	Output session value
`@clearSessionItem('key')`	Remove session value
`@component("name", args)`	Include component
`@extends("pageSlug")`	Extend base template
`@block("name")` … `@endblock`	Define/override block

Next: Variables and filters.

Get Started

Essentials

Analytics & Metrics

Funnels

Page Events

Pages

Merchants

Affiliates

Integrations

Members Area

Forms & Data

Subscriptions

Emails

Products & Sales

Domains & Customization

Development & Debugging

Frontend Template Engine

Backend Template Engine

CRM

Backend Scripts

Conditionals: `@if`, `@else`, `@elseif`, `@endif`

Conditions

Loops: `@foreach` … `@endforeach`

The `loop` variable

Variables set inside a loop

Variables: `@set`

Directives on one line

Components: `@component`

Inheritance: `@extends`, `@block`, and `@yield`

Base template (e.g. layout)

Child template

`@yield` vs `@block` — when to use which

Session storage

Summary

​Conditionals: @if, @else, @elseif, @endif

​Conditions

​Loops: @foreach … @endforeach

​The loop variable

​Variables set inside a loop

​Variables: @set

​Directives on one line

​Components: @component

​Inheritance: @extends, @block, and @yield

​Base template (e.g. layout)

​Child template

​@yield vs @block — when to use which

​Session storage

​Summary

Conditionals: `@if`, `@else`, `@elseif`, `@endif`

Conditions

Loops: `@foreach` … `@endforeach`

The `loop` variable

Variables set inside a loop

Variables: `@set`

Directives on one line

Components: `@component`

Inheritance: `@extends`, `@block`, and `@yield`

Base template (e.g. layout)

Child template

`@yield` vs `@block` — when to use which

Session storage

Summary