An email's code is HTML with Vascula, the template language of themes. It is the whole email: what it prints is what customers get. The values an email can read are listed under Value in the editor, and in the data list of its email type.
Print values
Write a value in double braces, such as {{ order.number }} or {{ customer.first_name }}. Everything printed is escaped, so a customer's note can't add markup to your email. A value the email doesn't have stops the save; a value that is empty in a particular email prints nothing.
Pass a value through a filter with |. Besides Vascula's standard filters for text, numbers, lists and links, emails have these:
Filter |
What it does |
Example |
|---|---|---|
money |
Writes an amount with its currency the way the customer's language does. trim_zeros: true drops the decimals of a whole amount; isolate: true keeps the amount together in right-to-left text. |
{{ order.totals.total | money }} |
date |
Writes a date in the customer's language and your store's time zone: short, medium (the default), long, full or datetime, or a strftime format such as "%d/%m/%Y". |
{{ order.created_at | date: "long" }} |
format_number |
Writes a number with the separators of the customer's language. |
{{ order.item_count | format_number }} |
pluralize |
Picks the singular or the plural word for a count, by the rules of the customer's language. |
{{ order.item_count | pluralize: "item", "items" }} |
default |
Prints a fallback when the value is empty. |
{{ customer.first_name | default: "there" }} |
t |
Prints Tringify's own wording, such as Ordered or Tracking number, in the customer's language: every language your storefront offers. |
{{ 'status.order' | t: number: order.number }} |
Conditions and loops
{% if %} … {% elsif %} … {% else %} … {% endif %} shows part of the email when its condition holds, {% unless %} … {% endunless %} when it doesn't, and {% case %} … {% when %} … {% endcase %} picks one of several. Compare with ==, !=, <, >, <=, >= and contains, and combine conditions with and and or. Compare with blank to test for a missing or empty value, such as {% if order.customer_note != blank %}.
{% for item in order.items %} … {% endfor %} repeats for each item. limit:, offset: and reversed choose which items, an {% else %} inside the loop shows when the list is empty, forloop.index numbers the items, and {% break %} and {% continue %} leave the loop or skip an item. A list in an email holds at most 100 entries; when an order's items were cut, order.items_truncated is true and order.line_count is the order's full number of lines.
{% assign %} and {% capture %} keep a value for later; they can't reuse the name of a data root such as order or customer. {# … #} and {% comment %} … {% endcomment %} are comments.
Ready-made parts
Insert writes a part as {% render 'name' %}, with its options after a comma, such as {% render 'button', label: 'View your order', url: order.status_url %}. Each part handles every case of its data, such as pickup or shipping, duties or fees, and shows only what the email has. An option you leave out uses its default.
Part |
What it shows |
Options |
|---|---|---|
{% render 'header' %} |
The store's logo (from Email design), or its name when there is no logo, linking to the store. |
align ("center" | "left", default "center"). |
{% render 'progress' %} |
The order's progress bar: Ordered, Shipped, Out for delivery, Delivered, or the pickup steps for a pickup order. Orders with nothing to ship or pick up show no bar. |
stage ("placed" | "shipped" | "out_for_delivery" | "delivered" | "ready_for_pickup" | "picked_up"). |
{% render 'button' %} |
A button in your accent colour that works in every email program. |
label, url, surface (a brand surface), variant ("solid" | "outline" | "link"), align ("left" | "center"), full (true: full width on phones). |
{% render 'items' %} |
The email's items with their photo, variant, quantity and price, then the totals: subtotal, discount, shipping, fees, duties, tax and total. Only the lines the order has are shown. In a refund email these are the refunded items; in a cart or checkout reminder, the cart's items without prices. |
heading (text above the items), source ("auto" | "refund" | "added" | "removed", default "auto"), totals (true | false, default true), properties (true | false: line properties such as an engraving, default true). |
{% render 'order_details' %} |
The order's shipping and billing address, shipping method or pickup location, payment and the customer's note, each under its heading, in two columns (one on phones). A part the order has no value for is left out. |
parts ("all" | "addresses" | "delivery", default "all"). |
{% render 'tax_details' %} |
The tax breakdown: each tax with its rate and amount, and whether prices included it, where the email places it. Emails without tax lines show nothing. |
None |
{% render 'shipment' %} |
The shipment: carrier and tracking number with a tracking button, or the pickup location with its address, hours and instructions for a pickup order. |
button_label (the tracking button's text; no button when blank). |
{% render 'access_code' %} |
The one-time code of a sign-in or confirmation email, large and easy to copy, with how long it is valid. |
None |
{% render 'gift_card' %} |
The gift card: its value and code on a card in your accent colour, with the sender's message. |
button_label (the button that opens the gift card; no button when blank). |
{% render 'product' %} |
A product: its photo, name, variant and price, with a button. |
item (the product: product in a back-in-stock email, review.product in a review request), button_label (the button's text), url (where the button goes, default the product page), price (true | false, default true). |
{% render 'eyebrow' %} |
A small line in capitals above a heading, such as the order number and date. |
text, color (default the muted text colour), align ("left" | "center", default "left"). |
{% render 'footer' %} |
The store's name, its support address and, in marketing emails, the unsubscribe and view-in-browser links. |
None |
Styles
Write CSS in a