Adding a review GIF into your abandoned cart emails will dynamically display and rotate through the most recent 5-star published reviews per product.
Add the Product Review Block Data Feed
⚠️ Note: You'll need to contact your Customer Success Manager so that they can send you the appropriate Feed URL.
Navigate to your Data Feeds in Klaviyo and add a new web feed using the below:
Feed URL: Contact your Customer Success Manager at Okendo
Required name: product_reviews_gifs
Request Method: GET
Content Type: JSON
Enable the Data Feed
Open your abandoned cart flow in Klaviyo and go to the email editor for your abandoned cart email.
💡 Tip: If your abandoned cart emails are already live, add a new variation of your email so that you can make edits without affecting the live email. You can use this help article to learn how to create an additional variation.
Click on "Data Feeds" in the bottom right of your screen and select your new web feed - product_reviews _gifs - then click save.
Adding the Review Block
Drag and drop a new text block into your email where you'd like the review gif to show.
Click on the new Text block and click "Source" on the left panel to remove any existing dummy copy. Copy the entire code below and paste the code into your source panel, then click save.
{% for value in feeds.product_reviews_gifs %}{% if event.ProductID|slugify == value.productId %}
<table class="kmImageBlock" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; table-layout: fixed; min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; table-layout: fixed; padding: 0px; padding-right: 9; padding-left: 9;" valign="top">
<table class="kmImageContentContainer" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; table-layout: fixed; min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="kmImageContent" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; table-layout: fixed; padding: 0; font-size: 0; text-align: center;" valign="top"><a href="{{ event.extra.checkout_url }}" style="word-wrap: break-word; max-width: 100%; color: #fff; font-weight: normal; text-decoration: underline;" target="_blank" rel="noopener"><img class="kmImage" style="border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 1200px; padding-bottom: 0; display: inline; vertical-align: top; font-size: 12px; width: 100%; padding: 0; border-width: 0;" src="{{ value.gifUrl }}" alt="Welcome back" width="582" align="center" /> </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
{% endif %}{% endfor %}