The Problem
At checkout, there was no direct display of product ratings, even though the business already collected and synced reviews through REVIEWS.io. Customers had to rely on memory or go back to product pages if they wanted to double-check how well a product was rated. That created unnecessary friction and missed an opportunity to use social proof at the final step before conversion.
The Solution
We implemented a Product Stars block directly in checkout, using a Checkout UI extension. For products in the cart, the extension reads rating data from product metafields and shows a compact star rating with average score and total number of reviews. Stars are rendered consistently, and the rating is rounded using a simple rule, so only full and half-stars are shown, matching the constraints of the checkout UI.
Why It Mattered
Showing ratings at checkout gives customers last-minute reassurance that the products they chose are appreciated by other buyers, which increases trust and reduces back-and-forth navigation. It leverages existing REVIEWS.io data exactly where it's most valuable at the point of purchase, and supports higher completion rates without changing the core checkout flow.
Technical Details
Built as part of a Checkout UI extension using a dedicated React component with its own checkout target, so it doesn't conflict with other checkout modules. Rating data is pulled from two product metafields (reviewscouk.rating and reviewscouk.total), synced with REVIEWS.io. All text and translations live inside the extension; star icons are uploaded to the store's Files area.
