Skip to content

Instantly share code, notes, and snippets.

@larrycustodio

larrycustodio/extend-email-template-sample-aftermarket

Created March 25, 2020 17:20
Show Gist options
  • Save larrycustodio/c537d52f959ba8ca0514587e53f60e16 to your computer and use it in GitHub Desktop.
Save larrycustodio/c537d52f959ba8ca0514587e53f60e16 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
extend-email-template-sample-aftermarket
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add title to display title in some client browser tabs -->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,200&display=swap" rel="stylesheet">
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
font-famiy: 'Nunito Sans', Helvetica, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* GMAIL BLUE LINKS */
u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* SAMSUNG MAIL BLUE LINKS */
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* Universal styles for links and stuff */
a {
color: #ffffff;
font-weight: bold;
}
a:hover {
color: inherit;
text-decoration: none;
opacity: 0.8;
}
a.button:hover {
background-color: #2296D3 !important;
opacity: 0.8;
}
/* Responsive styles */
@media screen and (max-width: 600px) {
.mobile {
width: 100% !important;
}
h1 {
font-size: 28px !important;
}
}
</style>
</head>
<!-- removes default spacing on inline-style-->
<body id="body" style="margin: 0 !important; padding: 0 !important;">
<!-- Preview text for the inbox -->
<div style="display: none; max-height: 0; overflow: hidden;">
This will be displayed underneath the subject line. Use it wisely.
</div>
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation"><tr><td>
<![endif]-->
<div style="background-color: white; color: #000000; font-family: 'Nunito Sans', Helvetica, sans-serif; font-size: 18px; line-height: 36px; margin: 0 auto; max-width: 600px; padding: 40px 20px 40px 20px;">
<!-- Top section: Branding/ Company Logos -->
<div style="padding: 10px 40px 32px; line-height: 0px;">
<img alt="Extend Inc" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-logo--shield63x65px.png" width="45" border="0">
<span style="padding: 0 22px;"></span>
<img alt="Extend Inc" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads__newair-logo_blue.png" width="154" border="0">
</div>
<!-- Hero -->
<div style="background-color: #f5f5f5; padding: 32px 39px 38px;">
<center>
<img src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads__shield-check.png" width="101" border="0" style="display: block;">
</center>
<h1 style="font-size: margin: 24px 0 38px; text-align: center; line-height: 35px;">Love your product?<br />Protect it now in just a few clicks.</h1>
</div>
<!-- Body: Product Information -->
<div style="padding: 55px 0;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:300px; vertical-align:top; width:100%;" class="mobile">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="middle" style="font-size: 16px; line-height: 24px; text-align: right; padding-right: 20px; text-align: center;">
<p style="font-size: 16px; margin: 0 0 20px 0;">
<img src="https://cdn.shopify.com/s/files/1/0066/7595/5769/products/01-newair-wine-and-beverage-fridge-awb-400db-hero_ac9f62d8-4f46-4fe2-b8c7-4c27118499c1.jpg?v=1581716484" border="0" width="240" style="width: 240px;" />
</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:300px; vertical-align:top; width:100%;" class="mobile">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 24px; text-align: left;">
<h4 style="font-size: 12px; font-weight: 800; margin: 0 0 4px 0;">Product Name</h4>
<p style="font-size: 18px; line-height: 24px; margin: 0 0 20px 0; width: 260px;">NewAir Product Name, Lorem Ipsum Dolor</p>
</td>
</tr>
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 24px; text-align: left;">
<h4 style="font-size: 12px; font-weight: 800; margin: 0 0 4px 0;">Date of purchase:</h4>
<p style="font-size: 18px; line-height: 24px; margin: 0 0 20px 0;">December 25, 2020</p>
</td>
</tr>
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 24px; text-align: left;">
<h4 style="font-size: 12px; font-weight: 800; margin: 0 0 4px 0;">QTY purchased:</h4>
<p style="font-size: 18px; line-height: 24px; margin: 0 0 20px 0;">1</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>f
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!-- CTA Button : add your CTA link on the <a> tag AND the <v> tags below -->
<div style="margin: 0 auto; padding: 0 39px 0; text-align: center;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://extend.com" style="height:68px;v-text-anchor:middle;width:475px;" arcsize="50%" stroke="f" fillcolor="#2296d3">
<w:anchorlock/>
<center>
<![endif]-->
<a class="button" href="http://extend.com" target="_blank" rel="noopener noreferrer" style="background-color:#2296d3;border-radius:34px;color:#ffffff;display:inline-block; font-family:sans-serif;font-size:22px;font-weight:bold;line-height:68px;text-align:center;text-decoration:none;width:475px;max-width:100%;-webkit-text-size-adjust:none;">Protect your purchase!</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<div style="padding: 32px 0 96px;">
<center>
<img src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads___post-cta-banner.png" border="0" width="168" style="width: 168px" />
</center>
</div>
<!-- Body: Description -->
<div style="padding: 0 39px 0;">
<p style="font-size: 28px; font-weight: 700; line-height: 33.6px; margin: 16px auto; text-align: center;">Why protect this product?</p>
<p style="font-size: 18px; font-weight: 200; margin: 0 auto 23px; text-align: center;">Avoid the costs and headache of defects, malfunctions and damages. With a protection plan, you can have peace of mind that a replacement or repair is just a few clicks away.</p>
</div>
<!-- Body: Bulleted List -->
<div style="margin: 0 auto; padding: 40px 0 128px; width: 475px;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<!-- Row 1 -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="475">
<tr>
<td align="center" valign="top" width="475">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:475px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="475">
<tr>
<td align="left" valign="top" width="248">
<![endif]-->
<div style="display:inline-block; max-width:248px; min-width:248px; vertical-align:top; width:100%;" class="mobile">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:475px;">
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 22px; text-align: left;">
<p style="margin: 0 0 29px 0;"><img alt="clock" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads___icon-time-speedtrail.png" width="24" border="0" style="width: 24.25px;"><span style="margin: 0 0 0 12px; font-weight: 200;">Fast replacements + repairs</span></p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="227">
<![endif]-->
<div style="display:inline-block; max-width:227px; min-width:227px; vertical-align:top; width:100%;" class="mobile">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 22px; text-align: right;">
<p style="margin: 0 0 29px 0;"><img alt="shield" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads___icon-shield-check.png" width="21" border="0" style="width: 21px;"><span style="margin: 0 0 0 9px; font-weight: 200;">Easy online claims</span></p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Row 2 -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="475">
<tr>
<td align="center" valign="top" width="475">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:475px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="475">
<tr>
<td align="left" valign="top" width="248">
<![endif]-->
<div style="display:inline-block; max-width:248px; min-width:248px; vertical-align:top; width:100%;" class="mobile">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:475px;">
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 22px; text-align: left;">
<p style="margin: 0 0 29px 0;"><img alt="delivery truck" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads___icon-truck.png" width="33" border="0" style="width: 33px;"><span style="margin: 0 0 0 8px; font-weight: 200;">Free shipping on repairs<span></p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="227">
<![endif]-->
<div style="display:inline-block; max-width:227px; min-width:227px; vertical-align:top; width:100%;" class="mobile">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:475px;">
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 22px; text-align: right;">
<p style="margin: 0 0 29px 0;"><img alt="phone" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads___icon-phone.png" width="21" border="0" style="width: 21px;"><span style="margin: 0 0 0 8px; font-weight: 200;">24/7 live support</span></p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Row 3 -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="475">
<tr>
<td align="center" valign="top" width="475">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:475px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="475">
<tr>
<td align="left" valign="top" width="248">
<![endif]-->
<div style="display:inline-block; max-width:248px; min-width:248px; vertical-align:top; width:100%;" class="mobile">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:475px;">
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 22px; text-align: left;">
<p style="margin: 0;"><img alt="zero" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads___icon-minus-circle.png" width="19" border="0" style="width: 19px;"><span style="margin: 0 0 0 10px; font-weight: 200;">No deductibles</span></p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="228">
<![endif]-->
<div style="display:inline-block; max-width:227px; min-width:227px; vertical-align:top; width:100%;" class="mobile">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:475px;">
<tr>
<td align="center" valign="top" style="font-size: 16px; line-height: 22px; text-align: right;">
<p style="margin: 0;"><a href="https://extend.com" target="_blank" rel="noopener noreferrer" style="color: inherit; font-weight: 200; margin: 0 5px 0 0;">Plan details & FAQ</a><img alt="external link" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads___icon-external-link.png" width="16" border="0" style="width: 16px;"></p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!-- Footer -->
<div style="background-color: #f5f5f5; padding: 43.8px 45px 27px;">
<!-- Banners -->
<div>
<center>
<img src="https://extend-emails--image-assets.s3.amazonaws.com/extend-logo--shield63x65px.png" width="62" border="0" style="display: block;">
</center>
<p style="color: #090637; font-size: 22px; font-weight: normal; line-height: 30px; margin: 24px 0 44px; text-align: center;">In partnership with Extend</p>
<center>
<img alt="Appliances, furniture, jewelry, electronics and more" src="https://extend-emails--image-assets.s3.amazonaws.com/extend-leads__footer.png" border="0" width="485" style="max-width: 100%; width: 485px;">
</center>
</div>
<!-- Disclaimer -->
<div>
<p style="color: #6D7278; font-size: 13px; line-height: 18px; margin: 36px 0 27px; text-align: center;">This offer is available through a partnership with Extend. To learn more about Extend’s protection plans, <a href="#" style="color: inherit; font-weight: normal;">see full details</a> here.</p>
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment