Email Templates
- Jakub Swihart
Owned by Jakub Swihart
Email Name | What it does | Code |
|---|---|---|
Customer.FailedPaymentPlanPayment | Customer notification that a payment plan payment has failed and directs them to update their card on file | <!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 | Customer notification that a subscription payment has failed and directs them to update their card on file | <!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 | Customer notification/reciept for store purchase | |
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 |