Review container

The Review container shows one page of approved product reviews. Each review includes the reviewer’s name, rating, date, title, and text. The default heading is Reviews.

Call getProductReviews to load the first page. The container listens for reviews/* events with a matching scope. When it mounts, it also processes the last event for that scope. If a request fails, the Try again button requests the same page again.

Configurations

Use these options to configure Review:

Option	Type	Req?	Description
scope	string	No	Identifies which review events the container receives. Use the same value that you pass to `getProductReviews`.
totalCount	number	No	Total number of approved reviews. Set to zero or a positive integer to show the count (for example, 12 reviews) instead of Reviews. Use the actual total, not the current page length or `totalPages * pageSize`.
slots	object	No	Replaces or extends the heading, status message, loading skeleton, review rows, and footer. See [Review slots](/dropins/ratings-reviews/slots/#review-slots).

The container also accepts standard div attributes, such as className, id, and dir, and applies them to its wrapper.

States

The wrapper’s data-state attribute identifies the current state. Use it to style the container with CSS.

State	When	What shoppers see
`loading`	Before the first request, or while a request is in progress	Three placeholder rows. The wrapper sets `aria-busy="true"`, and the hidden status message Loading reviews… is available to screen readers.
`ready`	The current page has reviews	The review list, with dividers between reviews.
`empty`	The current page has no reviews	No reviews on this page.
`unavailable`	The `reviews` query returned `null`	Reviews are unavailable.
`error`	The request failed	Unable to load reviews. and a Try again button that requests the same page again.

When isProductReviewsEnabled is false, the container renders nothing, including slots. Guest review permissions do not affect the list: shoppers can read reviews even when they must sign in to write one.

Review rows

Each row displays these fields from ProductReviewModel:

Author: The row shows By followed by the reviewer’s name.
Rating: Five stars represent the review’s rating. The numeric value appears to one decimal place, such as 4.0. Reviews with no rating votes show Not rated.
Date: The row shows the calendar day from the server, without the time of day. The Review.dateLocale label controls the format. The default, en-US, produces dates such as Sep 17, 2026. Invalid dates are omitted.
Title and text: The title appears as a heading, followed by the review text. Line breaks in the text are preserved.

Shopper-entered content appears as text, not HTML. In containers at least 900 px wide, the author column appears beside the review content. In narrower containers, such as a sidebar or modal, the author appears above the content.

Example

This example displays Review and requests the first page of reviews. It uses the initializer from the Ratings and Reviews quick start:

1
import { getProductReviews } from '@dropins/storefront-ratings-reviews/api.js';
2
import { render as provider } from '@dropins/storefront-ratings-reviews/render.js';
3
import { Review } from '@dropins/storefront-ratings-reviews/containers/Review.js';
4
// Loads review settings before the container checks them.
5
import '../../scripts/initializers/ratings-reviews.js';
6

7
export default async function decorate(block) {
8
  const scope = 'product-reviews';
9
  const $reviews = document.createElement('div');
10
  block.append($reviews);
11

12
  // provider.render(Container, props) returns a function that mounts the container into an element.
13
  await provider.render(Review, { scope })($reviews);
14

15
  // Replace ADB102 with your product SKU. The container shows its own error state.
16
  getProductReviews('ADB102', { pageSize: 20, currentPage: 1, scope }).catch(() => undefined);
17
}

Replace ADB102 with the product SKU whose reviews you want to show.

The container and request use the same scope, so the container receives the review events from that request.
The request loads page one with up to 20 reviews. To load another product or page, call getProductReviews again with the same scope.