Review Stars

Shows a product's average star rating as 5 stars, set from the CMS.

Last updated

August 14, 2026

How to use

Set Display to Rating (the default 5-star row) or Icon (a single filled star for pairing with legend labels).
In ⛁ Rating mode, connect ⛁ Rating to the Avg Rating variable on the Products CMS collection.
Pick a Style: Sharp, Smooth, Bold, Classic, or Soft.
Set Size, and for Rating mode, Gap and the Empty star color.
Pick the Filled star color.

Rating mode vs. Icon mode

`Mode`	What it shows	CMS connection
`Rating`	A row of 5 stars filled from the live average, with a partial fill on the last star for decimals — e.g. 4.3 fills 4 full stars plus 30% of a fifth.	Requires `⛁ Rating` connected to the `Avg Rating` CMS field.
`Icon`	A single, always-filled star — useful next to a legend label like "5" or "4" so the glyph matches the rating row.	None.

Why the stars might not show

On the live site, a product whose Avg Rating is 0 (no reviews yet) hides the component entirely rather than rendering an empty row. If ⛁ Rating isn't connected to CMS at all, you can manually set the star rating for a preview or in the context of a legend.

The rating comes from the review-summary fields synced onto your Products collection, so it's only as fresh as the last Reviews/Products sync — it won't update the instant a new review comes in.

This component shows the average only. Pair it with a review-count text layer bound to the Total Count field for something like "4.5 (123)".