This document can be considered the 5th and final step in including data-driven product offers in your Klaviyo emails. If you'd like to review the previous steps after reading through this entire document, check out these help docs:
After completing this step and adding personalized upsells and cross-sells to your Klaviyo flows, you can expect to:
Increase AOV and revenue with targeted upsells 📈
Maximize conversions through timely cross-sells that excite customers 💰
Surface relevant offers for repeat customers to boost customer lifetime value 🚀
Click the desired collapsible section below to receive the corresponding code for an easy copy-and-paste into your Klaviyo email flows 👇
Template #1: Product Recommendations Block
Template #1: Product Recommendations Block
The Rebuy team has built this easy-to-implement email template that uses Klaviyo's dynamic tables to surface product recommendation blocks, which can offer personalized upsells and cross-sells for your customers. This pre-built email template uses HTML and Klaviyo event variables to remove the manual building work that is typically required.
When using this template, please keep in mind that this will use a single text block (from the left-hand sidebar in Klaviyo's email editor) and will require developer knowledge to customize further.
After dropping the text block into the email, simply copy and paste the code below into the text block's source code (click the </> button in the Styles tab of the text block settings).
Once complete, the email will look like the first screenshot when previewed!
<div id="bodyTable" class="root-container" style="background-position: left top; background-repeat: repeat; background-size: auto; background-color: #f7f7f7;">
<div class="root-container-spacing" style="font-size: 0; padding-bottom: 0px; padding-top: 0px;">
<table class="kl-section" style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section-outlook" style="width:800px;" width="800" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 800px;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<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:800px;" width="800" 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: 800px;">
<table style="background: #ffffff; background-color: #ffffff; width: 100%; border-radius: 0px 0px 0px 0px;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<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"><![endif]-->
<div class="content-padding first last" style="padding: 0px;"><!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-row-outlook" style="width:800px;" width="800" ><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: 800px;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<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:800px;" ><![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 style="vertical-align: top; table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="vertical-align: top; padding: 0px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-text" style="background: #F7F7F7; font-size: 0px; padding: 30px 60px 30px 60px; word-break: break-word;" align="left">
<div style="margin: 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.3; text-align: left; color: #222427;">
<div style="margin: 0;">
<h3 style="color: #222427; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 24px; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.1; margin: 0; margin-bottom: 12px; text-align: center;">Ready to try something new?</h3>
<div style="margin: 0; text-align: center;">If you’re feeling adventerous, we recommend you try our customer favorites, which are picked just for you!</div>
</div>
</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:800px;" width="800" ><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: 800px;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<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:400px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix kl-column" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
<table style="vertical-align: top; table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0px; word-break: break-word;" align="left">
<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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="background-color: #f7f7f7; vertical-align: top; padding: 9px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-image kl-image-3707" style="font-size: 0px; word-break: break-word;" align="left">
<table style="border-collapse: collapse; border-spacing: 0px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-img-base-auto-width" style="width: 382px; border: 0; padding: 0px 0px 0px 0px;" valign="top"><img style="border: 0; height: auto; line-height: 100%; max-width: 100%; outline: none; text-decoration: none; display: block; width: 100%; font-size: 13px;" src="{{ event.rebuy_recommendations_1.data.0.image.src }}" width="382" /></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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="vertical-align: top; padding: 0px;">
<table style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-text" style="background: #F7F7F7; font-size: 0px; padding: 9px 18px 9px 18px; word-break: break-word;" align="left">
<div style="margin: 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.3; text-align: left; color: #222427;">
<div style="margin: 0;">
<table>
<tbody>
<tr>
<td>
<p style="padding-bottom: 0; text-align: left; margin: 0;"><code>{{event.rebuy_recommendations_1.data.0.title}}</code></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p style="padding-bottom: 0; margin: 0;"><code>{{ event.rebuy_recommendations_1.data.0.variants.0.price }}</code></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="background-color: #f7f7f7; vertical-align: top; padding: 9px 18px 9px 18px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-button" style="font-size: 0px; padding: 0px; word-break: break-word;" align="center">
<table style="border-collapse: separate; width: 100%; line-height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: none; border-radius: 25px; cursor: auto; mso-padding-alt: 15px 0px 15px 0px; background: #1B2140;" role="presentation" align="center" valign="middle" bgcolor="#1B2140"><a href="{{ event.rebuy_recommendations_1.data.0.link }}" style="color: #fff; font-style: normal; font-weight: bold; text-decoration: none; display: block; background: #1B2140; font-family: Arial; font-size: 16px; line-height: 100%; letter-spacing: 0; margin: 0; text-transform: none; padding: 15px 0 15px 0; mso-padding-alt: 0; border-radius: 25px;" target="_blank" rel="noopener"> Buy it now </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;" align="left">
<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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="background-color: #f7f7f7; vertical-align: top; padding: 9px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-image kl-image-3708" style="font-size: 0px; word-break: break-word;" align="left">
<table style="border-collapse: collapse; border-spacing: 0px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-img-base-auto-width" style="width: 382px; border: 0; padding: 0px 0px 0px 0px;" valign="top"><img style="border: 0; height: auto; line-height: 100%; max-width: 100%; outline: none; text-decoration: none; display: block; width: 100%; font-size: 13px;" src="{{ event.rebuy_recommendations_1.data.2.image.src }}" width="382" /></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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="vertical-align: top; padding: 0px;">
<table style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-text" style="background: #F7F7F7; font-size: 0px; padding: 9px 18px 9px 18px; word-break: break-word;" align="left">
<div style="margin: 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.3; text-align: left; color: #222427;">
<div style="margin: 0;">
<table>
<tbody>
<tr>
<td>
<p style="padding-bottom: 0; text-align: left; margin: 0;"><code>{{ event.rebuy_recommendations_1.data.2.title }}</code></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p style="padding-bottom: 0; margin: 0;"><code>{{ event.rebuy_recommendations_1.data.2.variants.0.price }}</code></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="background-color: #f7f7f7; vertical-align: top; padding: 9px 18px 9px 18px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-button" style="font-size: 0px; padding: 0px; word-break: break-word;" align="center">
<table style="border-collapse: separate; width: 100%; line-height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: none; border-radius: 25px; cursor: auto; mso-padding-alt: 15px 0px 15px 0px; background: #1B2140;" role="presentation" align="center" valign="middle" bgcolor="#1B2140"><a href="{{ event.rebuy_recommendations_1.data.2.link }}" style="color: #fff; font-style: normal; font-weight: bold; text-decoration: none; display: block; background: #1B2140; font-family: Arial; font-size: 16px; line-height: 100%; letter-spacing: 0; margin: 0; text-transform: none; padding: 15px 0 15px 0; mso-padding-alt: 0; border-radius: 25px;" target="_blank" rel="noopener"> Buy it now </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td><td class="kl-column-outlook" style="vertical-align:top;width:400px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix kl-column" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
<table style="vertical-align: top; table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0px; word-break: break-word;" align="center">
<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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="background-color: #f7f7f7; vertical-align: top; padding: 9px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-image kl-image-3709" style="font-size: 0px; word-break: break-word;" align="center">
<table style="border-collapse: collapse; border-spacing: 0px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-img-base-auto-width" style="width: 382px; border: 0; padding: 0px 0px 0px 0px;" valign="top"><img style="border: 0; height: auto; line-height: 100%; max-width: 100%; outline: none; text-decoration: none; display: block; width: 100%; font-size: 13px;" src="{{ event.rebuy_recommendations_1.data.1.image.src }}" width="382" /></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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="vertical-align: top; padding: 0px;">
<table style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-text" style="background: #F7F7F7; font-size: 0px; padding: 9px 18px 9px 18px; word-break: break-word;" align="left">
<div style="margin: 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.3; text-align: left; color: #222427;">
<div style="margin: 0;">
<table>
<tbody>
<tr>
<td>
<p style="padding-bottom: 0; text-align: left; margin: 0;"><code>{{event.rebuy_recommendations_1.data.1.title}}</code></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p style="padding-bottom: 0; margin: 0;"><code>{{ event.rebuy_recommendations_1.data.1.variants.0.price }}</code></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="background-color: #f7f7f7; vertical-align: top; padding: 9px 18px 9px 18px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-button" style="font-size: 0px; padding: 0px; word-break: break-word;" align="center">
<table style="border-collapse: separate; width: 100%; line-height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: none; border-radius: 25px; cursor: auto; mso-padding-alt: 15px 0px 15px 0px; background: #1B2140;" role="presentation" align="center" valign="middle" bgcolor="#1B2140"><a href="{{ event.rebuy_recommendations_1.data.1.link }}" style="color: #fff; font-style: normal; font-weight: bold; text-decoration: none; display: block; background: #1B2140; font-family: Arial; font-size: 16px; line-height: 100%; letter-spacing: 0; margin: 0; text-transform: none; padding: 15px 0 15px 0; mso-padding-alt: 0; border-radius: 25px;" target="_blank" rel="noopener"> Buy it now </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;" align="left">
<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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="background-color: #f7f7f7; vertical-align: top; padding: 9px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-image kl-image-3710" style="font-size: 0px; word-break: break-word;" align="left">
<table style="border-collapse: collapse; border-spacing: 0px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-img-base-auto-width" style="width: 382px; border: 0; padding: 0px 0px 0px 0px;" valign="top"><img style="border: 0; height: auto; line-height: 100%; max-width: 100%; outline: none; text-decoration: none; display: block; width: 100%; font-size: 13px;" src="{{ event.rebuy_recommendations_1.data.3.image.src }}" width="382" /></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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="vertical-align: top; padding: 0px;">
<table style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-text" style="background: #F7F7F7; font-size: 0px; padding: 9px 18px 9px 18px; word-break: break-word;" align="left">
<div style="margin: 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.3; text-align: left; color: #222427;">
<div style="margin: 0;">
<table>
<tbody>
<tr>
<td>
<p style="padding-bottom: 0; text-align: left; margin: 0;"><code>{{ event.rebuy_recommendations_1.data.3.title }}</code></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p style="padding-bottom: 0; margin: 0;"><code>{{ event.rebuy_recommendations_1.data.3.variants.0.price }}</code></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</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 style="table-layout: fixed;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="background-color: #f7f7f7; vertical-align: top; padding: 9px 18px 9px 18px;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="kl-button" style="font-size: 0px; padding: 0px; word-break: break-word;" align="center">
<table style="border-collapse: separate; width: 100%; line-height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: none; border-radius: 25px; cursor: auto; mso-padding-alt: 15px 0px 15px 0px; background: #1B2140;" role="presentation" align="center" valign="middle" bgcolor="#1B2140"><a href="{{ event.rebuy_recommendations_1.data.3.link }}" style="color: #fff; font-style: normal; font-weight: bold; text-decoration: none; display: block; background: #1B2140; font-family: Arial; font-size: 16px; line-height: 100%; letter-spacing: 0; margin: 0; text-transform: none; padding: 15px 0 15px 0; mso-padding-alt: 0; border-radius: 25px;" target="_blank" rel="noopener"> Buy it now </a></td>
</tr>
</tbody>
</table>
</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>
Template #2: Reorder + Product Recommendations
Template #2: Reorder + Product Recommendations
This second email template will allow you to quickly build a marketing campaign email that drives customers to reorder their previous purchase, while surfacing personalized product recommendations.
Following the same steps as the first email template, copy and paste the following code in the text block's source code (click the </> button in the Styles tab of the text block settings).
Please note: Some technical knowledge is required to update the logo and image header of this email template.
Once complete, the email will look like the screenshot above when previewed!
<html>
<head>
<title>
</title>
<!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<!--<![endif]-->
<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]-->
<!--[if !mso]><!--><!--<![endif]-->
<style>a:link {color:#197bbd;font-weight:normal;text-decoration:underline;font-style:normal}
a:visited {color:#197bbd;font-weight:normal;text-decoration:underline;font-style:normal}
a:active {color:#197bbd;font-weight:normal;text-decoration:underline;font-style:normal}
a:hover {color:#197bbd;font-weight:normal;text-decoration:underline;font-style:normal}</style><style>@import url(https://static-forms.klaviyo.com/fonts/api/v1/Wq7k5w/custom_fonts.css);
#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) {
.hlb-wrapper > table > tbody > tr > td {
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) {
.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 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: 14px !important;
line-height: 1.3 !important
}
}
@media only screen and (max-width: 480px) {
h1 {
font-size: 40px !important;
line-height: 1.1 !important
}
}
@media only screen and (max-width: 480px) {
h2 {
font-size: 32px !important;
line-height: 1.1 !important
}
}
@media only screen and (max-width: 480px) {
h3 {
font-size: 24px !important;
line-height: 1.1 !important
}
}
@media only screen and (max-width: 480px) {
h4 {
font-size: 18px !important;
line-height: 1.1 !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>
<div class="root-container" id="bodyTable" style="background-position:left top; background-repeat:repeat; background-size:auto; background-color:#f7f7f7">
<div class="root-container-spacing" style="font-size:0; padding-bottom:20px; padding-top:50px">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" style="width:800px;" width="800" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:800px;">
<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:800px;" width="800" 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:800px;">
<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" style="padding-left:100px; padding-right:100px; padding-top:0">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-row-outlook" style="width:800px;" width="800" ><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:800px;">
<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:800px;" ><![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="" style="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 align="center" class="hlb-logo" style="display:table-cell;width:100%;padding-bottom:10px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<!--[if true]><td style="width:142px;" bgcolor="transparent"><![endif]-->
<!--[if !true]><!-->
<td style="width:142px;"> <!--<![endif]-->
<img src="https://d3k81ch9hvuctc.cloudfront.net/company/Wq7k5w/images/80ed1c26-1682-4fbb-a906-322a65ea934f.png" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; background-color:transparent" width="142"/>
</td>
</tr>
</tbody>
</table>
</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-72797" 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="kl-img-base-auto-width" style="width:600px;border:0;padding:0px 0px 0px 0px;" valign="top">
<img src="https://d3k81ch9hvuctc.cloudfront.net/company/Wq7k5w/images/13eb8620-3fb3-46e3-b1b5-9ca7c7acc886.png" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; font-size:13px" width="600"/>
</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="background-color:#F7F7F7;vertical-align:top;padding-top:20px;padding-right:18px;padding-bottom:20px;padding-left:18px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="background:#F7F7F7;font-size:0px;padding:0px;padding-top:9px;padding-right:0px;padding-bottom:9px;padding-left:0px;word-break:break-word;">
<div style='margin:0; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.3; text-align:left; color:#222427'>
<table style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td>
<h3 style='color:#222427; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.1; margin:0; margin-bottom:12px; text-align:center'>
<code>
Hi {{ event.rebuy_shopify_order.customer.default_address.first_name }} -- Time to order again!
</code>
</h3>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0; text-align:center">
We hope you enjoyed your order. We thought you might be running low by now, so we thought we would check in and see if you would like to stock up again?
</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="background-color:#F7F7F7;vertical-align:top;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;">
<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;width:100%;line-height:100%;">
<tr>
<td align="center" bgcolor="#1B2140" role="presentation" style="border:none;border-radius:25px;cursor:auto;mso-padding-alt:15px 0px 15px 0px;background:#1B2140;" valign="middle">
<a href="{{ event.rebuy_reorder_landing_page }}" style="color:#FFF; font-style:normal; font-weight:700; text-decoration:none; display:block; background:#1B2140; font-family:Arial; font-size:16px; line-height:100%; letter-spacing:0; margin:0; text-transform:none; padding:15px 0 15px 0; mso-padding-alt:0; border-radius:25px" target="_blank">
Reorder Now
</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: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="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%">
{% if event.rebuy_shopify_order.line_items %}
<thead>
</thead>
<tbody>
{% for item in event.rebuy_shopify_order.line_items %}
<tr>
<td class="kl-table-subblock" style="width:auto;overflow:hidden;vertical-align:top;padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" 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:160px;border:0;padding:0;" valign="top">
<img alt="" src="{{ item.product_json.images.0.src }}" 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="160"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td class="kl-table-subblock" style="width:auto;overflow:hidden;vertical-align:top;padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px;">
<div style="font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#222427;"> <pre><code><a href="{{ item.product_json.link }}" style="color:#197bbd; font-style:normal; font-weight:normal; text-decoration:underline">{{ item.name }}</a><br/>{{ item.price }} • Quantity {{ item.quantity }}</code></pre>
<table>
<tbody>
<tr>
<td>
<pre> </pre>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
{% endfor %}
</tbody>
{% else %}
<tbody>
</tbody>
{% endif %}
</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 align="left" class="kl-text" style="background:#F7F7F7;font-size:0px;padding:0px;padding-top:30px;padding-right:60px;padding-bottom:30px;padding-left:60px;word-break:break-word;">
<div style='margin:0; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.3; text-align:left; color:#222427'>
<div style="margin:0">
<h3 style='color:#222427; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.1; margin:0; margin-bottom:12px; text-align:center'>
Ready to try something new?
</h3>
<div style="margin:0; text-align:center">
If you’re feeling adventerous, we recommend you try our customer favorites, which are picked just for you!
</div>
</div>
</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:800px;" width="800" ><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:800px;">
<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:400px;" ><![endif]-->
<div class="mj-column-per-50 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="left" 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:#F7F7F7;vertical-align:top;padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-image kl-image-72798" 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="kl-img-base-auto-width" style="width:382px;border:0;padding:0px 0px 0px 0px;" valign="top">
<img src="{{ event.rebuy_recommendations_1.data.0.image.src }}" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; font-size:13px" width="382"/>
</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:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:auto" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="background:#F7F7F7;font-size:0px;padding:0px;padding-top:9px;padding-right:18px;padding-bottom:9px;padding-left:18px;word-break:break-word;">
<div style='margin:0; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.3; text-align:left; color:#222427'>
<div style="margin:0">
<table>
<tbody>
<tr>
<td>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0">
<code>
{{ event.rebuy_recommendations_1.data.0.title }}
</code>
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0">
<code>
{{ event.rebuy_recommendations_1.data.0.variants.0.price }}
</code>
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</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:#F7F7F7;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="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;width:100%;line-height:100%;">
<tr>
<td align="center" bgcolor="#1B2140" role="presentation" style="border:none;border-radius:25px;cursor:auto;mso-padding-alt:15px 0px 15px 0px;background:#1B2140;" valign="middle">
<a href="{{ event.rebuy_recommendations_1.data.0.link }}" style="color:#FFF; font-style:normal; font-weight:700; text-decoration:none; display:block; background:#1B2140; font-family:Arial; font-size:16px; line-height:100%; letter-spacing:0; margin:0; text-transform:none; padding:15px 0 15px 0; mso-padding-alt:0; border-radius:25px" target="_blank">
Buy it now
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" 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:#F7F7F7;vertical-align:top;padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-image kl-image-72799" 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="kl-img-base-auto-width" style="width:382px;border:0;padding:0px 0px 0px 0px;" valign="top">
<img src="{{ event.rebuy_recommendations_1.data.2.image.src }}" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; font-size:13px" width="382"/>
</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:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:auto" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="background:#F7F7F7;font-size:0px;padding:0px;padding-top:9px;padding-right:18px;padding-bottom:9px;padding-left:18px;word-break:break-word;">
<div style='margin:0; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.3; text-align:left; color:#222427'>
<div style="margin:0">
<table>
<tbody>
<tr>
<td>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0; text-align:left">
<code>
{{ event.rebuy_recommendations_1.data.2.title }}
</code>
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0">
<code>
{{ event.rebuy_recommendations_1.data.2.variants.0.price }}
</code>
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</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:#F7F7F7;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="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;width:100%;line-height:100%;">
<tr>
<td align="center" bgcolor="#1B2140" role="presentation" style="border:none;border-radius:25px;cursor:auto;mso-padding-alt:15px 0px 15px 0px;background:#1B2140;" valign="middle">
<a href="{{ event.rebuy_recommendations_1.data.2.link }}" style="color:#FFF; font-style:normal; font-weight:700; text-decoration:none; display:block; background:#1B2140; font-family:Arial; font-size:16px; line-height:100%; letter-spacing:0; margin:0; text-transform:none; padding:15px 0 15px 0; mso-padding-alt:0; border-radius:25px" target="_blank">
Buy it now
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="kl-column-outlook" style="vertical-align:top;width:400px;" ><![endif]-->
<div class="mj-column-per-50 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="background-color:#F7F7F7;vertical-align:top;padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="center" class="kl-image kl-image-72800" 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="kl-img-base-auto-width" style="width:382px;border:0;padding:0px 0px 0px 0px;" valign="top">
<img src="{{ event.rebuy_recommendations_1.data.1.image.src }}" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; font-size:13px" width="382"/>
</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:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:auto" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="background:#F7F7F7;font-size:0px;padding:0px;padding-top:9px;padding-right:18px;padding-bottom:9px;padding-left:18px;word-break:break-word;">
<div style='margin:0; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.3; text-align:left; color:#222427'>
<div style="margin:0">
<table>
<tbody>
<tr>
<td>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0; text-align:left">
<code>
{{ event.rebuy_recommendations_1.data.1.title }}
</code>
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0">
<code>
{{ event.rebuy_recommendations_1.data.1.variants.0.price }}
</code>
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</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:#F7F7F7;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="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;width:100%;line-height:100%;">
<tr>
<td align="center" bgcolor="#1B2140" role="presentation" style="border:none;border-radius:25px;cursor:auto;mso-padding-alt:15px 0px 15px 0px;background:#1B2140;" valign="middle">
<a href="{{ event.rebuy_recommendations_1.data.1.link }}" style="color:#FFF; font-style:normal; font-weight:700; text-decoration:none; display:block; background:#1B2140; font-family:Arial; font-size:16px; line-height:100%; letter-spacing:0; margin:0; text-transform:none; padding:15px 0 15px 0; mso-padding-alt:0; border-radius:25px" target="_blank">
Buy it now
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" 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:#F7F7F7;vertical-align:top;padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-image kl-image-72801" 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="kl-img-base-auto-width" style="width:382px;border:0;padding:0px 0px 0px 0px;" valign="top">
<img src="{{ event.rebuy_recommendations_1.data.3.image.src }}" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; font-size:13px" width="382"/>
</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:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="table-layout:auto" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="background:#F7F7F7;font-size:0px;padding:0px;padding-top:9px;padding-right:18px;padding-bottom:9px;padding-left:18px;word-break:break-word;">
<div style='margin:0; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.3; text-align:left; color:#222427'>
<div style="margin:0">
<table>
<tbody>
<tr>
<td>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0; text-align:left">
<code>
{{ event.rebuy_recommendations_1.data.3.title }}
</code>
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0">
<code>
{{ event.rebuy_recommendations_1.data.3.variants.0.price }}
</code>
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</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:#F7F7F7;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="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;width:100%;line-height:100%;">
<tr>
<td align="center" bgcolor="#1B2140" role="presentation" style="border:none;border-radius:25px;cursor:auto;mso-padding-alt:15px 0px 15px 0px;background:#1B2140;" valign="middle">
<a href="{{ event.rebuy_recommendations_1.data.3.link }}" style="color:#FFF; font-style:normal; font-weight:700; text-decoration:none; display:block; background:#1B2140; font-family:Arial; font-size:16px; line-height:100%; letter-spacing:0; margin:0; text-transform:none; padding:15px 0 15px 0; mso-padding-alt:0; border-radius:25px" target="_blank">
Buy it now
</a>
</td>
</tr>
</table>
</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>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" style="width:800px;" width="800" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:800px;">
<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:800px;" width="800" 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:800px;">
<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:9px;padding-left:9px;padding-right:9px;padding-top:9px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
<div class="content-padding last" style="padding-left:100px; padding-right:100px; padding-bottom:0">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-row-outlook" style="width:800px;" width="800" ><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:800px;">
<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:800px;" ><![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;">
<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: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="left" class="kl-text" style="font-size:0px;padding:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
<div style='margin:0; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:400; letter-spacing:0; line-height:1.3; text-align:left; color:#222427'>
<div style="margin:0; text-align:center">
If you prefer not to recieve emails like this, you may {% unsubscribe %}.<br/>{{ organization.name }} {{ organization.full_address }}
</div>
</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>
What's next?
After building your emails with our prebuilt email templates, you're ready to start converting customers and increasing sales! This was the last document in the Klaviyo events + flows series 🎉
Good news, the Rebuy integration for Klaviyo doesn't stop here! We have 2 other integration features that you should check out:
Looking for a compiled list of all the Klaviyo integration help docs? We got you 🤝
Check out this guide: Email & SMS Personalization | Rebuy + Klaviyo