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.

How it looks

On the Product page:

On the Collections page:

How the Star Rating Badge works

We calculate the average rating of the product 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.

Set up your Star Rating Badge

Customize the Star Rating Badge with built-in settings

1. The texts in the Star Ratings Badge

Available on the Free plan

To change the texts in the Star Ratings Badge:

From your Judge.me admin, go to Settings > Widgets.
Find the Star Ratings Badge card and click Customize.
In the Text section, click Customize text.
Edit the texts in the following fields to your likings and click Save:

Field	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 field: Number of reviews: `{{ n }}` Average rating: `{{ average_rating }}` Average rating (short), with 1 decimal: `{{ average_rating_1_decimal }}` Example: 4.5 out of 5 (8 reviews): change default texts to `{{ average_rating }}` out of 5 (`{{ n }}` reviews) Rated 4.8/5 based on 120 reviews: change the default texts to Rated `{{ average_rating_1_decimal }}`/5 based on `{{ n }}` reviews 25 customers rated this 4.7 stars: change the default texts to `{{ n }}` customers rated this `{{ average_rating }}` stars

2. Text and stars

Available on the Free plan

To set whether the texts will show in the Star Rating Badge:

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 from the following options:
- "Show stars only"
- "Show text and stars" (default)
Click Save.

3. Star Rating Badge for products with no reviews

Available on the Free plan

To set whether to show the Star Rating Badge when there are no reviews for the product:

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.
Choose from the following options:
- "Always show the widget"
- "Hide the widget if the product has no reviews" (default)
Click Save.

3. Number of stars

Available on the Awesome plan

To set how many star icons to show in the Star Rating Badge:

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.
In the Number of stars dropdown, select from the following options:
- "1" to show only 1 star icon
- "5 (Default)" to show 5 star icons
Click Save.

Customize the Star Rating Badge with CSS

Available on the Awesome plan

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.
Scroll down to the Advanced section.
Open the Custom CSS (Advanced) editor.
Paste the CSS code from the table below into the editor.
Click Save.

What you want to change

CSS code

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;  
    }
}

Adding the Star Rating Badge on your collection page

Floating Reviews Tab

All Reviews Counter

Collecting reviews with only star ratings

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