You can add product star ratings to your cart layouts and SmartBlocks to highlight product quality and increase shopper engagement. This method uses Jinja to convert a numerical rating value into a visual set of stars, which you can display in cart abandonment emails or product recommendations. Use this approach when your data source stores only a numeric rating and you need to create a star‑based visual representation in your layout.
Before you start
Things you need to know:
Contact Support to request this feature.
You can use HTML symbols, for example, https://www.toptal.com/designers/htmlarrows/symbols/black-star/, instead of images and then use CSS to style them.
Jinja code
If your data source only includes a numeric value, you can still create a star rating with the Jinja code.
See the below example to learn how to do it:
{# this assumes the rating is stored in product.ex.rating but you may need to check that is the case #}
{% for x in range(product.ex.rating|round|int) %}
<img src="http://path/to/your.image/1star.jpg">
{% endfor %}
{% for x in range((5) - (product.ex.rating|round|int)) %}
<img src="http://path/to/your.image/emptystar.jpg">
{% endfor %}The first For statement loops over the value and adds the amount of stars based on the rating, for example, product rating 3.5/5 = add 3 stars.
The second For statement loops over the value and adds the remaining amount, for example, product rating 3.5/5 = add 2 empty stars.
You can add any styling you require to the images or around the block.
This code rounds the value to the nearest integer; 3.5 rounds to 3.
This code assumes you have two images; one for a full star and one for an empty star.