Review Percent Bar
A solid bar that fills to a percentage pulled from the CMS.
Last updated
How to use
Connect
⛁ Percentto a star-rating percentage variable on the Products CMS collection.Pick the
FilledandEmptycolors.Style
BorderandRadius.Size the bar on the canvas — the fill tracks the frame's width and height.
What the fill represents
The bar fills left-to-right to match a 0–100 percentage — typically Recommended %, or a single star level's share of ratings when building a distribution chart. The value is clamped to 0–100 — until a CMS variable is connected it shows a 75% example, and a connected value of 0 renders a fully empty track. It's a static stat, not an interactive control. For screen readers, it exposes itself as an image labeled with the rounded percentage.
Building a rating-distribution chart
To recreate an Amazon-style rating breakdown, stack one bar per star level and bind each to its matching percentage variable, with a text label beside it.
Data freshness
This reads 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 lands.