Overview
This document provides a reference for the EmailModel, which is used to populate a Liquid HTML template for merchant-customizable emails. Each field in the model can be used to dynamically insert content into the email template. Fields that are not currently used in the default template are explicitly marked, so merchants can determine if they should be added.
Sample HTML Template:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>{{ subject }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<style type="text/css">
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
</head>
<body
style="margin: 0; padding: 0; font-family: Lato, Helvetica,Arial,sans-serif; color: #495661; color: {{ text_color }};"
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
>
<tbody style="width: 100%">
<tr>
<td>
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
width="98%"
style="border-collapse: collapse; max-width: 600px"
>
<tbody>
<tr>
<td align="center" bgcolor="">
<table
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td>
<table
style="width: 100%"
border="0"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td height="30" style="height: 30px"></td>
</tr>
{% if logo_url != null and logo_url.size != 0 %}
<tr>
<td align={{logoAlignment}} valign="top">
<img
width="{{logoWidth}}"
height="{{logoHeight}}"
src="{{ logo_url }}?w={{logoWidth}}&h={{logoHeight}}"
style="
border: none;
object-fit: contain;
width: {{logoWidth}}px;
height: {{logoHeight}}px;
"
/>
</td>
</tr>
{% endif %}
{% if text_image_url != null and text_image_url.size != 0 %}
<tr>
<td height="35" style="height: 35px">
</td>
</tr>
<tr>
<td align={{thanksImageAlignment}}>
<img
src="{{ text_image_url }}?w={{thanksImageWidth}}&h={{thanksImageHeight}}"
width={{thanksImageWidth}}px
height={{thanksImageHeight}}px
/>
</td>
</tr>
{% endif %}
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
style="border-collapse: collapse"
>
<tbody>
<tr>
<td>
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
>
<tbody>
<tr>
<td
height="35"
class="em_height"
style="height: 35px"
>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
{% if heading_image_url != null and heading_image_url.size != 0
%}
<td width="30" style="width: 30px">
<img src={{ heading_image_url }} width="30"
style="width: 30px">
</td>
<td width="10" style="width: 10px"></td>
{% endif %}
<td style="font-size: 16px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; font-weight: bold; color: #202E3A; color: {{ header_text_color }};">
{{ heading }}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15" style="height: 15px"></td>
</tr>
<tr>
<td
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; word-break:break-word; color: #495661; color: {{ text_color }}; "
>
{{ body_content | newline_to_br }}
</td>
</tr>
<tr>
<td height="25" style="height: 25px;"></td>
</tr>
{% if manage_subscription_button_text != null and
manage_subscription_button_text.size != 0 %}
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="border-radius: 5px;"
bgcolor="{{ manage_subscription_button_color }}">
<a href={{ manageSubscriptionLink }} target="_blank"
style="padding: 12px 24px;border: 1px solid #20AE96;border-radius: 5px;font-family: Lato, Helvetica, Arial, sans-serif;font-size: 14px;color: #ffffff;text-decoration: none;font-weight:bold;display: inline-block; color: {{ manage_subscription_button_text_color }}; border-color: {{ manage_subscription_button_color }};">{{
manage_subscription_button_text }}</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{% endif %}
<tr>
<td
height="35"
class="em_height"
style="height: 35px"
></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
>
<tbody>
<tr>
<td bgcolor="#F5F7FA" style="background-color: #F5F7FA; border-radius: 20px;">
<table
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td>
<table
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td colspan="7" height="20" style="height: 20px"></td>
</tr>
{% for orderItem in orderItems %}
<tr style="">
<td width="20" style="width: 20px"></td>
<td width="70" style="width: 70px" valign="top">
<img
src="{{orderItem.imageUrl}}?w=70&h=70"
style="display: block; max-width: 70px; max-height: 70px; width: auto; height: auto; margin: auto;"
alt="{{orderItem.title}}"
width="70"
height="70"
/>
</td>
<td width="20" style="20px;"></td>
<td>
<table
border="0"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
>
{{orderItem.title}}
{% if orderItem.variantTitle %}
- {{orderItem.variantTitle}}
{% endif %}
</td>
</tr>
{% if orderItem.subscriptionProduct %}
<tr>
<td
height="10"
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
>
{{selling_plan_name_text}}:
{{orderItem.sellingPlanName}}
</td>
</tr>
{% endif %}
<tr>
<td
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
>
{{ quantity_text }}: {{orderItem.quantity}}
</td>
</tr>
{% if orderItem.variantSku != "" %}
<tr>
<td
height="10"
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
>
{{variant_sku_text}}: {{orderItem.variantSku}}
</td>
</tr>
{% endif %}
</tbody>
</table>
</td>
<td width="20" style="20px"></td>
<td
style="text-align: right; font-size: 14px; font-family:Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
valign="top"
>
{{orderItem.price}}
</td>
<td width="20" style="width: 20px"></td>
</tr>
<tr>
<td colspan="7" height="20" style="height: 20px"></td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="35" class="em_height" style="height: 35px"></td>
</tr>
<tr>
<td style="">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
>
<tbody>
<tr>
<td>
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
>
<tbody>
<tr>
<td align="left" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
>
<tbody>
<tr>
<td
style="font-size: 16px; font-family: Lato, Helvetica, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; font-weight: bold; color: #202E3A; color: {{ header_text_color }};"
>
<b>{{ shipping_address_text }}</b>
</td>
</tr>
<tr>
<td
height="5"
style="height: 5"
></td>
</tr>
<tr>
<td
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
>
{{shippingAddress | newline_to_br}}
</td>
</tr>
</tbody>
</table>
</td>
<td width="35" style="width: 35px"></td>
<td align="right" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
align="right"
valign="top"
>
<tbody>
<tr>
<td
style="font-size: 16px; font-family: Lato, Helvetica, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; font-weight: bold; color: #202E3A; color: {{ header_text_color }};"
align="right"
>
<b>{{ billing_address_text }}</b>
</td>
</tr>
<tr>
<td
height="5"
style="height: 5px"
></td>
</tr>
<tr>
<td
align="right"
valign="top"
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
>
{{billingAddress | newline_to_br}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td align="left" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
>
<tbody>
<tr>
<td
style="font-size: 16px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; font-weight: bold; color: #202E3A; color: {{ header_text_color }};"
>
<b>{{ next_orderdate_text }}</b>
</td>
</tr>
<tr>
<td
height="5"
style="height: 5px"
></td>
</tr>
<tr>
<td
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
>
{{ nextOrderDate }}
</td>
</tr>
</tbody>
</table>
</td>
<td width="36" style="width: 35px"></td>
<td align="right" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
align="right"
valign="top"
>
<tbody>
<tr>
<td
style="font-size: 16px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; font-weight: bold; color: #202E3A; color: {{ header_text_color }};"
align="right"
>
<b>{{ payment_method_text }}</b>
</td>
</tr>
<tr>
<td
height="5"
style="height: 5px"
></td>
</tr>
<tr>
<td align="right" valign="top">
<table>
<tbody
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
>
<tr>
<td>
<img width="30" src="{{ cardLogo }}"/>
</td>
<td
width="5"
style="width: 5px"
></td>
<td
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ text_color }};"
>
{{ ending_in_text }} {{ maskedCardNumber }}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="35" class="em_height" style="height: 35px"></td>
</tr>
<tr>
<td>
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
style="border-collapse: collapse"
>
<tbody>
<tr>
<td style="">
<table>
<tbody>
<tr>
<td
height="1"
bgcolor="#cccccc"
style="font-size: 1px; line-height: 1px"
></td>
</tr>
<tr>
<td height="15" style="height: 15px"></td>
</tr>
<tr>
<td
style="font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; letter-spacing: 0.3px; color: #495661; color: {{ footer_text_color }};"
>
{{ footer | newline_to_br }}
</td>
</tr>
<tr>
<td height="15" style="height: 15px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Fields and Their Usage in the Liquid Template
Email Content and Metadata
subject (String) - Used in the
<title>tag to set the email subject.{{ subject }}in<title>.
heading (String) - Displayed as the email heading.
{{ heading }}inside a<td>withheader_text_color.
body_content (String) - Primary content of the email.
{{ body_content | newline_to_br }}used inside a<td>.
footer (String) - Footer text of the email.
{{ footer | newline_to_br }}used inside a<td>.
Styling and Appearance
header_text_color (String) - Defines header text color.
Applied as
color: {{ header_text_color }}.
text_color (String) - General text color.
Used as
color: {{ text_color }}.
footer_text_color (String) - Footer text color.
Applied to footer text as
color: {{ footer_text_color }}.
logo_url (String) - URL for the logo.
<img src="{{ logo_url }}?w={{ logoWidth }}&h={{ logoHeight }}" />
logoWidth, logoHeight (String) - Dimensions for logo.
Used in
<img>tag.
button_border_radius (Integer) - Controls the border radius of buttons.
(Not used in the default template but can be applied to customize button styling.)
thanksImageWidth, thanksImageHeight (String) - Dimensions for the thank-you image.
thanksImageAlignment (String) - Alignment of the thank-you image.
Customer Information
customer (Customer) - Customer-related data.
Fields Used:
customer.first_name→{{ customer.first_name }}customer.last_name→{{ customer.last_name }}customer.email→{{ customer.email }}
Fields Not Used but Available:
customer.id(Long) - Unique identifier for the customer.customer.display_name(String) - Display name of the customer.customer.token(String) - Token associated with the customer.customer.phone(String) - Customer's phone number.customer.unsubscribe_url(String) - URL to allow customer to unsubscribe.
Order and Subscription Details
orderItems (List) - Used in the order item loop.
{% for orderItem in orderItems %}iterates over order items.Fields Used:
orderItem.imageUrl→<img src="{{ orderItem.imageUrl }}?w=70&h=70" />orderItem.title→{{ orderItem.title }}orderItem.variantTitle→{{ orderItem.variantTitle }}(if exists)orderItem.sellingPlanName→{{ selling_plan_name_text }}: {{ orderItem.sellingPlanName }}orderItem.quantity→{{ quantity_text }}: {{ orderItem.quantity }}orderItem.variantSku→{{ variant_sku_text }}: {{ orderItem.variantSku }}(if exists)orderItem.price→ Displayed in the last<td>in the order item row.
Fields Not Used but Available:
orderItem.sellingPlanId(Long) - Identifier for the selling plan.orderItem.isTaxable(Boolean) - Indicates whether the item is taxable.orderItem.basePrice(String) - Base price of the item before any modifications.orderItem.productHandle(String) - Shopify handle for the product.orderItem.vendor(String) - Vendor of the product.
maskedCardNumber (String) - Masked card details.
{{ ending_in_text }} {{ maskedCardNumber }}.
cardLogo (String) - Logo for the payment card.
<img width="30" src="{{ cardLogo }}"/>.
nextOrderDate (String) - Displays the next order date.
{{ nextOrderDate }}inside a table cell.
selling_plan_name_text (String) - Text label for selling plans.
variant_sku_text (String) - Text label for SKU.
productIds, variantIds (List) - Used for product tracking.
contractAmount (Double) - The total amount for the contract (Not used in the default template but may be relevant for merchants who need contract pricing displayed.).
Shipping and Billing Information
shipping_address_text (String) - Label for the shipping address.
<b>{{ shipping_address_text }}</b>.
billing_address_text (String) - Label for the billing address.
<b>{{ billing_address_text }}</b>.
shippingAddress (String) - Full shipping address.
{{ shippingAddress | newline_to_br }}.
billingAddress (String) - Full billing address.
{{ billingAddress | newline_to_br }}.
Subscription Pause Details
pauseTillDate (String) - Displays pause date if applicable.
pauseReason (String) - Displays reason for subscription pause.
pauseDurationCycle (Integer) - Duration cycle for subscription pause (Not used in the default template but available for merchants who need to display it.).
Buttons and Links
manage_subscription_button_text (String) - Label for the subscription management button.
{{ manage_subscription_button_text }}inside an<a>.
manage_subscription_button_color (String) - Button background color.
Applied as
bgcolor="{{ manage_subscription_button_color }}".
manage_subscription_button_text_color (String) - Button text color.
Applied as
color: {{ manage_subscription_button_text_color }}.
manageSubscriptionLink (String) - URL for subscription management.
Used as
href={{ manageSubscriptionLink }}.
Usage
The EmailModel object dynamically replaces Liquid placeholders with data. It ensures that emails are styled, formatted, and personalized based on customer, order, and subscription details. Each field corresponds to a specific area of the Liquid email template. Fields that are not currently used in the default template are noted, so merchants can decide whether to include them.