Skip to content
Adobe Commerce Storefront Logo Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.

ProductRating

Use ProductRating to show a product’s average star rating and approved review count on the product details page. For example, place it below the product name. The container renders the summary with the SDK StarRating component.

The summary comes from two Catalog Service product attributes:

  • ac_rating_summary: The average rating on a scale from 0 to 100. The container divides this value by 20 to show a rating from 0 to 5 stars.
  • ac_review_count: The number of approved reviews.

For how these attributes reach Catalog Service, see the Ratings and Reviews overview.

ProductRating receives initial product data during initialization. It then updates when it receives a pdp/data event in the same scope.

When the rating appears

Section titled “When the rating appears”

The container stays hidden unless all of these conditions are met:

  • Both ac_rating_summary and ac_review_count are present in the product data with valid numeric values. The average rating must be between 0 and 100.
  • Both attributes have the visible_in_pdp storefront role. The Product Details drop-in keeps only product attributes with this role.
  • The review count is a whole number greater than 0, so the product has at least one approved review.

ProductRating configurations

Section titled “ProductRating configurations”

Pass these options when you render ProductRating:

Option Type Req? Description
scopestringNo Uses product events from the matching scope. Use the same scope as the other Product Details containers for this product.
showCountbooleanNo Shows the review count next to the stars. Defaults to `true`.
valueDisplaystringNo Controls the numeric rating: `hidden` (default), `value` (for example, *4.5*), or `outOfFive` (for example, *4.5 out of 5*).
countDisplaystringNo Formats the count when it is shown: `text` (default, for example, *12 reviews*) or `parentheses` (for example, *(12)*).
layoutstringNo Arranges the stars and text: `inline` (default) or `stacked`.
sizestringNo Sets the star size: `small` or `medium` (default).
showDividerbooleanNo Adds a divider before the count in the inline layout when the count is shown. Defaults to `false`.
iconIcon sourceNo Uses an SDK icon instead of the default `Star` icon.

The container also accepts standard div attributes, such as className.

Example

Section titled “Example”

This example renders the product header and rating in your existing product details block. It runs inside the block’s decorate function, after Product Details initialization.

The example assumes that your block layout already has two elements: $header for the product header and $rating for the rating. Place $rating below $header in the layout. Use your block’s element variables in place of these names.

blocks/product-details/product-details.js
import { render as pdpRendered } from '@dropins/storefront-pdp/render.js';
import ProductHeader from '@dropins/storefront-pdp/containers/ProductHeader.js';
import ProductRating from '@dropins/storefront-pdp/containers/ProductRating.js';


// Inside decorate(): $header and $rating are elements in the block's layout.
await Promise.all([
  pdpRendered.render(ProductHeader, {})($header),
  // Shows the stars and approved review count, or nothing for unrated products.
  pdpRendered.render(ProductRating, {})($rating),
]);

The two render() calls use the same product data. ProductHeader shows the product name and SKU. ProductRating shows the stars and review count only when the display conditions are met.

  • Numeric rating: To show text such as 4.5 (12), pass valueDisplay: 'value' and countDisplay: 'parentheses' to ProductRating.
  • Scoped product data: If your product data uses a scope, pass that same scope to both containers.