Commmerce Docs
← Web Components

Web Components · Product

<mmm-product-rating>

A 5-star rating row for a product card. Reads rating and reviews_count from the per-product store; renders five star icons filled to the rating fraction with an optional review-count line.

Overview

Half-star precision — a rating of 4.3 renders four full stars plus a ~30% filled fifth star. When no rating data is present on the product, the element renders nothing.

When to use

  • Inside <mmm-product-card> as social proof in the card.
  • For category / search grids where rating drives click-through.
  • Skip the count with show-count="false" for tighter cards.

Quick start

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

<mmm-product-card data-product='{"slug":"classic-tee","rating":4.3,"reviews_count":124}'>
  <mmm-product-rating star-size="0.875rem" show-count="true"></mmm-product-rating>
</mmm-product-card>

Attributes

AttributeTypeDefaultDescription
star-sizestring0.875remWidth & height of each star icon.
star-colorstring#ffc107Filled-star colour.
empty-star-colorstring#e5e7ebEmpty / partial-star background colour.
show-countbooleantrueRender the (N) review-count after the stars.
count-colorstringtheme secondary textReview-count text colour.
count-font-sizestring0.75remReview-count font size.
custom-cssstring—Extra CSS appended inside the shadow DOM.
classstring—Standard HTML class list.

Live preview

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

Examples

1. Stars + count (default)

<mmm-product-rating></mmm-product-rating>

2. Compact (no count, tight stars)

<mmm-product-rating star-size="0.75rem" show-count="false"></mmm-product-rating>

3. Dark-mode card colours

<mmm-product-rating
  star-color="#c8a8ff"
  empty-star-color="#2a2e33"
  count-color="#9ca3af"></mmm-product-rating>