Below is the HTML code used for Appstle Loyalty & Rewards' email templates.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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="border: 0; margin: 0; padding: 0; min-width: 100%; zoom: 1; color: {{ text_color }}; background-color: {{templateBackgroundColor}}"
>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="loyalty-email-template">
<tbody>
<tr>
<td
class="container"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0; background-color: #f9fafa"
>
<table align="center" class="header" width="100%" style="background-color: {{header_background_color}}; text-align: center">
<tbody>
<tr>
<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">{{heading}}</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="500">
<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><br /></div>
{% if availablePoints != null %}
<ul>
<li>{{available_points_label}} <strong>{{availablePoints}}</strong></li>
</ul>
{% endif %}
</div>
</td>
</tr>
<tr>
<td
height="20"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0"
></td>
</tr>
<tr>
<td style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0; margin: 0; padding: 0">
{% if emailSettingType != null and emailSettingType == "MONTHLY_REWARD_REMINDER" %}
<div
class="rewards-available-heading"
style="
font-size: 20px;
font-weight: 500;
text-align: center;
margin-bottom: 30px;
color: {{rewardsAvailableHeadingColor}}
"
>
{{rewardsAvailable}}
</div>
{% endif %}
</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>
{% endif %} {% for reward in rewardsSummaries %}
<a
class="reward big-button"
href="https://{{shop.domain}}"
style="
display: inline-block;
text-decoration: none;
padding: 14px 24px;
border-radius: 4px;
font-size: 22px;
border-bottom: 5px solid {{claimNowButtonBorderColor}};
box-sizing: border-box;
width: 100%;
margin-bottom: 15px;
color: {{ claimNowButtonTextColor }}; background-color: {{ claimNowButtonBackgroundColor }}"
>
<span class="reward-title" style="font-size: 16px; text-align: center"
>{{reward.discount}} {{reward.note}}</span
>
<span class="reward-cost" style="font-size: 16px; text-align: center; color: #fff; float: right">
{{reward.points}} Points
</span>
</a>
{% endfor %}
</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>
</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="500">
<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 }}
<!--<a
href="http://help.loyaltylion.com/article/273-links-are-disabled-in-test-emails"
style="color: #3290da; text-decoration: none"
>click here to unsubscribe</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>
</body>
</html>
Merchants who wish to create and use custom email templates can make use of this.