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

You can customize your Star Rating Badge and see a live preview of your changes with sample data or no reviews, before saving. Adjust texts, colors, and display options, and watch the badge update instantly — helping you fine-tune its look before publishing to your store.

1. Texts

Available on the Free plan

To change the texts in the Star Ratings Badge:

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

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

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

  4. 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. Star icons

Available on the Free plan

To set whether the texts will show in 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. Scroll down to the Display properties section.

  4. Select from the following options:

    • "Show stars only"

    • "Show text and stars" (default)

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

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

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

  3. Scroll down to the Display properties section.

  4. Choose from the following options:

    • "Always show the widget"

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

  5. Click Save.
    ​

3. Number of stars

Available on the Awesome plan

To set how many star icons to show in 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. Scroll down to the Display properties section.

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

  5. Click Save.

Customize the Star Rating Badge with CSS

Add custom CSS in Judge.me

Available on the Awesome plan

To add custom CSS in Judge.me for the 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 find and open the Advanced section at the bottom.

  4. Add the CSS code in the Custom CSS (Advanced) editor. The Custom CSS editor is limited to 500 characters.

  5. Click Save.

Please note that:

  • The Custom CSS editor is limited to 500 characters.

  • All custom CSS added here is automatically wrapped in Review Widget-specific class (.jdgm-preview-badge) to prevent global pollution.

Example CSS you can add in Judge.me to adjust elements of the Star Rating Badge:

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

Add custom CSS in the Shopify theme editor

Available on the Free plan

To add CSS in Shopify Theme Editor for the Star Rating Badge:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit and click Customize.

  3. On the left menu, click the Theme settings icon

  4. Scroll down to Custom CSS and add your CSS code.

  5. Click Save.

Example CSS you can add in Shopify theme editor to customize elements in the Star Rating Badge:

What you want to change

CSS code

To hide or remove the Star Rating Badge from a specific product page

.jdgm-preview-badge[data-id="YOUR_PRODUCT_ID"] {
    display: none;
}
Related Articles
Adding the Star Rating Badge to collection pages (2.0 themes)
Customizing the Review Widget (legacy version)
All Reviews Counter
Adding the Star Rating Badge on your product page
Adding the Star Rating Badge to collection pages (Horizon themes)
Did this answer your question?