Skip to main content
The Backend Template Engine renders templates on the server (or in preview) using directives like @if, @foreach, and {{ variable }}. The output is plain HTML sent to the visitor. Use it for content that is fixed at request time, such as product lists, blog posts, conditional sections, or layout structure that does not change after the page loads.
Use {{ }} for backend (server-side) variables. Use [[ ]] for frontend (client-side) values that update in the browser. Both can appear on the same page. For live-updating content (cart, totals, conditional UI), see Frontend Template Engine.
This engine runs last on the server — after the page-events graph has already filled every split-test and dynamic container. An @if wrapped around a container therefore hides the result but does not prevent the container from being filled (or the visitor from being enrolled in the test). See Rendering pipeline for the full order.

When to use it

Use the backend template engine when:
  • Content is fixed at request time - Blog posts, product details, category lists, or any data that does not change while the visitor is on the page.
  • You need conditionals or loops in the HTML — Show or hide blocks with @if / @else, or repeat a block per item with @foreach.
  • You use layout inheritance — A base layout with @extends and @block so child pages only define the changing regions.
If the content depends on the visitor and must update without reloading (e.g. cart items, totals, coupon status), use the Frontend Template Engine instead.

Page builder vs coded templates

So:
  • In the page builder: Use the backend blocks (If, Else, Foreach, Set, Component, Extends, Block) so the correct @… directives are emitted.
  • In coded templates: Use @if, @else, @foreach, {{ }}, @set, @component, @extends, @block directly.

What the engine provides

Details and examples are in Directives, Variables and filters, and Products, categories & shipping (catalog and shipping profile functions).

Relation to other docs

  • Frontend Template EngineOverview, Syntax: client-side [[ ]], <template-if>, <template-foreach>, etc.
  • Backend Template Engine (this section) — Server-side {{ }}, @if, @foreach, filters, inheritance.
Next: Directives.