ProductRating

Purpose

ProductRating renders the star rating of a product: five stars filled to the average, the average value, and a button with the review count.

It is rendered only when the store setting that enables ratings is on. The reusable itself has no visibility condition: when the product has no reviews it still renders gray stars and (0).

Where it's rendered

ProductGridItem, ProductGridItemClassic and ProductListItem, when GlobalData.Settings.ShowRatingOnProductCards is on.

VariantContent and VariantContentClassic (quick-add modal), when ShowRatingOnProductCards is on.

ProductSingle, when GlobalData.Settings.ShowRatingOnProductPage is on.

Inputs (Liquid render parameters)

rating

The product rating object (productData.rating), with average and count. Without reviews (or when missing) the empty state is rendered.

alias

Optional product alias. When set, the count button navigates to /product/{alias}#product-review. When omitted, it scrolls to the .productReviews section of the current page.

size

Optional. md renders larger stars; any other value uses the small size.

Behavior

The filled width of the stars is average * 20 percent, capped at 100.

The average is rounded to one decimal.

The group aria-label is {average} {OutOf5} - {count} {Reviews}, or 0 {Reviews} when there are no reviews. It is HTML-escaped because it comes from translations.

The count button stops click and Enter/Space propagation, so it can be used inside clickable product cards.

Translations

Reusables/ProductRating/Default.json:

OutOf5

Reviews

Customization

Components that render it expose the slot model.Settings.ProductRatingReusable, which swaps ProductRating for another reusable.

JavaScript

Default.js defines an empty productratingreusabledefault object; the reusable has no client-side logic of its own.

ProductRating

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Behavior#

Translations#

Customization#