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.

Example of the Star Rating Badge

On the Product page

On the Collections page

Add Star Ratings to your store

Installation steps vary depending on your e-commerce platform:

We also integrate with Searchanise, BoostCommerce, SparQ, and Nextopia to display the Judge.me Star Rating Badge on collection and search results pages.

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 Widgets > Star Rating Badge > Customize.

  • Click Customize text.

  • Adjust the texts to your likings and click Save.

Option

Default texts

Star rating text (no reviews)

No reviews

Star rating text

{{ n }} review/reviews

If you don't want to show any text next to the stars:

  • From your Judge.me admin, go to Widgets > Star Rating Badge > Customize.

  • Scroll down to Display properties and select "Show stars only" (default to "Show text and stars").

  • Click Save.

2. Choose how the Star Rating Badge will show

To show Star Rating badge even if there are no reviews:

  • From your Judge.me admin, go to Widgets > Star Rating Badge > Customize.

  • Scroll down to Display properties and select "Always show the widget" (default to "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 Widgets > Star Rating Badge > Customize.

  • Scroll down to Display properties.

  • Under Number of stars, select "1".

  • Click Save.

Customize your Star Rating Badge with CSS

To apply more custom styling to your Star Rating Badge:

  1. From your Judge.me admin, go to Widgets > Star Rating Badge > Customize.

  2. Scroll down to Advanced and open the Custom CSS (Advanced) editor.

  3. Add in the CSS code.

  4. Click Save.

To center the Star Rating Badge on mobile screens

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

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.

Did this answer your question?