/
Email Templates and Dynamic Elements
Email Templates and Dynamic Elements
- Jakub Swihart
- Sarah Holst
Owned by Jakub Swihart
Email Templates
The following table details the message templates available and information about when they are used. The code or dynamic elements for that template are also included. For more information about the dynamic elements, see the section below.
Message Template Name | What it does | Code or Dynamic Elements Included |
|---|---|---|
Customer.FailedPaymentPlanPayment | Sent when payment plan charge fails, prompting guest to update their payment in My Account. | <!DOCTYPE html>
<html></html>
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
font-family: Open Sans, sans-serif;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: Bebas Neue, sans-serif;
color: #02C493;
}
/*What it does: Determines the color and attributes of the buttton. Change the color to resort primary */
.button-a {
font-family: Bebas Neue, sans-serif;
font-weight: 100;
background: #02C493;
border: 2px solid #02C493;
padding: 10px 20px;
color: #ffffff;
font-size: 13px;
font-weight: normal;
letter-spacing: 1px;
line-height: 1.1em;
text-align: center;
text-decoration: none;
display: block;
transition: all 200ms ease-in-out;
cursor: pointer;
width: inherit;
}
/* What it does: Hover styles for buttons */
.button-td, .button-a {
transition: all 100ms ease-in;
}
/*Change border color and color elements hex to resort primary. */
.button-td:hover, .button-a:hover {
background: #FFFFFF !important;
border-color: #02C493 !important;
color: #02C493;
}
.contentContainer {
padding: 40px;
font-family: Open Sans, sans-serif;
font-size: 15px;
mso-height-rule: exactly;
line-height: 20px;
color: #555555;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
}
.footer-container {
width: 100%;
margin-top: 25px;
letter-spacing: 0;
font-family: Open Sans, sans-serif;
padding: 20px 0;
width: 100%;
font-size: 0.8em;
line-height: 1.5em;
background-color: #202020;
color: #EEE;
border-bottom: 20px solid #000;
color: #EEEEEE;
}
.footer-content {
margin: 0 auto;
width: 100%;
padding: 20px;
text-align: center;
}
#footer-content a {
color: #BBBBBB;
text-decoration: none;
}
#footer-content a:hover {
color: #EEE;
Text-decoration: underline;
}
#footer-content h4 {
font-family: Bebas Neue, sans-serif;
font-size: 2em;
margin-bottom: 0;
line-height: 1.25em;
}
#footer-content strong {
color: #EEEEEE;
}
.footer-container {
margin: 0;
}
center {
padding: 0 0 30px 0;
}
</style>
<head>
<title>Failed Payment plan</title>
</head>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table bgcolor="#E0E0E0" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td>
<center style="width: 100%;">
<!-- Email Header : BEGIN -->
<table align="center" class="email-container" width="600">
<tbody>
<tr>
<td style="padding: 20px 0; text-align: center;"></td>
</tr>
</tbody>
</table><!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="email-container" style="border-bottom: 10px solid #02C493; border-top: 10px solid #02C493;" width="600">
<tbody>
<tr>
<!-- Edit logo image URL below-->
<td style="text-align: center;"><img alt="Resort Logo" border="0" id="logo" src="https://i.ibb.co/5BwQVJb/Untitled-design-78.png"></td>
</tr><!-- 1 Column Text : BEGIN -->
<tr>
<td class="contentContainer">
<h2 style="text-align: center;">There was a problem with your payment</h2>
<p style="text-align: center;">Hi %Payment.CustomerName%</p>
<p style="text-align: center;">We were unable to process your payment for<br>
$%Payment.Amount% on %Payment.Date%.</p>
<p style="text-align: center;">%Payment.Products%</p>
<p style="text-align: center;"><a href="%Store.URL%/customer/paymentplans#/">Click Here</a> <a>to change the credit card<br>
used for charging your payments</a></p>
<hr>
<p style="text-align: center;"><strong>NOTE:</strong> Your ticket may be put on hold or canceled if the payment cannot be processed</p><a class="button-a" href="%Store.URL%"><!-- [if mso]> <![endif]-->Back to store<!-- [if mso]> <![endif]--></a>
</td>
</tr><!-- Button : Begin -->
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#555555" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="100%">
<tbody>
<tr>
<td>
<!-- Edit resort contact info below-->
<p style="text-align: center;"><span style="color: #ffffff;">Questions? Please email <strong><a href="mailto:info@somewhere.com" id="mailto_somewhere_com" name="mailto_somewhere_com" style="color: #ffffff;"><span style="color: #ffffff;">info@somewhere.com</span></a></strong> or call <strong><a href="tel:555-123-4567" id="tel_555_123_4567" name="tel_555_123_4567" style="color: #ffffff;"><span style="color: #ffffff;">(303) 123-4567</span></a></strong></span></p>
<p style="text-align: center; padding: 0px 20px 0px 20px;"><span style="color: #ffffff;"><strong><span style="line-height: 13px; text-align: center; font-size: 10px;">
Aspenware, 122 Main, Denver, CO 80203<br>
555.123.4567</span></strong></span></p>
</td>
</tr>
</tbody>
</table>
</body>
</html> |
Customer.FailedSubscriptionPayment | Sent when monthly subscription charge fails, prompting guest to update their payment in My Account. | <!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
font-family: Open Sans, sans-serif;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: Bebas Neue, sans-serif;
color: #02C493;
}
/*What it does: Determines the color and attributes of the buttton. Change the color to resort primary */
.button-a {
font-family: Bebas Neue, sans-serif;
font-weight: 100;
background: #02C493;
border: 2px solid #02C493;
padding: 10px 20px;
color: #ffffff;
font-size: 13px;
font-weight: normal;
letter-spacing: 1px;
line-height: 1.1em;
text-align: center;
text-decoration: none;
display: block;
transition: all 200ms ease-in-out;
cursor: pointer;
width: inherit;
}
/* What it does: Hover styles for buttons */
.button-td, .button-a {
transition: all 100ms ease-in;
}
/*Change border color and color elements hex to resort primary. */
.button-td:hover, .button-a:hover {
background: #FFFFFF !important;
border-color: #02C493 !important;
color: #02C493;
}
.contentContainer {
padding: 40px;
font-family: Open Sans, sans-serif;
font-size: 15px;
mso-height-rule: exactly;
line-height: 20px;
color: #555555;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
}
.footer-container {
width: 100%;
margin-top: 25px;
letter-spacing: 0;
font-family: Open Sans, sans-serif;
padding: 20px 0;
width: 100%;
font-size: 0.8em;
line-height: 1.5em;
background-color: #202020;
color: #EEE;
border-bottom: 20px solid #000;
color: #EEEEEE;
}
.footer-content {
margin: 0 auto;
width: 100%;
padding: 20px;
text-align: center;
}
#footer-content a {
color: #BBBBBB;
text-decoration: none;
}
#footer-content a:hover {
color: #EEE;
Text-decoration: underline;
}
#footer-content h4 {
font-family: Bebas Neue, sans-serif;
font-size: 2em;
margin-bottom: 0;
line-height: 1.25em;
}
#footer-content strong {
color: #EEEEEE;
}
.footer-container {
margin: 0;
}
center {
padding: 0 0 30px 0;
}
</style>
<head>
<title>Failed Subscription Payment</title>
</head>
<body>
<table bgcolor="#E0E0E0" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td>
<center style="width: 100%;">
<table align="center" class="email-container" width="600">
<tbody>
<tr>
<td style="padding: 20px 0; text-align: center;"></td>
</tr>
</tbody>
</table><!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="email-container" style="border-bottom: 10px solid #02C493; border-top: 10px solid #02C493;" width="600">
<tbody>
<tr>
<td style="padding-top: 40px; text-align: center;"><img alt="Resort Logo" border="0" id="WSlogo" src="https://i.ibb.co/5BwQVJb/Untitled-design-78.png"></td>
</tr><!-- 1 Column Text : BEGIN -->
<tr>
<td class="contentContainer" style="text-align: center;">
<h2>There was a problem with your membership</h2>
<p>Hi %Payment.CustomerName%</p>
<p>We were unable to process your payment for<br>
$%Payment.Amount% on %Payment.Date%.</p>%Payment.Products%
<p><a href="%Store.URL%/customer/customersubscriptions#/">Click Here</a> <a>to change the credit card<br>
used for charging your memberships</a></p>
<hr>
<p><strong>NOTE:</strong> Your membership may be put on hold or canceled if the payment cannot be processed</p><a class="button-a" href="%Store.URL%"><!-- [if mso]> <![endif]-->Back to %Store.Name%<!-- [if mso]> <![endif]--></a>
</td>
</tr><!-- Button : Begin -->
</tbody>
</table>
</center>
</td>
</tr><!-- 1 Column Text : BEGIN -->
</tbody>
</table><!-- Email Body : END --><!-- Email Footer : BEGIN -->
<table align="center" bgcolor="#555555" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="100%">
<tbody>
<tr>
<td>
<!-- Edit resort contact info below-->
<p style="text-align: center;"><span style="color: #ffffff;">Questions? Please email <strong><a href="mailto:info@somewhere.com" id="mailto_somewhere_com" name="mailto_somewhere_com" style="color: #ffffff;"><span style="color: #ffffff;">info@somewhere.com</span></a></strong> or call <strong><a href="tel:555-123-4567" id="tel_555_123_4567" name="tel_555_123_4567" style="color: #ffffff;"><span style="color: #ffffff;">(303) 123-4567</span></a></strong></span></p>
<p style="text-align: center; padding: 0px 20px 0px 20px;"><span style="color: #ffffff;"><strong><span style="line-height: 13px; text-align: center; font-size: 10px;">Aspenware, 122 Main, Denver, CO 80203<br>
555.123.4567</span></strong></span></p>
</td><!-- Email Footer : END -->
</tr>
</tbody>
</table> |
Customer.WaiverNotification |
| <style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
font-family: Open Sans, sans-serif;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: Bebas Neue, sans-serif;
color: #02C493;
}
/*What it does: Determines the colo (not hover) and size of the buttton. Change the color to resort primary */
.button-a {
font-family: Bebas Neue, sans-serif;
font-weight: 100;
background: #02C493;
border: 2px solid #02C493;
padding: 10px 20px;
color: #ffffff;
font-size: 13px;
font-weight: normal;
letter-spacing: 1px;
line-height: 1.1em;
text-align: center;
text-decoration: none;
display: block;
transition: all 200ms ease-in-out;
cursor: pointer;
width: inherit;
}
/* What it does: Hover styles for buttons */
.button-td, .button-a {
transition: all 100ms ease-in;
}
/*Change border color and color elements hex to resort primary. */
.button-td:hover, .button-a:hover {
background: #FFFFFF !important;
border-color: #02C493 !important;
color: #02C493;
}
.contentContainer {
padding: 40px;
font-family: Open Sans, sans-serif;
font-size: 15px;
mso-height-rule: exactly;
line-height: 20px;
color: #555555;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
}
.footer-container {
width: 100%;
margin-top: 25px;
letter-spacing: 0;
font-family: Open Sans, sans-serif;
padding: 20px 0;
width: 100%;
font-size: 0.8em;
line-height: 1.5em;
background-color: #202020;
color: #EEE;
border-bottom: 20px solid #000;
color: #EEEEEE;
}
.footer-content {
margin: 0 auto;
width: 100%;
padding: 20px;
text-align: center;
}
#footer-content a {
color: #BBBBBB;
text-decoration: none;
}
#footer-content a:hover {
color: #EEE;
Text-decoration: underline;
}
#footer-content h4 {
font-family: Bebas Neue, sans-serif;
font-size: 2em;
margin-bottom: 0;
line-height: 1.25em;
}
#footer-content strong {
color: #EEEEEE;
}
.footer-container {
margin: 0;
}
center {
padding: 0 0 30px 0;
}
</style>
<!DOCTYPE html>
<table bgcolor="#E0E0E0" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td><center style="width: 100%;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: Open Sans, sans-serif;">Your store.winsport.ca payment</div>
<!-- Visually Hidden Preheader Text : END --><!-- Email Header : BEGIN -->
<table align="center" class="email-container" width="600">
<tbody>
<tr>
<td style="padding: 20px 0; text-align: center;"></td>
</tr>
</tbody>
</table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="email-container" style="border-bottom: 10px solid #02c493; border-top: 10px solid #02c493;" width="600">
<tbody>
<tr>
<!-- Edit logo image URL below -->
<td style="text-align: center;"><img alt="Resort Logo" border="0" id="logo" src="https://i.ibb.co/5BwQVJb/Untitled-design-78.png"></td>
</tr>
<!-- 1 Column Text : BEGIN -->
<tr>
<td class="contentContainer" style="text-align: center;">
<h2>Please sign your waiver</h2>
<p style="text-align: center;">Hi %Customer.FullName%,</p>
<p>You have been invited to sign a waiver for %Store.Name% Resort.<br /><br />Please use the link below to complete signing.<br /><br />%Customer.SignWaiverHtml%<br /><br /></p>
<a class="button-a" href="%Store.URL%"><!-- [if mso]> <![endif]-->Back to %Store.Name%<!-- [if mso]> <![endif]--></a></td>
</tr>
<!-- Button : Begin --></tbody>
</table>
</center></td>
</tr>
<!-- Email Body : END --><!-- Email Footer : BEGIN -->
<div class="footer-container">
<table align="center" bgcolor="#555555" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="100%">
<tbody>
<tr>
<td>
<!-- Edit resort contact info below-->
<p style="text-align: center;"><span style="color: #ffffff;">Questions? Please email <strong><a href="mailto:info@somewhere.com" id="mailto_somewhere_com" name="mailto_somewhere_com" style="color: #ffffff;"><span style="color: #ffffff;">info@somewhere.com</span></a></strong> or call <strong><a href="tel:555-123-4567" id="tel_555_123_4567" name="tel_555_123_4567" style="color: #ffffff;"><span style="color: #ffffff;">(303) 123-4567</span></a></strong></span></p>
<p style="text-align: center; padding: 0px 20px 0px 20px;"><span style="color: #ffffff;"><strong><span style="line-height: 13px; text-align: center; font-size: 10px;"><a href="#SPCUSTOMOPTOUT" id="www_pages03_net_powdr_CopperSignUpF" name="www_pages03_net_powdr_CopperSignUpF" style="color: #9b9899;"><span style="color: #ffffff;">OPT OUT</span></a> | <a href="https://www.somewhere.com/sign-up-success" id="www_somwhere_com_email_sign_u" name="www_somwhere_com_email_sign_u" style="color: #9b9899;"><span style="color: #ffffff;">MANAGE YOUR PREFERENCES</span></a><br>
Aspenware, 122 Main, Denver, CO 80203<br>
555.123.4567</span></strong></span></p>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Email Footer : END -->
</html> |
OrderPlaced.CustomerNotification | Order Confirmation Sent when a customer successfully completes an order. Contains information on the purchased products, order details, and any additional order or pickup information included in the message template. | %Store.Name% - The store’s Name Configured in Store Settings %Order.CustomerFullName% - The full name of the customer who placed the order %Order.OrderNumber% - The nopCommerce order number. The resort’s initials are appended to the front of the order number to match the alternate order ID created in RTP. %Order.CreatedOn% - The order creation date %Order.Product(s)% - A table of the products ordered, including add-ons, quantities, and prices %Order.PaymentMethod% - Payment method type used for the order (e.g. Credit Card) |
OrderQueue.OrderFailureEmail | Resort Notification for failed orders | |
Vouchers.EmailVoucher | Customer notification that voucher has been sen to their account | |
Waivers.EmailWaiver | Request for 3rd party to sign waiver through their email | |
Customer.PasswordRecovery | Password Reset Email Sent when customer selects to receive a forgot password email. | %Store.Name% The store’s Name Configured in Store Settings
%Customer.PasswordRecoveryURL% The password recovery link is specific to the requesting user. |
Customer.SendFindAccountResetPassword | Password Reset Email Sent when customer attempts to find their account but already has an active authentication profile with the designated information. | %Store.Name% The store’s Name Configured in Store Settings
%Customer.PasswordRecoveryURL% The password recovery link is specific to the requesting user. |
Customer.SendVerificationCodeForEmail | Sent when a customer enters an email address in Find me by email form and the information matches a customer record in RTP. This email sends a code that verifies the email address so the user can create an account tied to the RTP record. | %Code% A unique code to be used in Find Me by Email Verification Code to associate a new account to the account in RTP. |
Dynamic Elements
Message templates have various dynamic elements so that emails can be customized for guests. The following table details the available dynamic elements, how they are populated, and which message templates they are used in.
Dynamic Element | Message Templates Using the Element |
|---|---|
%Store.Name% The store’s Name Configured in Store Settings |
|
%Customer.PasswordRecoveryURL% The password recovery link is specific to the requesting user. |
|
%Code% A unique code to be used in Find Me by Email Verification Code to associate a new account to the account in RTP. | Customer.SendVerificationCodeForEmail |
%Order.CustomerFullName% The full name of the customer who placed the order | OrderPlaced.CustomerNotification |
%Order.OrderNumber% The nopCommerce order number. The resort’s initials are appended to the front of the order number to match the alternate order ID created in RTP. | OrderPlaced.CustomerNotification |
%Order.CreatedOn% The order creation date | OrderPlaced.CustomerNotification |
%Order.Product(s)% A table of the products ordered, including add-ons, quantities, and prices | OrderPlaced.CustomerNotification |
%Order.PaymentMethod% Payment method type used for the order (e.g. Credit Card) | OrderPlaced.CustomerNotification |
%Store.URL%/customer/customersubscriptions#/ Link to My Account to update subscription credit card. | Customer.FailedSubscriptionPayment |
, multiple selections available,
Related content
Configuration: Emails
Configuration: Emails
More like this
Common Troubleshooting: Emails
Common Troubleshooting: Emails
Read with this
Simple Footer for Theme Designer v2
Simple Footer for Theme Designer v2
More like this
Use Cases: Emails
Use Cases: Emails
Read with this
Marketing: Theme Revision Guidelines
Marketing: Theme Revision Guidelines
More like this
Email Providers
Email Providers
Read with this