Below is the HTML code used for Appstle Loyalty & Rewards' email templates.
Old template:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow-wrap: anywhere">
<head>
<title>{{ subject }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <meta name='viewport' content='width=device-width' /> -->
<style type="text/css" data-no-inline="">
@media only screen and (max-device-width: 500px) {
.width {
width: 100% !important;
}
.mobile-pad {
padding: 0 15px !important;
}
}
p {
margin-bottom: 2px !important;
}
</style>
</head>
<body
style="
margin: 0;
box-sizing: border-box;
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 26px;
min-width: 100%;
min-height: 100%;
padding: 0;
text-align: left;
background: #f7f9fd;
color: #4d4d5a;
width: 100% !important;
"
>
<table
style="
border-spacing: 0;
border-collapse: collapse;
vertical-align: top;
background: #f7f9fd;
height: 100%;
width: 100%;
color: #4d4d5a;
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
font-weight: 400;
padding: 0;
margin: 0;
text-align: left;
font-size: 12px;
line-height: 26px;
"
class="loyalty-email-template"
>
<tbody>
<tr style="padding: 0; vertical-align: top; text-align: left">
<td
align="center"
valign="top"
style="
word-wrap: break-word;
vertical-align: top;
color: #4d4d5a;
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
font-weight: 400;
padding: 0;
margin: 0;
text-align: left;
font-size: 12px;
line-height: 26px;
border-collapse: collapse !important;
"
>
<table
class="a_spacer"
align="center"
style="
border-spacing: 0;
border-collapse: collapse;
padding: 0;
vertical-align: top;
width: 100%;
margin: 0 auto;
float: none;
text-align: center;
"
>
<tbody>
<tr style="padding: 0; vertical-align: top; text-align: left">
<td
height="24"
style="
word-wrap: break-word;
vertical-align: top;
color: #4d4d5a;
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
font-weight: 400;
padding: 0;
margin: 0;
text-align: left;
border-collapse: collapse !important;
font-size: 24px;
line-height: 24px;
"
>
</td>
</tr>
</tbody>
</table>
<table
align="center"
style="
border-spacing: 0;
border-collapse: collapse;
padding: 0;
vertical-align: top;
width: 100%;
margin: 0 auto;
float: none;
text-align: center;
"
>
<tbody>
<tr style="padding: 0; vertical-align: top; text-align: left">
<td
style="
word-wrap: break-word;
vertical-align: top;
color: #4d4d5a;
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
font-weight: 400;
padding: 0;
margin: 0;
text-align: left;
font-size: 12px;
line-height: 26px;
border-collapse: collapse !important;
"
>
<table
class="a_container"
align="center"
style="
border-spacing: 0;
border-collapse: collapse;
padding: 0;
vertical-align: top;
background: #ffffff;
width: 100%;
max-width: 600px !important;
text-align: inherit;
"
>
<tbody>
<tr style="padding: 0; vertical-align: top; text-align: left">
<td
style="
word-wrap: break-word;
vertical-align: top;
color: #4d4d5a;
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
font-weight: 400;
padding: 0;
margin: 0;
text-align: left;
font-size: 12px;
line-height: 26px;
border-collapse: collapse !important;
"
>
<table
align="center"
class="header"
width="100%"
style="background-color: {{header_background_color}}; text-align: center;border-spacing:0;border-collapse:collapse;vertical-align:top;text-align:left;padding:0;width:100%;display:table"
>
<tbody>
<tr style="padding: 0; vertical-align: top; text-align: left">
<td
height="40"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0"
></td>
</tr>
<tr>
<td
align="center"
height="100"
valign="top"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0"
>
{% if logo_url != null and logo_url.size != 0 %}
<img src="{{ logo_url }}" width="{{ logo_height }}" />
{% endif %}
</td>
</tr>
<tr>
<td
align="center"
class="heading mobile-pad"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0; color: {{header_text_color}}"
>
<p class="action" style="font-size: 22px; text-align: center">
{% if showAvailablePoints != null and showAvailablePoints %} {% if availablePoints != null and
available_points_label != ''%} {{available_points_label}} {{availablePoints}} {% endif %} {% endif %}
</p>
</td>
</tr>
<tr>
<td
height="40"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0"
></td>
</tr>
</tbody>
</table>
<table
class="middle"
width="100%"
style="background-color: {{templateBackgroundColor}}; border-bottom: 1px solid #eaeaea"
>
<tbody>
<tr>
<td
align="center"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0"
>
<table class="width content mobile-pad" width="100%" style="max-width: 500px">
<tbody>
<tr>
<td
height="40"
style="
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 0;
margin: 0;
padding: 0;
"
></td>
</tr>
<tr>
<td
class="message"
style="
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 0;
margin: 0;
padding: 0;
font-size: 16px;
"
>
<div
class="text"
style="margin: 0 0 15px 0; padding: 0; line-height: 22px;color: {{ text_color }}"
>
<div>{{ body_content | newline_to_br }}</div>
</div>
</td>
</tr>
<tr>
<td
class="rewards-container"
style="
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 0;
margin: 0;
padding: 0;
text-align: center;
"
>
{% if emailSettingType != null and (emailSettingType == "REWARD_AVAILABLE_REMINDER" or
emailSettingType == "REFERRAL" or emailSettingType == "REFERRAL_LINK") %}
<a
class="reward big-button"
href="{{redirectLink}}"
style="
display: inline-block;
text-decoration: none;
padding: 14px 24px;
border-radius: 4px;
font-size: 18px;
border-bottom: 5px solid {{claimNowButtonBorderColor}};
box-sizing: border-box;
margin-bottom: 15px;
color: {{ claimNowButtonTextColor }};
background-color: {{ claimNowButtonBackgroundColor }};
"
>
<span class="reward-title" style="font-size: 16px; text-align: center">{{claimNow}}</span>
</a>
</td>
</tr>
{% endif %} {%if showEarnRules != null and showEarnRules %}
<tr>
<td
style="
text-align: center;
color: rgba(0, 0, 0, 0.75);
font-size: 18px;
font-family: Inter;
font-weight: 800;
padding-top: 15px;
padding-bottom: 8px;
"
>
{{earnRulesAvailableText}}
</td>
</tr>
{% for reward in earnRuleSummaries %}
<tr>
<td style="padding-top: 6px; padding-bottom: 6px">
<table
style="
width: 100%;
border: 1px rgba(0, 0, 0, 0.29) dashed;
border-radius: 10px;
padding: 12px;
"
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
>
<tr>
<td style="width: 32px; padding: 1.33px; text-align: center">
<img src="{{reward.iconUrl}}" style="max-height: 30px" />
</td>
<td style="padding-left: 10px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="color: black; font-size: 14px; font-family: Inter; font-weight: 700">
{{reward.ruleName}}
</td>
</tr>
<tr>
<td
style="
color: rgba(0, 0, 0, 0.58);
font-size: 12px;
font-family: Inter;
font-weight: 400;
"
>
{{reward.ruleDescription}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{% endfor %} {% endif %} {%if showRedeemRules != null and showRedeemRules %}
<tr>
<td
style="
text-align: center;
color: rgba(0, 0, 0, 0.75);
font-size: 18px;
font-family: Inter;
font-weight: 800;
padding-top: 15px;
padding-bottom: 8px;
"
>
{{rewardsAvailable}}
</td>
</tr>
{% for reward in rewardsSummaries %}
<tr>
<td style="padding-top: 6px; padding-bottom: 6px">
<table
style="
width: 100%;
border: 1px rgba(0, 0, 0, 0.29) dashed;
border-radius: 10px;
padding: 12px;
"
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
>
<tr>
<td style="width: 32px; padding: 1.33px; text-align: center">
<img src="{{reward.iconUrl}}" style="max-height: 30px" />
</td>
<td style="padding-left: 10px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="color: black; font-size: 14px; font-family: Inter; font-weight: 700">
{{reward.note}}
</td>
</tr>
<tr>
<td
style="
color: rgba(0, 0, 0, 0.58);
font-size: 12px;
font-family: Inter;
font-weight: 400;
"
>
{{reward.discount}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{% endfor %} {% endif %}
<tr>
<td
height="40"
style="
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 0;
margin: 0;
padding: 0;
"
></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="footer" width="100%">
<tbody>
<tr>
<td
align="center"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0; background-color: {{footer_background_color}}"
>
<table class="width" width="100%" style="max-width: 500px">
<tbody>
<tr>
<td
height="30"
style="
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 0;
margin: 0;
padding: 0;
"
></td>
</tr>
<tr>
<td
align="center"
class="mobile-pad footer-unsubscribe"
style="
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 0;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 20px;
color: {{ footer_text_color }}"
>
{{ footer | newline_to_br }}
<br />
<a
target="_blank"
href="https://loyalty-admin.appstle.com/api/miscellaneous/unsubscribe-email/{{customer.id}}"
style="color: {{footer_link_color}}"
>{{unsubscribeText}}</a
>
</td>
</tr>
<tr>
<td
height="30"
style="
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 0;
margin: 0;
padding: 0;
"
></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
New Template:
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
<title>{{ subject }}</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="max-width: 400px; margin: 0 auto">
<table width="100%" style="background-color: {{header_background_color}};" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center; padding-top: 36px; padding-bottom: 18px">
<img src="{{ logo_url }}" width="{{ logo_height }}" />
</td>
</tr>
<tr>
<td
style="text-align: center; color: {{header_text_color}}; font-size: 32px; font-family: Inter; font-weight: 900; padding-top: 18px; padding-bottom: 18px;"
>
{{heading}}
</td>
</tr>
</tbody>
</table>
<table width="100%" style="background-color: {{templateBackgroundColor}};" cellspacing="0" cellpadding="0">
<tbody>
{% if showAvailablePoints != null and showAvailablePoints %} {% if availablePoints != null and available_points_label != ''%}
<tr>
<td
style="
text-align: center;
color: black;
font-size: 16px;
font-family: Inter;
font-weight: 800;
padding-top: 18px;
padding-bottom: 6px;
"
>
{{available_points_label}}
</td>
</tr>
{% endif %} {% endif %}
<tr>
<td
style="text-align: center; padding-top: 6px; padding-bottom: 15px; color: {{ text_color }}; font-size: 14px; font-family: Inter; font-weight: 600;"
>
{{ body_content | newline_to_br }} {%if emailSettingType != null and emailSettingType == "POINT_EARN" and earnActivity != null
%}
<ul style="list-style-type: circle; list-style-position: inside; padding-left: 0; margin-left: 0">
{% for activity in earnActivity %}
<li>{{activity}}</li>
{% endfor %}
</ul>
{% endif %}
</td>
</tr>
{%if showEarnRules != null and showEarnRules %}
<tr>
<td
style="
text-align: center;
color: rgba(0, 0, 0, 0.75);
font-size: 18px;
font-family: Inter;
font-weight: 800;
padding-top: 15px;
padding-bottom: 8px;
"
>
{{earnRulesAvailableText}}
</td>
</tr>
{% for reward in earnRuleSummaries %}
<tr>
<td style="padding-top: 6px; padding-bottom: 6px">
<table
style="width: 100%; border: 1px rgba(0, 0, 0, 0.29) dashed; border-radius: 10px; padding: 12px"
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
>
<tr>
<td style="width: 32px; padding: 1.33px; text-align: center">
<img src="{{reward.iconUrl}}" style="max-height: 30px" />
</td>
<td style="padding-left: 10px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="color: black; font-size: 14px; font-family: Inter; font-weight: 700">{{reward.ruleName}}</td>
</tr>
<tr>
<td style="color: rgba(0, 0, 0, 0.58); font-size: 12px; font-family: Inter; font-weight: 400">
{{reward.ruleDescription}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{% endfor %} {% endif %} {%if showRedeemRules != null and showRedeemRules %}
<tr>
<td
style="
text-align: center;
color: rgba(0, 0, 0, 0.75);
font-size: 18px;
font-family: Inter;
font-weight: 800;
padding-top: 15px;
padding-bottom: 8px;
"
>
{{rewardsAvailable}}
</td>
</tr>
{% for reward in rewardsSummaries %}
<tr>
<td style="padding-top: 6px; padding-bottom: 6px">
<table
style="width: 100%; border: 1px rgba(0, 0, 0, 0.29) dashed; border-radius: 10px; padding: 12px"
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
>
<tr>
<td style="width: 32px; padding: 1.33px; text-align: center">
<img src="{{reward.iconUrl}}" style="max-height: 30px" />
</td>
<td style="padding-left: 10px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="color: black; font-size: 14px; font-family: Inter; font-weight: 700">{{reward.note}}</td>
</tr>
<tr>
<td style="color: rgba(0, 0, 0, 0.58); font-size: 12px; font-family: Inter; font-weight: 400">
{{reward.discount}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{% endfor %} {% endif %}
<tr>
<td style="text-align: center; padding-top: 32px; padding-bottom: 32px">
{% if emailSettingType != null and (emailSettingType == "REWARD_AVAILABLE_REMINDER" or emailSettingType == "REFERRAL" or
emailSettingType == "REFERRAL_LINK" or emailSettingType == "POINT_EARN" or emailSettingType == "BIRTHDAY") %}
<a href="{{redirectLink}}">
<button
style="background: {{ claimNowButtonBackgroundColor }}; border-radius: 48px; border: none; margin: 0 auto; padding: 18px 48px;"
>
<span style="color: {{ claimNowButtonTextColor }}; font-size: 14px; font-family: Inter; font-weight: 800;"
>{% if emailSettingType == 'POINT_EARN' %} {{showMoreEarnRuleText}}{% endif %} {% if emailSettingType ==
"REWARD_AVAILABLE_REMINDER" or emailSettingType == "REFERRAL" or emailSettingType == "REFERRAL_LINK" or emailSettingType
== "BIRTHDAY" %} {{claimNow}} {% endif %}
</span>
</button>
</a>
{% endif %}
</td>
</tr>
</tbody>
</table>
<table class="footer" width="100%" style="border-top: 1px solid #ccc">
<tbody>
<tr>
<td
style="text-align: center; color: black; font-size: 14px; font-family: Inter; font-weight: 300; background-color: {{footer_background_color}}; font-size: 14px"
>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 16px 0; color: {{ footer_text_color }}">
{{ footer | newline_to_br }}
<a
target="_blank"
href="https://loyalty-admin.appstle.com/api/miscellaneous/unsubscribe-email/{{customer.id}}"
style="color: {{footer_link_color}}"
>{{unsubscribeText}}</a
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</table>
</body>
</html>
Merchants who wish to create and use custom email templates can make use of this.