Star rating badge
Small star badge for product pages, typically near the title or Add to Cart
The star rating badge is a small, compact star display you can add anywhere on the product page — most commonly right under the product title or next to the price. It's lighter than the full reviews widget and works well as a "tap to scroll to reviews" link.
When to use the badge vs. the full widget
Use both together — they serve different jobs:
- Star rating badge — a quick visual signal at the top of the page, where shoppers first land. Shows the rating and total count, nothing else.
- Product reviews widget — the full list and form, lower on the page where shoppers go to dig in.
If the product has no reviews yet, the badge hides itself automatically so the page doesn't show empty stars.
Adding the badge
- Open a Product template in the theme editor
- Click Add block in the product section and choose Star Rating Badge from the Apps list
- Drag it just under the title, next to the price, or wherever it fits your design
- Save
How the rating is calculated
The badge reads from the reviews.rating and reviews.rating_count standard metafields on the product. The app maintains these automatically every time a review is approved, edited, unpublished, or deleted. The number you see matches the average of every approved, published review for that product.
Settings
In the theme editor, you can adjust:
- Star color and empty star color
- Star size (12–24px)
- Margins above and below the badge
The badge uses inline SVG stars, so it loads instantly and never causes layout shift.