The Star Rating Badge shows the average star rating and review count on your product and collection pages. It helps shoppers quickly assess your products and adds trusted social proof, ultimately boosting your store’s conversion rate.

Example of the Star Rating Badge

On the Product page:

On the Collections page:

How we calculate the Star Rating Badge

We calculate the average rating and display the star icons using the following logic:

4.76 to 4.99 → rounds up to a full star
4.26 to 4.75 → rounds up to a half star
Values below 4.26 follow a similar rounding pattern based on the average rating.

This ensures the Star Rating Badge provides a clear visual summary while remaining accurate and fair to all your reviews.

Star Rating Badge settings

1. Adjust the texts in the Star Ratings Badge

To change how the texts will show in your Star Ratings Badge:

From your Judge.me admin, go to Settings > Widgets.
Find the Star Ratings Badge card and click Customize.
Under the Text section, click Customize text.
Edit the text fields as needed.
Click Save to apply your changes.

Option	Default texts	Variables
Star rating text (no reviews)	No reviews
Star rating text	`{{ n }}` review/reviews	Variables that you can use in the Star rating text: Number of reviews: `{{ n }}` Average rating: `{{ average_rating }}` Average rating (short), with 1 decimal: `{{ average_rating_1_decimal }}`

If you don't want to show any text next to the stars, follow these steps:

From your Judge.me admin, go to Settings > Widgets.
Find the Star Ratings Badge card and click Customize.
Scroll down to the Display properties section.
Select Show stars only (the default is Show text and stars).
Click Save to confirm your changes.

2. Choose how the Star Rating Badge will show

To show the Star Rating Badge even if there are no reviews:

From your Judge.me admin, go to Settings > Widgets.
Find the Star Ratings Badge card and click Customize.
Scroll to the Display properties section.
Select Always show the widget (the default is Hide the widget if the product has no reviews).
Click Save.

To show only 1 star icon instead of 5:

From your Judge.me admin, go to Settings > Widgets.
Find the Star Ratings Badge card and click Customize.
Scroll to the Display properties section.
Under Number of stars, select 1.
Click Save to confirm your changes.

You can see a live preview of your Star Rating Badge on the right as you customize it:

Customize your Star Rating Badge with CSS

To apply more custom styling to your Star Rating Badge:

From your Judge.me admin, go to Settings > Widgets.
Find the Star Rating Badge card and click Customize.
Under the Advanced panel, open the Custom CSS (Advanced) editor.
Add your custom CSS code in the editor box.
Click Save to apply your changes.

To center the Star Rating Badge on mobile screens

@media only screen and (max-width: 900px) {
    .jdgm-preview-badge {
        text-align: center!important;
    }
}

To make the Stars and Texts in the Star Rating Badge show in 2 lines on mobile screens

@media only screen and (max-width: 900px) {  
    .jdgm-prev-badge__stars::after {   
        content:"\a";    
        white-space: pre;  
    }
}

Get your free trial

🎨 Start your 15-day Awesome Plan free trial to unlock all advanced widgets and customizations that take your reviews to the next level.

Follow us on LinkedIn

📢 Stay in the loop! Follow Judge.me on LinkedIn for the latest product updates, tips, and feature launches.

Adding the Star Rating Badge on your collection page

Adding Judge.me widgets (Stencil theme)

Adding the Star Rating Badge on your product page

Collecting reviews with only star ratings

Adding star ratings in Upsell & Cross Sell by SSC product recommendations