Annotate emails in the Promotions tab for Gmail - Display carousel as preview text

m-a-game
Contributor I
0 replies
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;"> &nbsp;
</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>
icon
Best answer by retention 28 February 2023, 18:03
View original
13 replies

Userlevel 7
+57
retention
Champion & Partner
758 replies
1 year ago
28 February 2023
Answer
Hi @m-a-game, welcome to the community!
There’s a few folks I’ve seen here in this community that are experimenting with Google Annotations and AMP.
You can find a thread about it here:
It looks like they were able to get it to work by using an HTML Template format and not the Klaviyo Editor and you need to update a setting in your Klaviyo account to allow HTML snippets to stay untouched.
Let us know how if it worked out.
jc.britwyn
Contributor I
2 replies
1 year ago
1 March 2023
I don't think they already solved it. Someone has made it work using microdata but it's still not working for some people including me.
rbeck
Contributor I
1 reply
1 year ago
6 March 2023
@m-a-game can confirm what @jc.britwyn mentioned above is true. I’ve also spent a while trying to integrate it into our emails and failed with the JSON script and microdata methods.

Does anyone have any idea when Klaviyo will support Google Annotations?
+36
Brian Turcotte
Community Manager
1315 replies
1 year ago
8 March 2023
Hi @rbeck!
I don’t have any timeline yet, but I can assure you that this feature is definitely on our Product Team’s radar. I will update the thread when I know more.
Thanks,
Brian
robyncraftsy
Contributor I
1 reply
1 year ago
13 March 2023
🙋Also would like to be able to add Google’s image carousel feature in the Promo tab - aka Annotate emails in the Promotions tab - either Klaviyo template or HTML (prefer template with added code).
chrishooman
Contributor II
4 replies
1 year ago
7 April 2023
Please add this asap. It’s a great feature we need to take advantage of, to have images showing in the gmail promotions email feed.
sampw
Contributor II
3 replies
11 months ago
12 May 2023
Ditto those asking this feature gets expedited.
After 4 hours of tinkering I’m giving up with trying to solve this without Klaviyo acknowledging support for it.
MitchS
Contributor I
1 reply
7 months ago
22 September 2023
It seems like this has been on the radar for a couple of years - We would love to be able to take advantage of this! It seems other email ESPs are already providing.
sampw
Contributor II
3 replies
7 months ago
22 September 2023
As the months roll on, we’re seeing more and more of our competitors actively using this feature as part of the email campaigns.
Still waiting eagerly for Klaviyo to implement support for this.
Userlevel 4
+12
stam_marko
Expert Problem Solver II
57 replies
6 months ago
27 October 2023
Any news on that @Brian Turcotte?
Lindsey0986
Contributor I
1 reply
5 months ago
3 November 2023
I am also hoping to get more information about this. Please let us know the progress on this functionality.
Hello! Any news on the feasibility of this? Was trying to implement following google instructions but hit a wall when I found this thread.
If anyone could let me know, it’d be great! thanks :)
CKUK
Contributor IV
14 replies
1 month ago
22 March 2024
It is crazy that such a basic feature is still missing! It’s literally just a few text boxes to add to the editor! Every other platform I’ve heard of supports this
Annotate emails in the Promotions tab for Gmail - Display carousel as preview text

13 replies

Reply

Most helpful members this week

Reply

Most helpful members this week

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded
