Skip to main content

Star Rating Badge

Shows the average star rating and review count on your product and collection pages

Updated this week

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

To update the look and feel of the Star Rating Badge:

  1. From your Judge.me admin, go to Settings > Widgets.

  2. Find the Star Ratings Badge card and click Customize.

  3. There, you can adjust the following elements:
    ​

1. The Star Ratings Badge texts

Available on the Free plan

To change the texts in the Star Ratings Badge:

  1. In the Text section, click Customize text.
    ​

  2. 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

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

  1. Scroll down to the Display properties section.

  2. Select from the following options:

    • "Show stars only"

    • "Show text and stars" (default)

  3. Click Save.

2. 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:

  1. Scroll down to the Display properties section.

  2. Choose from the following options:

    • "Always show the widget"

    • "Hide the widget if the product has no reviews" (default)

  3. Click Save.
    ​

3. Number of star icons

Available on the Awesome plan

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

  1. Scroll down to the Display properties section.

  2. 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

  3. Click Save.

Customize the Star Rating Badge with CSS

Available on the Awesome plan

To apply more custom styling to your Star Rating Badge:

  1. From your Judge.me admin, go to Settings > Widgets.

  2. Find the Star Rating Badge card and click Customize.

  3. Scroll down to the Advanced section.

  4. Open the Custom CSS (Advanced) editor.

  5. Paste the CSS code from the table below into the editor.

  6. 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;  
    }
}
Related Articles
Adding the Star Rating Badge on your collection page
Adding Judge.me widgets (Stencil theme)
Floating Reviews Tab
All Reviews Counter
Adding the Star Rating Badge on your product page
Did this answer your question?