Skip to main content

Display specific product reviews in Klaviyo emails

Pull your highest-rated product reviews into Klaviyo emails using a web feed and dynamic review block code.

Written by Simon Mainwaring

Overview

When an email promotes one product, its own reviews make the strongest case. Add a review block for that product to your Klaviyo emails, and its most recent 5-star published reviews appear in the email automatically.

To show reviews from across your store instead, see Display all product reviews in Klaviyo emails.


Before you begin

🔔 The review block for Klaviyo is available on the Power plan and above. View pricing.

Connect Klaviyo to Okendo, if you haven't already: see Integrating Klaviyo with Okendo.


Add the product review block data feed

  1. Open your Okendo app

  2. Click Okendo Admin > Settings > Integrations > Copy User ID (you'll need this in step 5)

    Copying the User ID in Okendo

  3. In Shopify navigate to Products and select the product from which you'd like display reviews

    Opening a product in Shopify

  4. Copy the number that comes after ‘…/products/’ in the URL. This is the product ID.

    Product ID in the Shopify product URL

  5. Insert the User ID (from step 2) and Product ID (example above) in the bold sections of the feed URL: https://api.okendo.io/v1/stores/UserID/products/shopify-productID/reviews?limit=5&orderBy=rating%20desc

  6. Navigate to Web Feeds in Klaviyo

    Opening Web Feeds in Klaviyo

  7. Add the following info in the web feed fields:

    • Feed name: store_reviews

    • Feed URL: (from step 5)

    • Request Method: GET

    • Content-Type: JSON

    Filling in the Klaviyo web feed fields


Adding the review block

  1. Drag and drop a new HTML block into your email where you'd like the review block to show.

    HTML block in the Klaviyo editor

  2. Insert the code below

    {% with maxReviewCount=5 starHex='000000' %}
    <h4 style="text-align: center;padding-top:20px;">SEE WHAT OTHERS ARE SAYING</h4>
    {% for review in feeds.store_reviews.reviews %} {% if maxReviewCountPerProduct == 0 or forloop.counter <= maxReviewCount %}

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

    Review block in the Klaviyo editor

  3. Then select Preview & test

⚠️ If reviews don't populate, double-check that the user ID and product ID are correct. If a particular product doesn't have any reviews yet, nothing will show.

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.

⚠️ When editing the first line of code, 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 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.

⚠️ Not all hex values have been generated. If you have broken star images:

  1. Log into your Okendo app

  2. Click on “emails” under “mail”

  3. Click on “review reply”

  4. Click on “styling”

  5. Toggle on “override global styling”

  6. Change the star color to your hex color

  7. Wait for the live preview to update

  8. Check Klaviyo again.

Did this answer your question?