1. Home
  2. Integrations
  3. How to add Opinew review stars and featured review for product in Klaviyo’s abandoned cart flow

How to add Opinew review stars and featured review for product in Klaviyo’s abandoned cart flow

Learn how to add a rating aggregate and a featured review to your abandoned cart emails dynamically.

Enable your Klaviyo Feed

Open your Opinew app, click ‘Integrations’, and select the Klaviyo card. Then enable the Klaviyo feed option and copy your feed URL.

Klaviyo Abandoned Cart Flow 1

You can now select the stars’ color in your email template. Select the one you prefer:

Klaviyo Abandoned Cart Flow - Opinew settings for colors

Don’t forget to click ‘Save’ after copying your feed URL.

Add the Product Review Aggregate Feed

Navigate to your Data Feeds in Klaviyo and click ‘Add web feed’. To do that go to Account -> Settings -> Web Feeds:

Klaviyo Abandoned Cart Flow - Create Web Feeds

Add a new web feed using the info below:

  • Required name: opinew_klaviyo_feed

Important note: The name needs to be exactly as mentioned above to work correctly, if the name is different the integration will not work.

  • Feed URL: Your feed URL, paste this from your Opinew app.
  • Request Method: GET
  • Content-Type: JSON
Klaviyo Abandoned Cart Flow - Data Feed Example

Finally, click ‘Add data feed’.

Adding Star Rating Under Product Title

Select the product block, where the products from the cart will populate. The example below is within the Shopify Abandoned Cart Reminder Flow.

Klaviyo Abandoned Cart Flow - Build email and add snippets code

Once you click it, on your left panel select Table settings, then Dynamic and confirm that you are using the correct “Row Collection” and “Row Alias”.


Row Collection: event.extra.line_items
Row Alias: item

Klaviyo Abandoned Cart Flow - Add snippets code 2

On that same left panel, select Content, then click the Text icon and Source code. Then paste the below snippet of code under an existing Quantity <p> tag.

Klaviyo Abandoned Cart Flow - Check snippet code
{% with product=item.product %} {% with productId=item.product.id|slugify %} 
<div style="padding-top: 20px;">
{% for value in feeds.opinew_klaviyo_feed.data %} {% if productId == value.id %} {% if value.review_number > 0 %}
</div>

<table cellpadding="0" cellspacing="0" style="border:0;">
	<tbody>
		<tr>
			<td style="padding-top:2px;padding-right:2px"><img height="94" src="https://cdn.opinew.com/klaviyo-stars/opinew_stars_{{ value.stars_color }}_{{ value.png_star_num }}.png" style="height:14px;" /></td>
			<td>
			<p style="padding-top:1px;padding-left:2px;font-size:14px;">{{ value.average_stars }} stars from {{ value.review_number }} {% if value.review_number > 1 %} Reviews {% endif %}{% if value.review_number == 1 %} Review {% endif %}</p>
			</td>
		</tr>
	</tbody>
</table>
{% endif %}<br />
{% if value.featured_review != None %}
<p><i>'{{ value.featured_review }}'</i></p>
{% endif %} {% endif %}{% endfor %}{% endwith %} {% endwith %}

Feel free to adjust the padding and borders according to your needs.

If you only want to only show ratings on products over a certain rating in the product block, you can use the following code snippet instead:

{% with product=item.product %} {% with productId=item.product.id|slugify %} 
<div style="padding-top: 20px;">
{% for value in feeds.opinew_klaviyo_feed.data %} 
{% if value.average_stars > YOUR_VALUE_HERE %} {% if productId == value.id %} {% if value.review_number > 0 %}
</div>

<table cellpadding="0" cellspacing="0" style="border:0;">
	<tbody>
		<tr>
			<td style="padding-top:2px;padding-right:2px"><img height="94" src="https://cdn.opinew.com/klaviyo-stars/opinew_stars_{{ value.stars_color }}_{{ value.png_star_num }}.png" style="height:14px;" /></td>
			<td>
			<p style="padding-top:1px;padding-left:2px;font-size:14px;">{{ value.average_stars }} stars from {{ value.review_number }} {% if value.review_number > 1 %} Reviews {% endif %}{% if value.review_number == 1 %} Review {% endif %}</p>
			</td>
		</tr>
	</tbody>
</table>
{% endif %}<br />
{% if value.featured_review != None %}
<p><i>'{{ value.featured_review }}'</i></p>
{% endif %} {% endif %}{% endif %}{% endfor %}{% endwith %} {% endwith %}

And on the second line, in this part:

{% if value.average_stars > YOUR_VALUE_HERE %}

Replace YOUR_VALUE_HERE with the actual value you want the average star rating to start showing, with a value from 0 to 5. For example, if you want to show the block only for products with a star rating of 4.5 and above this would be your code:

{% with product=item.product %} {% with productId=item.product.id|slugify %} 
<div style="padding-top: 20px;">
{% for value in feeds.opinew_klaviyo_feed.data %} 
{% if value.average_stars > 4.5 %} {% if productId == value.id %} {% if value.review_number > 0 %}
</div>

<table cellpadding="0" cellspacing="0" style="border:0;">
	<tbody>
		<tr>
			<td style="padding-top:2px;padding-right:2px"><img height="94" src="https://cdn.opinew.com/klaviyo-stars/opinew_stars_{{ value.stars_color }}_{{ value.png_star_num }}.png" style="height:14px;" /></td>
			<td>
			<p style="padding-top:1px;padding-left:2px;font-size:14px;">{{ value.average_stars }} stars from {{ value.review_number }} {% if value.review_number > 1 %} Reviews {% endif %}{% if value.review_number == 1 %} Review {% endif %}</p>
			</td>
		</tr>
	</tbody>
</table>
{% endif %}<br />
{% if value.featured_review != None %}
<p><i>'{{ value.featured_review }}'</i></p>
{% endif %} {% endif %}{% endif %}{% endfor %}{% endwith %} {% endwith %}

Once you do that you can click on ‘Preview and test’ to see what it will look like:

Klaviyo Abandoned Cart Flow - Reviews preview

Note: you can also recreate these steps in all the email templates from flows triggered by Shopify events that have this block:

Go to your product reviews page and select your product. There, click on the three-dot icon in the review you want to feature and click ‘Set as marketing featured review’ :

click three dots icon and set as marketing featured reviews

Then you will see a badge in your featured review for marketing.

check marketing featured review badge

That’s it! Save your template in Klaviyo, configure your abandoned cart flow, and don’t forget to set it to live to start using it.

If your featured review has photos and you want to show them in your email, paste this block right below the first one:

{% with product=item.product %} {% with productId=item.product.id|slugify %} {% for value in feeds.opinew_klaviyo_feed.data %} {% if productId == value.id %} {% if value.review_number > 0 %}
{% for image in value.featured_review_images %}<img height="84" src="{{ image }}" style="height:44px;" /> {% endfor %}
{% endif %} {% endif %}{% endfor %}{% endwith %} {% endwith %}

If you want to make them smaller/bigger, change the style="height:44px;" size and set it as you want (in pixels):

Learn more about our integration with Klaviyo.

Updated on August 7, 2023
Was this article helpful?

Related Articles

Leave a Comment