Creating a promotional email template with a promo code involves ensuring that the message is clear, visually appealing, and easy to read across different devices and email clients. Here’s a step-by-step guide to creating a promo code email template using HTML and CSS:
Step 1: Set Up the Basic HTML Structure
Create an HTML file that will serve as your email template. Use inline CSS for styling to ensure compatibility with various email clients.
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<!--<![endif]-->
<style>
* {
<html xmlns: v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en"><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">< !--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml>< ![endif]-->< !--[if !mso]>< !--><link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">< !--< ![endif]--><style> * {
box-sizing:border-box
}
body {
margin: 0;
padding: 0
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important
}
#MessageViewBody a {
color: inherit;
text-decoration: none
}
p {
line-height: inherit
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0;
overflow: hidden
}
.image_block img+div {
display: none
}
@media (max-width:670px) {
.social_block.desktop_hide .social-table {
display: inline-block !important
}
.image_block img.fullWidth {
max-width: 100% !important
}
.mobile_hide {
display: none
}
.row-content {
width: 100% !important
}
.stack .column {
width: 100%;
display: block
}
.mobile_hide {
min-height: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
font-size: 0
}
.desktop_hide,
.desktop_hide table {
display: table !important;
max-height: none !important
}
}
</style>
<style id="MTEwMDAwMDAxOTk5OTk0NA=="></style>
<script type="text/javascript" charset="utf-8" defer="" async="" src="chrome-extension://lnaahdmijnjnmgaalacdgakieangpjgp/inject-scripts/patch-xhr.js" data-params="{}"></script>
<script type="text/javascript" charset="utf-8" defer="" async="" src="chrome-extension://lnaahdmijnjnmgaalacdgakieangpjgp/inject-scripts/set-global.js" data-params="{"name":"__stopWatching","value":true}"></script>
<script type="text/javascript" charset="utf-8" defer="" async="" src="chrome-extension://lnaahdmijnjnmgaalacdgakieangpjgp/inject-scripts/set-global.js" data-params="{"name":"__jsons","value":[]}"></script>
</head>
<body style="background-color:#f5f5f5;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none">
<table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#f5f5f5">
<tbody>
<tr>
<td>
<table class="row row-1" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:650px;margin:0 auto" width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:5px;padding-top:5px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:30px;line-height:30px;font-size:1px"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-2" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fff;color:#333;width:650px;margin:0 auto" width="650">
<tbody>
<tr>
<td class="column column-1" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:25px;padding-left:25px;padding-top:25px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%;padding-right:0;padding-left:0">
<div class="alignment" align="left" style="line-height:10px"><img class="fullWidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/371/Logo.png" style="display:block;height:auto;border:0;max-width:195px;width:100%" width="195" alt="Image"
title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:25px;padding-right:25px;padding-top:25px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="button_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="padding-bottom:10px;padding-left:10px;padding-top:10px;text-align:right">
<div class="alignment" align="right">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:42px;width:88px;v-text-anchor:middle;" arcsize="34%" stroke="false" fillcolor="#D4E9F9"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#052d3d; font-family:Tahoma, Verdana, sans-serif; font-size:14px"><![endif]-->
<a href="#" target="_blank" style="text-decoration:none;display:inline-block;color:#052d3d;background-color:#D4E9F9;border-radius:14px;width:auto;border-top:0px solid transparent;font-weight:undefined;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:14px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:14px;display:inline-block;letter-spacing:normal;"><span style="word-break:break-word;"><span style="line-height: 28px;" data-mce-style="">My account</span></span></span></a>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-3" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#2190e3;color:#000;width:650px;margin:0 auto"
width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:10px;padding-left:15px;padding-right:15px;padding-top:10px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="paragraph_block block-1" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:16px;line-height:120%;text-align:center;mso-line-height-alt:19.2px">
<p style="margin:0;word-break:break-word">
<span>Electronics | Fashion | <span style="background-color:transparent;">Books | </span>Home and Kitchen | Toys
| <span><span><strong>SALES ★</strong></span></span>
</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-4" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#d6e7f0;color:#000;width:650px;margin:0 auto"
width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-top:5px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="paragraph_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-left:15px;padding-right:10px;padding-top:20px">
<div style="color:#052d3d;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:46px;line-height:120%;text-align:center;mso-line-height-alt:55.199999999999996px">
<p style="margin:0;word-break:break-word">
<span><strong><span>THANK <span style="color:rgb(33,144,227);">YOU!</span></span>
</strong>
</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:10px;padding-left:10px;padding-right:10px">
<div style="color:#052d3d;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:30px;line-height:120%;text-align:center;mso-line-height-alt:36px">
<p style="margin:0;word-break:break-word"><span><strong>you are going to use a passage.</strong></span></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="image_block block-3" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="padding-top:20px;width:100%;padding-right:0;padding-left:0">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/371/hero_getoff.png" style="display:block;height:auto;border:0;max-width:325px;width:100%" width="325" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-5" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fff;color:#000;width:650px;margin:0 auto" width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;border-bottom:30px solid #d6e7f0;border-left:30px solid #d6e7f0;border-right:30px solid #d6e7f0;padding-bottom:30px;padding-top:35px;vertical-align:top;border-top:0">
<table class="text_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:10px;padding-left:10px;padding-right:10px">
<div style="font-family:sans-serif">
<div class="" style="font-size:12px;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;mso-line-height-alt:14.399999999999999px;color:#fc7318;line-height:1.2">
<p style="margin:0;font-size:12px;text-align:center;mso-line-height-alt:14.399999999999999px"><span style="font-size:34px;color:#052d3d;"><strong><span style="font-size:46px;">GET 20% OFF</span> </strong>
</span>
</p>
<p style="margin:0;font-size:12px;text-align:center;mso-line-height-alt:14.399999999999999px"><span style="font-size:22px;color:#052d3d;"><strong>FROM YOUR NEXT ORDER</strong></span></p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="text_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:15px;padding-left:10px;padding-right:10px;padding-top:15px">
<div style="font-family:sans-serif">
<div class="" style="font-size:12px;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;mso-line-height-alt:14.399999999999999px;color:#fc7318;line-height:1.2">
<p style="margin:0;font-size:12px;text-align:center;mso-line-height-alt:14.399999999999999px"><span style="font-size:20px;color:#052d3d;"><strong>Copy & paste this promocode 👉 <span style="background-color:#ffff99;font-size:20px;"> THEBO </span></strong>
</span>
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-3" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-left:10px;padding-right:10px">
<div style="color:#fc7318;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:14px;line-height:120%;text-align:center;mso-line-height-alt:16.8px">
<p style="margin:0;word-break:break-word">
<span style="color:rgb(153,153,153);"><em><span>Offer ends tomorrow<br>09/09/19 11:45 est</span></em>
</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-6" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#d6e7f0;color:#000;width:650px;margin:0 auto"
width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:5px;padding-top:5px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:20px;line-height:20px;font-size:1px"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-7" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fff;color:#000;width:650px;margin:0 auto" width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-top:25px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="paragraph_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-left:10px;padding-right:10px;padding-top:10px">
<div style="color:#052d3d;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:34px;line-height:120%;text-align:center;mso-line-height-alt:40.8px">
<p style="margin:0;word-break:break-word"><span><strong><span style="color:rgb(33,144,227);"> </span><span>Time for a<span style="color:rgb(33,144,227);"> Refresh?</span></span>
</strong>
</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-8" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fff;color:#000;width:650px;margin:0 auto" width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:10px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="paragraph_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:10px;padding-left:10px;padding-right:10px">
<div style="color:#555;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:24px;line-height:120%;text-align:center;mso-line-height-alt:28.799999999999997px">
<p style="margin:0;word-break:break-word"><span>Use the promocode for 20% off</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-9" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fff;color:#333;width:650px;margin:0 auto" width="650">
<tbody>
<tr>
<td class="column column-1" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;border-right:1px solid #efefef;padding-bottom:20px;padding-top:5px;vertical-align:top;border-top:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/371/1.png" style="display:block;height:auto;border:0;max-width:324px;width:100%" width="324" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:5px;padding-left:10px;padding-right:10px;padding-top:10px">
<div style="color:#fc7318;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:16px;line-height:120%;text-align:center;mso-line-height-alt:19.2px">
<p style="margin:0;word-break:break-word"><span><strong>PRODUCT NAME</strong></span></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-3" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:10px;padding-left:10px;padding-right:10px">
<div style="color:#555;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:14px;line-height:120%;text-align:center;mso-line-height-alt:16.8px">
<p style="margin:0;word-break:break-word">
Sed et justo molestie, convallis ipsumac.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="text_block block-4" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="font-family:sans-serif">
<div class="" style="font-size:12px;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;mso-line-height-alt:14.399999999999999px;color:#555;line-height:1.2">
<p style="margin:0;font-size:14px;text-align:center;mso-line-height-alt:16.8px"><span style="text-decoration:line-through;font-size:14px;color:#999999;">99,00$</span><span style="font-size:14px;"> <span style="font-size:17px;"><strong>70,00$</strong></span></span>
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="button_block block-5" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;width:114px;v-text-anchor:middle;" arcsize="29%" stroke="false" fillcolor="#fc7318"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#ffffff; font-family:Tahoma, Verdana, sans-serif; font-size:16px"><![endif]-->
<div style="text-decoration:none;display:inline-block;color:#fff;background-color:#fc7318;border-radius:12px;width:auto;border-top:0 solid transparent;font-weight:undefined;border-right:0 solid transparent;border-bottom:0 solid transparent;border-left:0 solid transparent;padding-top:5px;padding-bottom:5px;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:16px;text-align:center;mso-border-alt:none;word-break:keep-all">
<span style="padding-left:20px;padding-right:20px;font-size:16px;display:inline-block;letter-spacing:normal;"><span style="word-break: break-word; line-height: 32px;">LOREM IPSUM</span></span>
</div>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:20px;padding-top:5px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/371/2.png" style="display:block;height:auto;border:0;max-width:325px;width:100%" width="325" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:5px;padding-left:10px;padding-right:10px;padding-top:10px">
<div style="color:#fc7318;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:16px;line-height:120%;text-align:center;mso-line-height-alt:19.2px">
<p style="margin:0;word-break:break-word"><span><strong>PRODUCT NAME</strong></span></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-3" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:10px;padding-left:10px;padding-right:10px">
<div style="color:#555;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:14px;line-height:120%;text-align:center;mso-line-height-alt:16.8px">
<p style="margin:0;word-break:break-word">Sed et justo molestie, convallis ipsumac.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="text_block block-4" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="font-family:sans-serif">
<div class="" style="font-size:12px;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;mso-line-height-alt:14.399999999999999px;color:#555;line-height:1.2">
<p style="margin:0;font-size:14px;text-align:center;mso-line-height-alt:16.8px">
<span style="text-decoration:line-through;font-size:14px;color:#999999;">99,00$</span><span style="font-size:14px;"> <span style="font-size:17px;"><strong>70,00$</strong></span></span>
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="button_block block-5" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;width:115px;v-text-anchor:middle;" arcsize="29%" stroke="false" fillcolor="#fc7318"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#ffffff; font-family:Tahoma, Verdana, sans-serif; font-size:16px"><![endif]-->
<div style="text-decoration:none;display:inline-block;color:#fff;background-color:#fc7318;border-radius:12px;width:auto;border-top:0 solid transparent;font-weight:undefined;border-right:0 solid transparent;border-bottom:0 solid transparent;border-left:0 solid transparent;padding-top:5px;padding-bottom:5px;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:16px;text-align:center;mso-border-alt:none;word-break:keep-all">
<span style="padding-left:20px;padding-right:20px;font-size:16px;display:inline-block;letter-spacing:normal;"><span style="word-break: break-word; line-height: 32px;">LOREM IPSUM</span></span>
</div>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-10" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fff;color:#000;width:650px;margin:0 auto" width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:5px;padding-top:5px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:20px;line-height:20px;font-size:1px"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-11" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#f5f5f5;color:#000;width:650px;margin:0 auto"
width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:15px;padding-top:15px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/371/banner.jpg" style="display:block;height:auto;border:0;max-width:620px;width:100%" width="620" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-12" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:650px;margin:0 auto" width="650">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:60px;padding-top:20px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="social_block block-1" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<table class="social-table" width="188px" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;display:inline-block">
<tbody>
<tr>
<td style="padding:0 15px 0 0"><a href="https://www.facebook.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/circle-color/facebook@2x.png" width="32" height="32" alt="Facebook" title="Facebook" style="display:block;height:auto;border:0"></a></td>
<td
style="padding:0 15px 0 0">
<a href="https://www.twitter.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/circle-color/twitter@2x.png" width="32" height="32" alt="Twitter" title="Twitter" style="display:block;height:auto;border:0"></a></td>
<td
style="padding:0 15px 0 0"><a href="https://www.instagram.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/circle-color/instagram@2x.png" width="32" height="32" alt="Instagram" title="Instagram" style="display:block;height:auto;border:0"></a></td>
<td
style="padding:0 15px 0 0"><a href="https://www.pinterest.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/circle-color/pinterest@2x.png" width="32" height="32" alt="Pinterest" title="Pinterest" style="display:block;height:auto;border:0"></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="color:#555;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:14px;line-height:150%;text-align:center;mso-line-height-alt:21px">
<p style="margin:0;word-break:break-word">
NetShop - Lorem ipsum dolor sit amet hasellus sagittis aliquam luctus. </p>
<p style="margin:0;word-break:break-word">329 California St, San Francisco, CA 94118</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="divider_block block-3" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="60%" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="divider_inner" style="font-size:1px;line-height:1px;border-top:1px dotted #c4c4c4"><span> </span></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-4" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="color:#4f4f4f;font-family:Lato,Tahoma,Verdana,Segoe,sans-serif;font-size:14px;line-height:120%;text-align:center;mso-line-height-alt:16.8px">
<p style="margin:0;word-break:break-word">
<span><a style="text-decoration: none; color: #2190E3;" href="#" target="_blank" rel="noopener"><strong>Help& FAQ's</strong></a> | <strong><a style="text-decoration: none; color: #2190E3;" href="#" target="_blank" rel="noopener">Returns</a> </strong> | <span style="background-color:transparent;">1-998-9283-19832</span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End -->
</body>
</html>
Step 2: Customize the Content
- Header: Add your company logo or name.
- Content: Write engaging content that clearly communicates the offer and includes the promo code.
- Promo Code Box: Ensure the promo code stands out by using a distinct style.
- Call to Action (CTA): Make sure the CTA button is prominent and leads to the shopping site or a specific landing page.
- Footer: Include links to unsubscribe and your privacy policy.
Step 3: Add Inline CSS
Use inline CSS to ensure that your email template renders correctly across all email clients. Tools like Premailer can help convert your embedded CSS to inline CSS automatically.
Step 4: Ensure Responsiveness
Make sure your email template is responsive and looks good on both desktop and mobile devices. Use percentage-based widths and avoid relying on media queries alone, as some email clients do not support them well.
Step 5: Test Your Email
Before sending out your email, thoroughly test it:
- Email Testing Tools: Use tools like Litmus or Email on Acid to preview how your email will look in different email clients and devices.
- Send Test Emails: Send test emails to yourself and colleagues to check for any rendering issues or broken links.
Step 6: Send Your Email
Use an email marketing service like MailChimp, SendGrid, or another platform that supports HTML emails to send your promotional email to your mailing list.
By following these steps, you can create a professional and effective promo code email template that engages your audience and drives action.
+91 7905834592
Enquiry Now
piyushmnm@gmail.com
piyush.gupta384
Reviews
There are no reviews yet. Be the first one to write one.