❗️This feature is available on Power plans and above.
Adding a rating aggregate to your abandoned cart emails will dynamically pull in product star ratings. If you'd like to pull in reviews to your abandoned cart emails please follow this guide.
In this article, you will learn about;
Once you have completed the following instructions, you’ll see your product star ratings appear under the product title in your abandoned cart emails.
⚠️ Please note that this will only work in Klaviyo flows and not campaigns.
Enable your Klaviyo Feed
Open your Okendo app
Click Settings > Integrations
Click the pencil icon next to Klaviyo
Turn on the Enable Product Review Aggregate Feed toggle
Click Save
⚠️ Note: Once enabled, allow up to 24 hours for your feed to be populated before continuing.
Add the Product Review Aggregate Feed
Navigate to your Klaviyo account > Settings > Other > Web Feeds > Add Web Feed.
Input the following data into the spaces and click update.
Required name: product_review_aggregate
Feed URL: add the url from the Okendo admin
Request Method: GET
Content-Type: JSON
Adding Star Rating Under Product Title
1. Add a Table block to your email. Set the first column to Image and the second column to HTML
2. In the left menu, go to Styles, set the Data to "Dynamic" and confirm that you are using the correct “Row Collection” and “Row Alias”:
Row Collection: event.extra.line_items
Row Alias: item
3. Go to Content > Select Image > Dynamic Image and insert the code below (this is the same code Klaviyo uses in their default abandoned cart email):
{% if item.product.variant.images.0.src %}{{item.product.variant.images.0.src}}{%else%}{{item.product.images.0.src|missing_product_image}}{%endif%}
4. In the second column (HTML) add the following code:
{% with productId=item.product.id|slugify %}
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" style="border:0;">
<tbody>
<tr>
<td style="font-family:'Helvetica Neue', Arial, sans-serif;color:#1d2236;font-size:16px;font-weight:bold;line-height:22px;padding-bottom:6px;">
{{ item.product.title }}
</td>
</tr>
{% for value in feeds.product_review_aggregate %}
{% if productId == value.product_id %}
<tr>
<td style="padding-bottom:8px;">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" style="border:0;">
<tbody>
<tr>
<td style="padding-right:6px;vertical-align:middle;">
<img src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/stars/stars-{% widthratio value.rating 1 10 %}-000000.png" height="14" alt="{{ value.rating }} out of 5 stars" style="height:14px;display:block;border:0;outline:none;text-decoration:none;">
</td>
<td style="vertical-align:middle;font-family:'Helvetica Neue', Arial, sans-serif;font-size:14px;color:#545866;">
{{ value.count }} {% if value.count == 1 %}Review{% else %}Reviews{% endif %}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{% endif %}
{% endfor %}
<tr>
<td style="font-family:'Helvetica Neue', Arial, sans-serif;color:#545866;font-size:14px;line-height:20px;padding-bottom:2px;">
Quantity: {{ item.quantity|floatformat:0 }}
</td>
</tr>
<tr>
<td style="font-family:'Helvetica Neue', Arial, sans-serif;color:#545866;font-size:14px;line-height:20px;">
Total: {% currency_format item.line_price|floatformat:2 %}
</td>
</tr>
</tbody>
</table>
{% endwith %}
⚠️ Because this is configured with HTML, you will either need a developer or a tool like Claude or Codex to make styling changes.
Your table in the editor will look like this:
And when you click Preview and Test it should look like this (if there is a valid Checkout started event with a product that has reviews):
💡If you’d like to update the star color, update the 000000.png section in the code. If it doesn't work, please contact success@okendo.io. We will create a ticket and upload the color to our system, which takes around 3 business days. It won't reflect in the code until we do this.