Adding a review block to your abandoned cart emails will dynamically pull in the most recent 5-star published reviews per product.
Once you have completed the following instructions, you’ll see reviews appear in your abandoned cart emails. Please note that this will only work in Klaviyo flows and not campaigns.
Enable your Klaviyo Feed in Okendo
Open your Okendo app
Click Settings > Integrations
Click the pencil icon next to Klaviyo
Turn on the Enable Product Top Reviews Feed toggle
Click Save.
⚠️ Note: It may take up to 24 hours for your feed URL to populate.
Add the Product Review Block Data Feed
Navigate to your Klaviyo account > Settings > Web Feeds > Add Web Feed.
Input the following data and click update.
Required name: product_reviews
Request Method: GET
Content-Type: JSON
⚠️ Note: In Klaviyo’s New Editor, web feeds are automatically enabled so you don’t need to further action.
Adding the Review Block
On your left panel, select "Rows" > "Data Source" and confirm that you are using the correct “Row Collection” and “Row Alias”.
Row Collection: event.extra.line_items
Row Alias: item
If you aren’t using this data source (item.product.title), you’ll need to insert the custom code further down the page.
Drag and drop a new text block into your email where you'd like the review block 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 source again to save.
{% with maxProductCount=0 maxReviewCountPerProduct=0 starHex='000000' %}
{% for lineItem in event.extra.line_items %}
{% if maxProductCount == 0 or forloop.counter <= maxProductCount %}{% with productId=lineItem.product.id|slugify product=lineItem.product %}
{% for key, reviews in feeds.product_reviews.items %}
{% if productId == key %}
<h4 style="text-align: center;padding-top:20px;">See why others bought {{ product.title }}</h4>
{% for review in reviews %} {% if maxReviewCountPerProduct == 0 or forloop.counter <= maxReviewCountPerProduct%}
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:5px 25px 0px 25px;word-break:break-word;">
<div style="font-family:Century Gothic, sans-serif;font-size:13px;line-height:18px;text-align:center;color:#1d2236;">
<div><img alt="1 Star" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="2 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="3 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="4 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="5 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /></div>
</div>
</td>
</tr>
<tr>
<td align="center" class="align-center" style="font-size:0px;padding:0px 25px 5px 25px;word-break:break-word;">
<div style="font-family:Century Gothic, sans-serif;font-size:18px;font-weight:bold;line-height:22px;text-align:center;color:#1d2236;">{{ review.title }}</div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:0 25px 5px 25px;word-break:break-word;" vertical-align="middle">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tbody>
<tr>
<td align="center" role="presentation" style="border:none;cursor:auto;mso-padding-alt:10px 25px;" valign="middle">
<p style="font-size:16px; line-height:16px;">{{ review.body|truncatewords:50 }}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" class="align-center" style="font-size:0px;padding:0 25px 5px 25px;word-break:break-word;">
<div style="font-size:14px;line-height:22px;text-align:center;color:#1d2236;">{{ review.displayName }}</div>
</td>
</tr>
</tbody>
</table>
{% endif %} {% endfor %} {% endif %} {% endfor %} {% endwith %} {% endif %} {% endfor %} {% endwith %}
⚠️ Note: If you aren’t using the standard Data Source (item.product.title) you’ll need to use the below custom event snippet of code.
{% with maxReviewCountPerProduct=0 starHex='000000' %}
{% with productId=event.ProductID|slugify %} {% for key, reviews in feeds.product_reviews.items %} {% if productId == key %}
<h4 style="text-align: center;padding-top:20px;">SEE WHAT OTHERS ARE SAYING</h4>
{% for review in reviews %}{% if maxReviewCountPerProduct == 0 or forloop.counter <= maxReviewCountPerProduct%}
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:5px 25px 0px 25px;word-break:break-word;">
<div style="font-family:Century Gothic, sans-serif;font-size:13px;line-height:18px;text-align:center;color:#1d2236;">
<div><img alt="1 Star" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="2 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="3 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="4 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="5 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{starHex | lower }}.png" style="padding:0 1px" width="20" /></div>
</div>
</td>
</tr>
<tr>
<td align="center" class="align-center" style="font-size:0px;padding:0px 25px 5px 25px;word-break:break-word;">
<div style="font-family:'Source Sans Pro', Trebuchet MS, sans-serif;font-size:18px;font-weight:bold;line-height:22px;text-align:center;color:#4a4a49;">{{ review.title }}</div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:0 25px 5px 25px;word-break:break-word;" vertical-align="middle">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tbody>
<tr>
<td align="center" role="presentation" style="border:none;cursor:auto;mso-padding-alt:10px 25px;" valign="middle">
<p style="font-size:16px; line-height:16px;">{{ review.body|truncatewords:50 }}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" class="align-center" style="font-size:0px;padding:0 25px 15px 25px;word-break:break-word;">
<div style="font-size:14px;line-height:22px;text-align:center;color:#4a4a49;">{{ review.displayName }}</div>
</td>
</tr>
</tbody>
</table>
{% endif %} {% endfor %} {% endif %} {% endfor %} {% endwith %} {% endwith %}
Klaviyo Spacing Issue
Klaviyo's New Editor will occasionally add extra code that inserts large spaces into the text block.
To rectify this issue, you'll need to remove <div> </div> from the code. Please refer to the video below on how to action this.
If there are still spacing issues, contact support@okendo.io and request that they create a ticket to resolve.
Customizations to the Review block
The review block offers some degree of customizability that can be done by changing the variables in the first line of the code.
⚠️ Note: Please make sure that there are no spaces between the equal sign and the value. Adding a space will result in a syntax error and Klaviyo will reject the template.
Limit the Number of Product Reviews in the Review Block
Update this value to control the maximum number of products that show reviews in the block.
Locate “maxProductCount” in the code block. The 0 value is our standard value and will display reviews for up to 5 products in the email.
Changing this value to 1 will display reviews from only the first product in the email. Changing this value to 2 will display reviews from the first 2 products in the email... and so on.
Limit the Number of Reviews that Show Per Product
Update this value to control the number of reviews that will show per product in the block.
Locate “maxReviewCountPerProduct” in the code block. The 0 value is our standard value and will display the 5 most recent 5-star published reviews per product.
Changing this value to 1 will display only 1 review for each product in the email. Changing this value to 2 will display 2 reviews for each product in the email... and so on.
Change Star Color
Our standard star color is hex 000000. To change the star color, locate “starHex” in the code block and update your hex value accordingly.
⚠️ Note: Not all hex values have been generated. If you have broken star images:
Log into your Okendo app
Click on emails under mail
Click on review reply (it will not work unless you use this specific template)
Click on styling
Toggle on override global styling
Change the star color to your hex color
Wait for the live preview to update
Preview the email in Klaviyo again.
To insert a review aggregate, please see our help article here.