#Email template fields

Reference for the placeholders and layout blocks you can put in an email template. Templates use Mustache syntax: write a field as {{field}} and it is replaced with the real value when the email is sent. A field the email has nothing to say about is empty, so wrap anything optional in a section ({{#field}}...{{/field}}) to keep it out of the email.

The editor's Insert field button lists the fields on this page, apart from the loyalty fields, and drops one into the template at the cursor. It also lists wishlist fields, which only the wishlist alert emails fill.

#Customer

#Site

The site's colors come from its branding, so a template that uses them follows the store's look rather than fixing its own:

{{site.logoUrl}} is empty when the site has no logo, so wrap it: {{#site.logoUrl}}<img src="{{site.logoUrl}}" alt="{{site.name}}">{{/site.logoUrl}}.

{{site.unsubscribeUrl}} is a per-customer link where they can stop receiving marketing email and opt back in. The default layout's footer renders it inside a {{#site.unsubscribeUrl}} section so it disappears from previews and from mail with no recipient to unsubscribe. Leave it in place.

#Order

The review request carries every order field. A loyalty email sent for points an order earned carries {{order.number}}, {{order.date}} and {{product.name}} for that order, and is empty for them otherwise. The other emails have no order.

{{order.reviewUrl}} opens the review form for the order's first item and already carries a query string, so add extra parameters with &. The star links in the default review survey use {{order.reviewUrl}}&rating=1 to preselect a rating.

{{order.otherItems}} repeats for every item after the first, with {{title}} and {{reviewUrl}} inside it. {{order.hasOtherItems}} wraps anything that should only appear when the order has more than one item:

{{#order.hasOtherItems}}
<p>Review another item from your order</p>
{{#order.otherItems}}
<p><a href="{{reviewUrl}}">{{title}}</a></p>
{{/order.otherItems}} {{/order.hasOtherItems}}

{{order.items}} is the same list with the first item included, with {{title}}, {{imageUrl}} and {{reviewUrl}} inside. The guided reviews setup writes this when you pick "List every product equally":

{{#order.items}}
<p><a href="{{reviewUrl}}">{{title}}</a></p>
{{/order.items}}

#Product

These describe the order's first item, the one {{order.reviewUrl}} links to.

#Loyalty

These are filled in the loyalty member emails, which you edit on the Loyalty member emails automation rather than here. A points-earned email for an order also fills {{order.number}}, {{order.date}} and {{product.name}}.

• Points amounts arrive already written in your program's own words ("1,200 stars"), so don't add a unit after them. {{loyalty.pointsName}} is the plural name on its own, for "Spend your {{loyalty.pointsName}}".
• {{loyalty.reward.name}} is the name of the rule the reward came from, as the member saw it. {{loyalty.reward.cost}} is what they spent, empty for a reward they didn't pay for.
• The expiry fields are filled only on the two expiring emails: amount is what goes (points only), days counts whole days from now, when says it in words ("today", "tomorrow" or "in 7 days"), and date is the day in your store's time zone.
• {{loyalty.dashboardUrl}} and {{loyalty.redeemUrl}} open the loyalty page you set under Settings → Features → Loyalty, or your store's homepage if you set none. Both carry #meisei-rewards, which opens the loyalty widget on arrival. A shopper who isn't signed in sees what the program offers rather than their own balance, so put the member's numbers in the email itself.

{{#loyalty.reward.expiresAt}}
<p>Use it by {{loyalty.reward.expiresAt}}.</p>
{{/loyalty.reward.expiresAt}}

#Layout components

Components are layout blocks written as Mustache sections with parameters in parentheses.

Row wraps content in a full-width row, and Column creates a column within it. width is the column's share of the row: 1, 1/2, 1/3, 2/3, 1/4 or 3/4. Columns sit side by side on a computer and stack on a phone. Add sm with a share to keep a column side by side on a phone too, as the image beside a product's details does:

{{#Row}} {{#Column}}(width="1/2")
<!-- left column -->
{{/Column}} {{#Column}}(width="1/2")
<!-- right column -->
{{/Column}} {{/Row}}

Heading is the email's title (color, align), and Image a picture that shrinks to fit its column (src, alt, width in pixels, radius for rounded corners, href to make it a link):

{{#Heading}}Thanks for your order{{/Heading}}
{{#Image}}(src="{{product.imageUrl}}" alt="{{product.name}}" width="138" radius="6"){{/Image}}

Button is a styled button (href, backgroundColor, textColor, borderRadius in pixels):

{{#Button}}(href="https://example.com" backgroundColor="{{site.colors.primary}}" textColor="#FFFFFF"
borderRadius="6")Shop now{{/Button}}

Label is a small uppercase caption (color), and Stat a big figure with a label over it (label, labelColor, color, fontSize). Code puts a reward code in a dashed box (border, color), and Divider draws a thin line (color):

{{#Stat}}(label="Your balance" labelColor="{{site.colors.muted}}"){{loyalty.points}}{{/Stat}}
{{#Code}}(border="{{site.colors.border}}"){{loyalty.reward.code}}{{/Code}}
{{#Divider}}(color="{{site.colors.border}}"){{/Divider}}

Badge is an inline label (bgcolor), and Callout a highlighted block (bgcolor, padding as a CSS value):

{{#Badge}}(bgcolor="#15803D")New{{/Badge}} {{#Callout}}(bgcolor="#F8F8FA" padding="24px 0")
<!-- callout content -->
{{/Callout}}

#Layout

These three are only for a layout. The other fields on this page work in a layout too, but a layout is shared by every type, so a field that only one email has (an order, a reward) will be empty in the others.

{{{email.content}}} and {{{email.preheader}}} take three braces because they arrive already filled in, and three braces insert them unchanged. {{email.reason}} finishes the footer's "You're receiving this because" sentence, for example "you made a purchase at".