How Can We Help?
Categories
< All Topics
Print

Klaviyo template support on Auction Today

After activating klaviyo create a template using this html

​<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]> <xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<title></title>
<style type="text/css">
@media only screen and (min-width: 620px) {
.u-row {
width: 600px !important;
}

.u-row .u-col {
vertical-align: top;
}

.u-row .u-col-50 {
width: 300px !important;
}

.u-row .u-col-100 {
width: 600px !important;
}

}

@media (max-width: 620px) {
.u-row-container {
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
}

.u-row .u-col {
min-width: 320px !important;
max-width: 100% !important;
display: block !important;
}

.u-row {
width: calc(100% - 40px) !important;
}

.u-col {
width: 100% !important;
}

.u-col > div {
margin: 0 auto;
}
}

body {
margin: 0;
padding: 0;
}

table,
tr,
td {
vertical-align: top;
border-collapse: collapse;
}

p {
margin: 0;
}

.ie-container table,
.mso-container table {
table-layout: fixed;
}

* {
line-height: inherit;
}

a[x-apple-data-detectors='true'] {
color: inherit !important;
text-decoration: none !important;
}

table, td {
color: #000000;
}

@media (max-width: 480px) {
#u_column_1 .v-col-padding {
padding: 0px 0px 30px !important;
}

#u_column_8 .v-col-padding {
padding: 0px 0px 30px !important;
}

#u_content_heading_13 .v-font-size {
font-size: 24px !important;
}

#u_column_2 .v-col-padding {
padding: 30px 0px !important;
}

#u_content_heading_10 .v-font-size {
font-size: 24px !important;
}

#u_column_4 .v-col-padding {
padding: 30px 0px !important;
}
}

.link-btn {
border-radius: {{ event.appearanceModel.customerPlaceBidButtonCornerRadius }}px;
background: {{ event.appearanceModel.customerPlaceBidButtonBackgroundColor }};
color: {{ event.appearanceModel.customerPlaceBidButtonTextColor }};
padding: 8px 12px;
text-decoration: none;
}

.link-btn:hover {
color: {{ event.appearanceModel.customerPlaceBidButtonTextColor }};
}

.body-text, .body-text > h5 {
color: {{ event.appearanceModel.contentTextColor }};
}
</style>
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet"
type="text/css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap" rel="stylesheet"
type="text/css"><!--<![endif]-->
</head>
<body class="clean-body u_body"
style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #ffffff;color: #000000">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #ffffff;width:100%"
cellpadding="0" cellspacing="0">
<tbody>
<tr style="vertical-align: top">
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<!--[if (mso)|(IE)]> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="background-color: #ffffff;"><![endif]-->
<div class="u-row-container"
style="padding: 0px;background-color: {{ event.appearanceModel.headingBackgroundColor }}">
<div class="u-row"
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
<div
style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 0px;background-color: #ffffff;" align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
<tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]> <td align="center" width="300" class="v-col-padding"
style="width: 300px;padding: 0px 0px 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent; align-items: center;display: flex;"
valign="top"><![endif]-->
<div id="u_column_1" class="u-col u-col-50"
style="max-width: 320px;min-width: 300px;display: table-cell;vertical-align: top;">
<div style="height: 100%;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div class="v-col-padding"
style="display: flex; align-items: center; height: 100%; padding: 0px 0px 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
<!--<![endif]-->
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;"
align="left">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right: 0px;padding-left: 0px;"
align="center">
<img align="center" border="0" src="{{ event.logo }}"
alt="" title=""
style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;max-width: 50px;"
width="50" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]> <td align="center" width="300" class="v-col-padding"
style="width: 300px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"
valign="top"><![endif]-->
<div class="u-col u-col-50"
style="max-width: 320px;min-width: 300px;display: table-cell;vertical-align: top;">
<div
style="height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
<!--[if (!mso)&(!IE)]><!-->
<div class="v-col-padding"
style="display: flex;align-items: center; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
<!--<![endif]-->
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;"
align="left">
<div
style="line-height: 650%; text-align: center; word-wrap: break-word;">
<p style="color: {{ event.appearanceModel.headingTextColor }} ;font-size: 14px; line-height: 650%; text-align: center;">
<strong>{{ event.shop_name }}</strong></p>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<div>
<div class="u-row-container"
style="padding: 0px;background-color: {{ event.appearanceModel.descriptionBackgroundColor }}">
<div class="u-row"
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
<div
style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 0px;background-color: #fbf4ec;" align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
<tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]> <td align="center" width="600" class="v-col-padding"
style="width: 600px;padding: 0px 0px 40px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"
valign="top"><![endif]-->
<div id="u_column_8" class="u-col u-col-100"
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
<div style="height: 100%;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div class="v-col-padding"
style="height: 100%; padding: 0px 0px 40px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
<!--<![endif]-->
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:10px 20px;font-family:arial,helvetica,sans-serif;"
align="left">
<div class="body-text v-font-size"
style="margin: 0px; line-height: 140%; text-align: center; word-wrap: break-word; font-weight: normal; font-family: 'Montserrat',sans-serif; font-size: 14px;">
{{ event.contentModel.content | safe }} </div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<div class="u-row-container"
style="padding: 0px;background-color: {{ event.appearanceModel.productBackgroundColor }}">
<div class="u-row"
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
<div
style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 0px;background-color: transparent;" align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
<tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]> <td align="center" width="600" class="v-col-padding"
style="width: 600px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"
valign="top"><![endif]-->
<div id="u_column_2" class="u-col u-col-100"
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
<div
style="height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
<!--[if (!mso)&(!IE)]><!-->
<div class="v-col-padding"
style="height: 100%; padding: 50px 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
<!--<![endif]-->
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:15px 10px 10px;font-family:arial,helvetica,sans-serif;"
align="left">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right: 0px;padding-left: 0px;"
align="center">
<img align="center" border="0"
src="{{ event.contentModel.image_url }}"
alt="image"
title="image"
style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 278px;"
width="278" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td
style="overflow-wrap:break-word;word-break:break-word;padding:10px 10px 5px;font-family:arial,helvetica,sans-serif;"
align="left">
<div class="body-text v-font-size"
style="margin: 0px; line-height: 100%; text-align: center; word-wrap: break-word; font-weight: normal; font-family: 'Playfair Display',serif; font-size: 20px;">
<strong>{{ event.contentModel.product_name }}</strong>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-family:arial,helvetica,sans-serif; margin-top: 48px;"
role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
{% if event.contentModel.showPlaceBid == true %} <td
style="overflow-wrap:break-word;word-break:break-word;padding:0px 10px 10px;font-family:arial,helvetica,sans-serif;"
align="center">
<a href='{{ event.contentModel.product_url }}'
class='link-btn shoppy_place_bid_button'>{{ event.appearanceModel.customerPlaceBidButtonText }}</a>
</td>
{% endif %} {% if event.contentModel.completePurchase == true %} <td
style="overflow-wrap:break-word;word-break:break-word;padding:0px 10px 10px;font-family:arial,helvetica,sans-serif;"
align="center">
<a href='{{ event.contentModel.purchase_url }}'
class='link-btn shoppy_purchase_button'> {{ event.appearanceModel.customerMakePurchaseButtonText }} </a>
</td>
{% endif %} </tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
</div>
<div class="u-row-container"
style="padding: 0px;background-color: {{ event.appearanceModel.footerBackgroundColor }}">
<div class="u-row"
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
<div
style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 0px;background-color: #000000;" align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
<tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]> <td align="center" width="600" class="v-col-padding"
style="width: 600px;padding: 35px 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"
valign="top"><![endif]-->
<div id="u_column_4" class="u-col u-col-100"
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
<div
style="height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
<!--[if (!mso)&(!IE)]><!-->
<div class="v-col-padding"
style="height: 100%; padding: 35px 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
<!--<![endif]-->
<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0"
cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap:break-word;word-break:break-word;padding:30px 20px;font-family:'Lato',sans-serif;"
align="left">
<div
style="color: #ffffff; line-height: 140%; text-align: center; word-wrap: break-word;">
<p style="color: {{ event.appearanceModel.footerTextColor }} ;font-size: 14px; line-height: 140%">{{ event.footerModel.footer | safe }}</p>
<p style="font-size: 14px; line-height: 140%;">&nbsp;</p>
<p style="color: {{ event.appearanceModel.footerTextColor }} ;font-size: 14px; line-height: 140%">{{ event.footerModel.address }}</p>
<p style="font-size: 14px; line-height: 140%;">&nbsp;</p>
<p style="font-size: 14px; line-height: 140%;">
<a href="{{ event.footerModel.shop_link }}"
style="color: {{ event.appearanceModel.footerLinkColor }}"
target="_blank" rel="noopener">Shop</a> <span
style="color: {{ event.appearanceModel.footerLinkColor }}"> | </span>
<a href="{{ event.footerModel.login_link }}"
style="color: {{ event.appearanceModel.footerLinkColor }}"
target="_blank" rel="noopener">My Account</a>
</p>
<p style="color: {{ event.appearanceModel.footerTextColor }} ;font-size: 14px; line-height: 140%">
No longer want to receive these emails? {% unsubscribe %}.</p>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
</html>
​

After creating the template now is time to setup the flow,
The topic we will send email based on :Customer placed a new bid
Customer own auction
Placed new bid
Auction own
Lost auction
Someone placed higher bid


Based on all topics send a test email so that those topics will be available in klaviyo

Available variables

​{{ event.shop_name }} //to show shop name
{{ event.logo }} //to show logo
{{ event.contentModel.content | safe }} //to show the body content
{{ event.contentModel.image_url }} //to show the product image
{{ event.contentModel.product_name }} //to show product name
{{ event.contentModel.bid_amount }} //to show bid amount

{% if event.contentModel.completePurchase == true %} // when to show once customer won the auction
{{ event.contentModel.purchase_url }} // draft order url
{{ event.appearanceModel.customerMakePurchaseButtonText }} // purchase button test
{% endif %}

{{ event.footerModel.footer | safe }} //to show footer text
Table of Contents