← Web Components

Web Components · PDP

<mmm-pdp-rating>

5-star rating + clickable review-count line for the PDP. Stars are rendered as text glyphs with half-star precision; clicking the review count scrolls to (or opens) the reviews section.

Overview

Reads productInfo.rating and productInfo.reviewsCount from PDP_STORE. Renders nothing if rating data is absent. The "(N reviews)" line is independently styled and interactive (hover colour + cursor + transition).

When to use

  • Just below the PDP title.
  • Inside a sticky-buy panel where social proof drives conversion.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-pdp-rating stars-color="#ffc107" reviews-color="#6d7175"></mmm-pdp-rating>

Attributes

AttributeTypeDefaultDescription
container-displaystringflexDisplay of the stars + reviews row.
container-align-itemsstringcenterCSS align-items.
container-gapstring0.625remGap between stars block and review count.
container-margin-bottomstring1.25remSpacing below the block.
stars-colorstring#FFD700Star colour.
stars-font-sizestring1.125remStar glyph size.
stars-letter-spacingstring0.125remLetter-spacing between stars.
reviews-colorstringtheme secondary text / #666Review-count text colour.
reviews-font-sizestring0.875remReview-count font size.
reviews-text-decorationstringunderlineReview-count link decoration.
reviews-hover-colorstring#000Colour on hover.
reviews-cursorstringpointerCursor over the review count.
reviews-transitionstringcolor 0.3s easeHover transition.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Events

EventTargetPayload
pdp:reviews-clickedhost{ productSlug, totalReviews, averageRating }

Live preview

store sample-store tag <mmm-pdp-rating>

Examples

1. Default

<mmm-pdp-rating></mmm-pdp-rating>
<mmm-pdp-rating
  stars-font-size="1.25rem"
  reviews-color="#c8a8ff"
  reviews-hover-color="#fff"
  reviews-font-size="0.9375rem">
</mmm-pdp-rating>

3. Compact, no underline

<mmm-pdp-rating
  container-gap="0.25rem"
  stars-font-size="0.875rem"
  reviews-font-size="0.75rem"
  reviews-text-decoration="none">
</mmm-pdp-rating>