Solve email design process pitfalls with a Rating Display widget

Rating systems often appear in eCommerce emails, showing how other customers have rated a product. A star-based rating system is one of the most popular and intuitive formats. While they may look appealing, designing them for email templates is often far from straightforward, with challenges that persist even after the initial template is complete.

In this article, we will explore common scenarios you might encounter when working with this email element, and show how our Rating Display widget turns the tedious process of designing (and redesigning) these ratings into a walk in the park with ease of use and editing options.

Situations where a marketer needs a rating in email

As mentioned above, a rating shows a product's quality and assures the recipient it can be trusted. Typically, marketers include such ratings in product listings within their marketing emails. However, beyond this established approach, there are several other ways to leverage visual ratings to your advantage.

For instance, marketers often provide a detailed breakdown, showing the specific scores that make up the overall rating. This level of transparency fosters greater trust and allows recipients to see exactly how many people gave the product or service a particular rating.

(Source: Email from Joggy)

Another effective approach is to include product ratings in abandoned cart emails. A customer might forget to complete their purchase, and seeing a product rating in their email could nudge them to finish checkout. It reminds them that high-quality, highly-rated items are waiting for them in their cart.

(Source: Stripo template)

Besides that, don’t overlook individual reviews. Detailed, personal feedback is well worth sharing, and a clear rating system is a valuable addition. You can complement a customer’s positive review with a star rating, highlighting your five-star product, which adds weight to the feedback and helps drive both product promotion and actual purchases.

(Source: Email from Darn Tough Vermont)

What is the Rating Display widget

First, let’s look at what a Stripo Rating Display widget actually is. Essentially, it is a UI component module you can edit through chat-based interaction, with AI handling all the underlying code changes.

The main idea of widgets is that content is separate from presentation. The rating, review count, and distribution are configuration, while the widget itself generates the HTML. If you change the data or the appearance, everything is recalculated.

The rating is part of a larger library of widgets. Its primary function is to display a product’s rating (represented by stars) along with the total number of reviews. It also automatically adjusts the appearance of the stars (i.e., how many are filled in) based on the number of ratings and the overall score.

Like any other widget in our library, it offers a range of customizable parameters, allowing you to tailor it to your specific needs.

We covered widgets in more detail during our recent webinar, so we recommend checking it out for a better understanding of how they work in the Stripo editor.

 

Case 1: Product card rating

Let’s imagine you are a marketer tasked with creating a promotional email that includes six product cards. Each card needs to display a product’s rating and the number of reviews it has received.

Creating this manually for every single card is a major headache. For one card, you have to design a four-star rating, ensuring the stars are styled consistently, with the fifth star half-filled, and add the text "4.5 out of 5" alongside it, include the phrase "based on 850 reviews," and then align everything correctly within the product card. This entire process must be repeated six times, with each card requiring specific adjustments (updating the review count, the rating value, the star fill levels, etc.).

The time investment isn’t the only issue. Product ratings are dynamic and can change nearly every day. This means reworking the entire design from scratch. Constant updates also invite mistakes. For instance, you might fix the alignment on one card but forget to do the same for the others, or you might neglect to update the review count. These are the kinds of small, easily overlooked mistakes that might go unnoticed until after the email has been sent.

This is where the Rating Display widget comes in, eliminating the need to design it all by hand. The simplest approach is to drag and drop the widget directly below the product name, near the price. Next, you’ll need to configure the widget's content.

Next, update the product rating to the current 4.5 and ensure it has the required 850 reviews. Simply specify this in the chat:

 

The most convenient part is that when the rating changes, the last star fills in too.

You can apply this to all your product cards. Simply add a widget to each one, edit it via the chat interface to update the ratings and star displays, and you’re all set.

Keep in mind that you can place this widget in various spots on a product card. We’ve shown the standard placement right below the product title. However, you could also position the rating beneath the price, which is another classic design approach. And, of course, feel free to experiment by placing the rating in less conventional spots, such as below the "Buy" button.

Alternatively, you can place it before the title. However, for these last two options, we recommend running A/B tests. In fact, any placement of the rating is worth testing, as there is no statistical evidence linking conversion rates to a specific rating position. Run tests to see what works best for your audience.

Case 2: Showing the full rating breakdown

When it comes to showing a product's quality, a product’s overall rating and the total number of reviews aren’t entirely transparent to the recipient, making a detailed breakdown necessary. For instance, a product might have a 4.1 rating based on 121 reviews, but to a potential buyer, this figure lacks context. It could even look suspicious, as if the rating is just made up, and it’s unclear how many reviews fall into each specific rating category. Essentially, this is an issue of how the information is presented.

A great solution is to add a breakdown, a set of horizontal bars showing the distribution of ratings. However, this introduces a pack of design challenges. You need to create five aligned horizontal bars, each with a length proportional to the number of reviews it represents. This involves calculating the correct proportions, designing the bars so they accurately reflect the data, aligning labels, and more. Besides, any change to the overall rating or the count of individual ratings requires recalculating and redesigning the entire breakdown.

The Rating Display widget simplifies and accelerates this process. You simply drag the widget into your product card and set the overall rating and total number of reviews. Then, you can specify via a chat prompt that you need a side-by-side layout with five levels, where each level corresponds to a specific rating (from 1 to 5). The widget will automatically recalculate the total number of reviews based on this distribution (if you set up a different rating and number of reviews).

Typically, a prompt might look like this:

After that, we wait a few seconds, and a layout like this appears. It consists of 5 levels, each filled to a specific length based on the quantity we provided. The component handled all the calculations itself.

Breaking down ratings by the number of votes for each score can work either for or against you. So it’s not a wise decision to display this detailed breakdown if most of the ratings are 3 or lower. Meanwhile, a product rating with most scores being 4s and 5s can positively impact product sales.

Case 3: Testimonial rating

Another option is to use reviews with ratings to help promote a product. These typically include the review text, a simple star rating, a customer photo, a name, and other details depending on the specific niche. A key nuance here is that the rating does not represent an aggregate score derived from many individual scores. It is a single, specific rating provided by one individual. That’s why this type of rating has only stars and no overall number of ratings.

The main pitfall here when designing emails with this type of rating is that each review is unique and formatted individually for every email (for instance, a quote might be longer than usual, or a customer photo might be positioned differently), meaning the rating itself must also be rendered and added on a case-by-case basis.

A Rating Display widget can be particularly useful because its individual elements are easy to remove. By incorporating a standard widget into your template, you can hide both the overall rating and the total number of evaluations with just a quick message in a chat:

Now the design features only stars. For instance, you could move them to the center of this block:

And most importantly, you can change the number of stars in a single message simply by specifying how many should be filled in:

Rendering

Since the rating generated by the widget is non-interactive and has a simple underlying implementation, it is designed to look good and feel right in most cases. For example, here is how the generated rating looks in Outlook's dark mode, which is rather finicky when rendering email content.

And this is how it looks in the light theme. Please note that this is the basic style of this widget, and we have tried to ensure it displays without issues under any conditions. If you tinker with the style settings (change the background color, change the star color, or other elements), the behavior when switching themes and the overall readability of the rating may change.

Besides that, it’s worth noting that even if the recipient disabled image display in their email client, this star rating will still display without a problem. All stars are set as images, so screen readers will also have no problem with them.

Wrapping up

Rating Display widget is your go-to tool if you need to implement a simple and visually appealing rating in your template. Usually, it meant the hassle of designing, calculating, and coding ratings by hand, then keeping them up to date cycle after cycle.

With a Rating Display widget, managing ratings changes in one key way: the numbers become the focus, and you no longer have to worry about the design. You simply enter the rating and its distribution, and the widget automatically recalculates the bars, the fill levels, and the overall score. If the rating changes later, you just update the number; no need to redraw anything.

Choose the settings that best suit the context: display stars and a number within a product card, show the full distribution in a dedicated wide block, or show only stars beneath a customer review. Be sure to keep the numerical value next to the stars, as the widget fills the stars completely. You retain full control, without the need to manually implement every single change.

Widgets not only open up more options to boost your email design. They also make it easy to create, edit, and maintain them, so you don't have to do it all by hand.