Hi Klaviyo Community,
I am trying to create a carousel as a preview text following this guide from Google: https://developers.google.com/gmail/promotab/overview
In order to add this code to an email, I saved a campaign as a template, then added the code with the correct values in Visual Studio code, then imported the code back to Klaviyo. But when I send a preview the carousel doesn’t seem to render. Has anyone done this before and if yes am I doing it the right way?
Here’s the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<script type="application/ld+json">
[
// Build the first image preview in your product carousel:
{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "https://d3k81ch9hvuctc.cloudfront.net/company/MP6AKd/images/1fad111d-1533-4d50-812a-34fd54987d3b.png",
"url": "https://www.woolx.com/products/womens-athletic-merino-leggings-with-side-pockets-piper",
// Optionally, include the following PromotionCard properties:
"headline": "Piper Leggings",
"price": 150,
"priceCurrency": "USD",
"discountValue": 10
},
// Build the second image preview in your product carousel:
{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "https://d3k81ch9hvuctc.cloudfront.net/company/MP6AKd/images/787efa88-170b-4903-995f-74a4135753b3.png",
"url": "https://www.woolx.com/products/mckenna-leggings-with-pocket"
// Optionally, include the following PromotionCard properties:
"headline": "McKenna Leggings",
"price": 135,
"priceCurrency": "USD",
"discountValue": 10
},
]
</script>
<title>
</title>
<!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<!--<![endif]-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css" data-inliner="ignore">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style>a:link {color:#02a196;font-weight:normal;text-decoration:underline;font-style:normal}
a:visited {color:#02a196;font-weight:normal;text-decoration:underline;font-style:normal}
a:active {color:#02a196;font-weight:normal;text-decoration:underline;font-style:normal}
a:hover {color:#02a196;font-weight:normal;text-decoration:underline;font-style:normal}</style><style>#outlook a {
padding: 0
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
table, td {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic
}
p {
display: block;
margin: 13px 0
}
@media only screen and (min-width: 480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%
}
.mj-column-per-50 {
width: 50% !important;
max-width: 50%
}
}
@media only screen and (max-width: 480px) {
.component-wrapper .mob-no-spc {
padding-left: 0 !important;
padding-right: 0 !important
}
}
@media only screen and (max-width: 480px) {
td.kl-img-base-auto-width {
width: 100% !important
}
}
@media only screen and (max-width: 480px) {
.kl-text {
padding-right: 18px !important;
padding-left: 18px !important
}
}
@media screen and (max-width: 480px) {
.kl-sl-stk {
display: block !important;
width: 100% !important;
padding: 0 0 9px !important;
text-align: center !important
}
.kl-sl-stk.lbls {
padding: 0 !important
}
.kl-sl-stk.spcblk {
display: none !important
}
}
@media only screen and (max-width: 480px) {
.hlb-wrapper .hlb-block-settings-content {
padding: 9px !important
}
.hlb-logo {
padding-bottom: 9px !important
}
.r2-tbl {
width: 100%
}
.r2-tbl .lnk {
width: 100%
}
.r2-tbl .hlb-subblk:last-child {
padding-right: 0 !important
}
.r2-tbl .hlb-subblk {
padding-right: 10px !important
}
.kl-hlb-stack {
display: block !important;
width: 100% !important;
padding-right: 0 !important
}
.kl-hlb-stack.vspc {
margin-bottom: 9px
}
.kl-hlb-wrap {
display: inline-block !important;
width: auto !important
}
.kl-hlb-no-wrap {
display: table-cell !important
}
.kl-hlb-wrap.nospc.nospc {
padding-right: 0 !important
}
}
@media only screen and (max-width: 480px) {
td.mobile-only {
display: table-cell !important
}
div.mobile-only {
display: block !important
}
table.mobile-only {
display: table !important
}
.desktop-only {
display: none !important
}
}
@media only screen and (max-width: 480px) {
.table-mobile-only {
display: table-cell !important;
max-height: none !important
}
.table-mobile-only.block {
display: block !important
}
.table-mobile-only.inline-block {
display: inline-block !important
}
.table-desktop-only {
max-height: 0 !important;
display: none !important;
mso-hide: all !important;
overflow: hidden !important
}
}
@media only screen and (max-width: 480px) {
.kl-text div, .kl-table-subblock div, .kl-split-subblock div {
font-size: 16px !important;
line-height: 1.3 !important
}
}
@media only screen and (max-width: 480px) {
h1 {
font-size: 32px !important;
line-height: 1.3 !important
}
}
@media only screen and (max-width: 480px) {
h2 {
font-size: 20px !important;
line-height: 1.3 !important
}
}
@media only screen and (max-width: 480px) {
h3 {
font-size: 16px !important;
line-height: 1.3 !important
}
}
@media only screen and (max-width: 480px) {
h4 {
font-size: 18px !important;
line-height: 1.3 !important
}
}
@media only screen and (max-width: 480px) {
.root-container {
width: 100% !important
}
.root-container-spacing {
padding: 10px !important
}
.content-padding {
padding-left: 0 !important;
padding-right: 0 !important
}
.content-padding.first {
padding-top: 0 !important
}
.content-padding.last {
padding-bottom: 0 !important
}
.component-wrapper {
padding-left: 0 !important;
padding-right: 0 !important
}
}</style></head>
<body style="word-spacing:normal;background-color:#f0f0e9;">
<div class="root-container" id="bodyTable" style="background-position:left top; background-repeat:repeat; background-size:auto; background-color:#f0f0e9">
<div class="root-container-spacing" style="font-size:0; padding-bottom:20px; padding-top:30px">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;border-radius:0px 0px 0px 0px;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-radius:0px 0px 0px 0px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
<div class="content-padding first last" style="padding-left:0; padding-right:0; padding-top:0; padding-bottom:0">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-row-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="kl-row" style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="kl-column-outlook" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix kl-column" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;table-layout:fixed;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:25px;padding-right:0px;padding-bottom:25px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="center" class="kl-image kl-image-6593003" style="font-size:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td class="" style="width:200px;border:0;padding:0px 0px 0px 0px;" valign="top">
<a href="https://www.woolx.com/" style="color:#02a196; font-style:normal; font-weight:normal; text-decoration:underline">
<img alt="WoolX Logo" src="https://d3k81ch9hvuctc.cloudfront.net/company/MP6AKd/images/6cb14a6d-e07f-408d-96bc-9f41a75ea5b0.png" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; font-size:13px" title="WoolX Logo" width="200"/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="center" class="kl-image kl-image-6593004" style="font-size:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td class="" style="width:600px;border:0;padding:0px 0px 0px 0px;" valign="top">
<a href="https://www.woolx.com/collections/womens-bottoms" style="color:#02a196; font-style:normal; font-weight:normal; text-decoration:underline">
<img alt="Load Up On Leggings" src="https://d3k81ch9hvuctc.cloudfront.net/company/MP6AKd/images/86305547-e00c-4e5b-8eaf-cf54e5cee433.gif" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; font-size:13px" title="Load Up On Leggings" width="600"/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper kl-text-table-layout" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="font-size:0px;padding:0px;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;word-break:break-word;">
<div style="margin:0; font-family:Helvetica, Arial; font-size:18px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.5; text-align:left; color:#333"><p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0; text-align:center"><span style="color: #000000;">Our merino wool leggings are SO VERSATILE you can wear them on ALL your outdoor adventures AND out for drinks & dinner with the girls! <br/><br/>Just a quick change of top is all you need to COMPLETELY switch up your look so you’re ready for wherever the day (or night) takes you! </span></p></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:10px;padding-right:18px;padding-bottom:10px;padding-left:18px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="#0A9E93" role="presentation" style="border:none;border-radius:0px;cursor:auto;mso-padding-alt:15px 40px 15px 40px;background:#0A9E93;" valign="middle">
<a href="https://www.woolx.com/collections/womens-bottoms" style='color:#fff; font-style:normal; font-weight:bold; text-decoration:none; display:block; background:#0A9E93; font-family:"Helvetica Neue", Arial; font-size:18px; line-height:100%; letter-spacing:1px; margin:0; text-transform:none; padding:15px 40px 15px 40px; mso-padding-alt:0; border-radius:0' target="_blank">
LOAD UP ON LEGGINGS!
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:18px;padding-right:18px;padding-bottom:0px;padding-left:18px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0; border-top:solid 1px #CCC; font-size:1px; margin:0 auto; width:100%">
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #CCCCCC;font-size:1px;margin:0px auto;width:564px;" role="presentation" width="564px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper kl-text-table-layout" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="font-size:0px;padding:0px;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;word-break:break-word;">
<div style="margin:0; font-family:Helvetica, Arial; font-size:18px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.5; text-align:left; color:#333"><p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0; text-align:center"><strong><span style="font-size: 24px;"><span style="color: #000000;">Shop Our Bestselling Leggings<br/></span></span></strong></p></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-row-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="kl-row" style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div style="height:30px;line-height:30px;"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="background-color:#484a55;vertical-align:top;padding-top:30px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-table" style="font-size:0px;padding:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:fixed;width:100%;border:none;" width="100%">
<thead>
<tr>
<th class="table-desktop-only kl-table-subblock" style="width:5%;overflow:hidden;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;">
<div style="font-family:Arial;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:1.3;text-align:left;color:#222222;"></div>
</th>
<th class="kl-table-subblock" style="width:90%;overflow:hidden;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;">
<div style="font-family:Arial;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:1.3;text-align:left;color:#222222;"></div>
</th>
<th class="table-desktop-only kl-table-subblock" style="width:5%;overflow:hidden;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;">
<div style="font-family:Arial;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:1.3;text-align:left;color:#222222;"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-desktop-only kl-table-subblock" style="width:5%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<div style="font-family:Helvetica,Arial;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;color:#333333;"><div style="text-align:left;"></div></div>
</td>
<td class="kl-table-subblock" style="width:90%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" class="" style="font-size:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td class="" style="width:150px;border:0;padding:0;" valign="top">
<a href="https://www.woolx.com/" style="color:#02a196; font-style:normal; font-weight:normal; text-decoration:underline">
<img alt="" src="https://d3k81ch9hvuctc.cloudfront.net/company/MP6AKd/images/3d0b47da-f6cb-424f-8636-015566ebf2f9.png" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; font-size:13px" title="" width="150"/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td class="table-desktop-only kl-table-subblock" style="width:5%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<div style="font-family:Helvetica,Arial;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;color:#333333;"><div style="text-align:left;"></div></div>
</td>
</tr>
<tr>
<td class="table-desktop-only kl-table-subblock" style="width:5%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<div style="font-family:Helvetica,Arial;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;color:#333333;"><div style="text-align:left;"></div></div>
</td>
<td class="kl-table-subblock" style="width:90%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<div style="font-family:Helvetica,Arial;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;color:#333333;"><div style="text-align:left;"></div></div>
</td>
<td class="table-desktop-only kl-table-subblock" style="width:5%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<div style="font-family:Helvetica,Arial;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;color:#333333;"><div style="text-align:left;"></div></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="background-color:#484a55;vertical-align:top;padding-top:20px;padding-right:9px;padding-bottom:9px;padding-left:9px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td>
<div style="width:100%;text-align:center">
<!--[if true]><table style="all:unset;opacity:0;" border="0" cellpadding="0" cellspacing="0" ><tr><![endif]-->
<!--[if !true]><!--><div class="" style="display:inline-block;padding-right:10px;"><!--<![endif]-->
<!--[if true]><td style="padding-right:10px;"><![endif]-->
<div style="text-align: center;">
<a href="https://www.facebook.com/woolxwool" style="color:#02a196; font-style:normal; font-weight:normal; text-decoration:underline" target="_blank">
<img alt="Custom" src="https://d3k81ch9hvuctc.cloudfront.net/company/MP6AKd/images/c9e35d8d-7416-48aa-b846-127f8a2daf67.png" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; width:50" width="50"/>
</a>
</div>
<!--[if true]></td><![endif]-->
<!--[if !true]><!--></div><!--<![endif]-->
<!--[if !true]><!--><div class="spcblk" style="display:inline-block;"><!--<![endif]-->
<!--[if true]><td style=""><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="10"></td>
</tr></tbody>
</table>
<!--[if true]></td><![endif]-->
<!--[if !true]><!--></div><!--<![endif]-->
<!--[if !true]><!--><div class="" style="display:inline-block;padding-right:10px;"><!--<![endif]-->
<!--[if true]><td style="padding-right:10px;"><![endif]-->
<div style="text-align: center;">
<a href="https://www.pinterest.com/woolxmerinowool/" style="color:#02a196; font-style:normal; font-weight:normal; text-decoration:underline" target="_blank">
<img alt="Custom" src="https://d3k81ch9hvuctc.cloudfront.net/company/MP6AKd/images/bd98fe7f-6b44-49ea-a8c8-66e6978d4cf3.png" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; width:50" width="50"/>
</a>
</div>
<!--[if true]></td><![endif]-->
<!--[if !true]><!--></div><!--<![endif]-->
<!--[if !true]><!--><div class="spcblk" style="display:inline-block;"><!--<![endif]-->
<!--[if true]><td style=""><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="10"></td>
</tr></tbody>
</table>
<!--[if true]></td><![endif]-->
<!--[if !true]><!--></div><!--<![endif]-->
<!--[if !true]><!--><div class="" style="display:inline-block;"><!--<![endif]-->
<!--[if true]><td style=""><![endif]-->
<div style="text-align: center;">
<a href="https://www.instagram.com/woolxwool/" style="color:#02a196; font-style:normal; font-weight:normal; text-decoration:underline" target="_blank">
<img alt="Custom" src="https://d3k81ch9hvuctc.cloudfront.net/company/MP6AKd/images/af6dfee8-7d70-463c-9a14-3ec6c8f1d676.png" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; width:50" width="50"/>
</a>
</div>
<!--[if true]></td><![endif]-->
<!--[if !true]><!--></div><!--<![endif]-->
<!--[if true]></tr></table><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-row-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="kl-row" style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="kl-column-outlook" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix kl-column" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;table-layout:fixed;" width="100%">
<tbody>
<tr>
<td style="font-size:0px;word-break:break-word;" vertical-align="middle">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper hlb-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="hlb-block-settings-content" style="background-color:#484a55;vertical-align:top;padding-top:9px;padding-right:18px;padding-bottom:9px;padding-left:18px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="top" class="kl-header-link-bar" style="font-size:0px;padding:0px 0px 0px 0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:0;" width="100%">
<tbody>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" class="r2-tbl" style="table-layout:fixed;" width="100%">
<tr style="text-align:center;">
<td align="center" class="kl-hlb-wrap inline-block hlb-subblk" style="" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" class="lnk" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="transparent" role="presentation" style="word-break:normal; border:none; border-radius:5px; cursor:auto; font-style:normal; mso-padding-alt:10px 10px 10px 10px; background:transparent" valign="middle">
<a href="https://www.woolx.com/apps/help-center" style='color:#fff; font-style:normal; font-weight:normal; text-decoration:none; display:inline-block; background:transparent; font-family:"Helvetica Neue", Arial; font-size:12px; line-height:100%; letter-spacing:1px; margin:0; text-transform:none; padding:10px 10px 10px 10px; mso-padding-alt:0; border-radius:5px' target="_blank">
FAQ Page
</a>
</td>
</tr>
</table>
</td>
<td align="center" class="kl-hlb-wrap inline-block hlb-subblk" style="" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" class="lnk" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="transparent" role="presentation" style="word-break:normal; border:none; border-radius:5px; cursor:auto; font-style:normal; mso-padding-alt:10px 10px 10px 10px; background:transparent" valign="middle">
<a href="https://www.woolx.com/products/gift-card" style='color:#fff; font-style:normal; font-weight:normal; text-decoration:none; display:inline-block; background:transparent; font-family:"Helvetica Neue", Arial; font-size:12px; line-height:100%; letter-spacing:1px; margin:0; text-transform:none; padding:10px 10px 10px 10px; mso-padding-alt:0; border-radius:5px' target="_blank">
Gift Cards
</a>
</td>
</tr>
</table>
</td>
<td align="center" class="kl-hlb-wrap inline-block hlb-subblk" style="" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" class="lnk" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="transparent" role="presentation" style="word-break:normal; border:none; border-radius:5px; cursor:auto; font-style:normal; mso-padding-alt:10px 10px 10px 10px; background:transparent" valign="middle">
<a href="https://www.woolx.com/pages/woolx-guarantee" style='color:#fff; font-style:normal; font-weight:normal; text-decoration:none; display:inline-block; background:transparent; font-family:"Helvetica Neue", Arial; font-size:12px; line-height:100%; letter-spacing:1px; margin:0; text-transform:none; padding:10px 10px 10px 10px; mso-padding-alt:0; border-radius:5px' target="_blank">
Guarantee
</a>
</td>
</tr>
</table>
</td>
<td align="center" class="table-desktop-only kl-hlb-wrap inline-block hlb-subblk" style="" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" class="lnk" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="transparent" role="presentation" style="word-break:normal; border:none; border-radius:5px; cursor:auto; font-style:normal; mso-padding-alt:10px 10px 10px 10px; background:transparent" valign="middle">
<a href="https://www.woolx.com/pages/woolx-authenticity" style='color:#fff; font-style:normal; font-weight:normal; text-decoration:none; display:inline-block; background:transparent; font-family:"Helvetica Neue", Arial; font-size:12px; line-height:100%; letter-spacing:1px; margin:0; text-transform:none; padding:10px 10px 10px 10px; mso-padding-alt:0; border-radius:5px' target="_blank">
Authenticity
</a>
</td>
</tr>
</table>
</td>
<td align="center" class="table-desktop-only kl-hlb-wrap inline-block hlb-subblk" style="" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" class="lnk" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="transparent" role="presentation" style="word-break:normal; border:none; border-radius:5px; cursor:auto; font-style:normal; mso-padding-alt:10px 10px 10px 10px; background:transparent" valign="middle">
<a href="https://www.woolx.com/pages/about-woolx" style='color:#fff; font-style:normal; font-weight:normal; text-decoration:none; display:inline-block; background:transparent; font-family:"Helvetica Neue", Arial; font-size:12px; line-height:100%; letter-spacing:1px; margin:0; text-transform:none; padding:10px 10px 10px 10px; mso-padding-alt:0; border-radius:5px' target="_blank">
About
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td style="background:#484a55;font-size:0px;word-break:break-word;">
<div style="height:20px;line-height:20px;"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="background-color:#f2f2f2;vertical-align:top;padding-top:20px;padding-right:0px;padding-bottom:9px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-table" style="font-size:0px;padding:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:fixed;width:100%;border:none;" width="100%">
<thead>
<tr>
<th class="kl-table-subblock" style="width:5%;overflow:hidden;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;">
<div style="font-family:Arial;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:1.3;text-align:left;color:#222222;"></div>
</th>
<th class="kl-table-subblock" style="width:90%;overflow:hidden;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;">
<div style="font-family:Arial;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:1.3;text-align:left;color:#222222;"></div>
</th>
<th class="kl-table-subblock" style="width:5%;overflow:hidden;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;">
<div style="font-family:Arial;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:1.3;text-align:left;color:#222222;"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="kl-table-subblock" style="width:5%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<div style="font-family:Helvetica,Arial;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;color:#333333;"><div style="text-align:left;"></div></div>
</td>
<td class="kl-table-subblock" style="width:90%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<div style="font-family:Helvetica,Arial;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;color:#333333;"><div style="text-align:left;"><p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:1em; text-align:center"><span style="font-size:12px;"><span style="color:#666666;"> {{ organization.name }} was born for a need for better. We believe in making a better product that lasts longer and leaves a smaller footprint.<br/>
<br/>
Want to receive more relevant or fewer emails?<br/>
<a href="{% manage_preferences_link %}" style="color:#02a196; font-style:normal; font-weight:normal; text-decoration:underline">Click or tap here to update your preferences</a><br/>
<br/>
<span style="color: rgb(102, 102, 102); font-size: 12px; text-align: center;">You can also, </span><a href="{% unsubscribe_link %}" style="color:#02a196; font-style:normal; font-weight:normal; text-decoration:underline; font-size:12px; text-align:center; max-width:100%"><span style="color: rgb(102, 102, 102);">unsubscribe</span></a><span style="color: rgb(102, 102, 102); font-size: 12px; text-align: center;"> from our email list. But why go! Update your preferences above instead for more relevant or fewer emails.</span></span></span></p>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0; text-align:center"><span style="font-size:12px;"><span style="color:#666666;">{{ organization.name }} | {{ organization.full_address }}</span></span></p>
</div></div>
</td>
<td class="kl-table-subblock" style="width:5%;overflow:hidden;vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<div style="font-family:Helvetica,Arial;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;color:#333333;"><div style="text-align:left;"></div></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td style="background:#484a55;font-size:0px;word-break:break-word;">
<div style="height:0px;line-height:0px;"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
<!--[if mso | IE]></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>