Adding a review block into 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 your reviews appear in your abandoned cart emails.

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.

Open your Okendo app and go to "Settings" > "Integrations" to make sure your "Shoelace" integration is enabled.

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
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 the Data Feeds Settings button and select your new web feed - product_reviews - then click save

Adding the Review Block

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 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 %}

Adding a Review Block into Other Klaviyo Emails

If you would like to add the reviews block to emails other than the Abandoned Cart emails in Klaviyo, you can do so by following the same above steps but replacing the code with the below:

{% 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 %}

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 syntax error and Klaviyo will reject the template.

Limit the Number of Product Reviews in the Review Block

Update this value to control the max 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” > click on “styling” > toggle on “override global styling” > change the star color to your hex color > wait for the live preview to update > check Klaviyo again.

Did this answer your question?