@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.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
@extendsand@blockso child pages only define the changing regions.
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,@blockdirectly.
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 Engine — Overview, Syntax: client-side
[[ ]],<template-if>,<template-foreach>, etc. - Backend Template Engine (this section) — Server-side
{{ }},@if,@foreach, filters, inheritance.