> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/additional-features/extensions/product-boxes/rating.md).

# Rating

The **product rating** shows the average rating of a product in the product box. You decide **where** it sits – in the text area or directly on the product image – and **what** it shows: stars only, stars with the number of reviews, or a compact number.

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2Ff7BUlz3R8khdLp0tIVWL%2Fimage.png?alt=media&amp;token=0ed1f2a4-ca36-4d6d-81a3-a5d8bcc21fbc" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Looking for the rating on the product page?** For the buy box it is described in the article [Rating on product pages](/additional-features/extensions/rating-on-product-pages.md).
{% endhint %}

{% hint style="info" %}
**Note**: Products without a rating show nothing by default. With the "always show product rating" option, empty stars are displayed instead.
{% endhint %}

{% hint style="info" %}
**Note**: Product reviews are a core function of Shopware. ThemeWare® extends how they are displayed in the product box with placement, content and appearance.

Whether reviews are possible and visible at all is controlled centrally in the Shopware settings ("Settings" > "Shop" > "Products" > "Show reviews"). To learn how to manage, approve and comment on reviews, see: [Reviews](https://knowledge.themeware.design/knowledge-base/shopware/configuration/reviews)
{% endhint %}

***

## Configuration

### **Theme configuration**

1. Go to the "**Listing pages**" tab
2. Expand the "**Product box**" block
3. Scroll to the section "**Product rating**"
4. Choose the desired option under "**Show product rating**"
5. Use "**Placement**" to define whether the rating sits in the box or on the product image
6. Choose what is displayed under "**Content**"
7. Save your changes after editing

***

## Options

* **Show product rating**
  * "don't show": The rating does not appear in the product box.
  * "show (default)": The rating appears as soon as the product has been rated.
  * "always show product rating": The rating also appears for products that have not been rated yet – as empty stars. This keeps all product boxes at the same height.
* **Placement**
  * "in the box (default)": In the text area – the exact spot is defined by "Position (in the box)".
  * "on the product image": Placed over the image – the exact spot is defined by "Position (on product image)".
* **Position (in the box)**
  * "above the product name (default)"
  * "below the product name"
* **Position (on product image)**
  * "top right", "bottom right", "bottom left" or "bottom center (default)"
* **Content**
  * "Simple (default)": Stars only.
  * "Detailed": Stars + number of reviews in brackets (shown as soon as the review count is available).
  * "Number": Compact number instead of stars (e.g. "3.4 ★"). The decimal separator follows the storefront language.
* **Layout type (in the box)**
  * "Standard": Plain stars.
  * "Decorated": Stars flanked by lines (follows the text alignment).
* **Layout type (on product image)**
  * "Box": Background + shadow (better legibility on the image).
  * "Clean": No background/shadow – the stars sit directly on the image.
* **Corner type (on product image)**
  * "not rounded"
  * "rounded corners": Uses the "Rounded corners" configuration ("Layout" > "Layout" > "Rounded corners").
  * "round corners (Pill)": Uses a predefined radius for round corners.
* **Hover effect (on product image)**
  * "always visible (default)"
  * "reveal on hover": The rating stays hidden and slides in when the product box is hovered.
  * "hide on hover": The rating is visible and slides out when the product box is hovered – handy to free up the image for the buttons appearing there.
  * The direction it slides in or out follows the alignment.

{% hint style="info" %}
**Note**: "Layout type (on product image)", "Corner type (on product image)" and "Hover effect (on product image)" only take effect when the rating sits on the product image. "Corner type" additionally only applies to the "Box" layout type. The hover effect has no effect on touch devices – there the rating stays permanently visible.
{% endhint %}

{% hint style="warning" %}
**Note**: The positions "top right", "bottom right" and "bottom left" can overlap with the wishlist and Quickview button (see "Position" in the "Wishlist button" section).
{% endhint %}

***

## Appearance of the stars

How the stars themselves are drawn is defined centrally via the "**Star style**" – solid or as an outline. The setting applies everywhere stars appear, so on the product page and in the testimonials as well. The same is true for the "Star" and "Star (blank)" colours.

***

## Summary

#### Theme configuration

* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Show product rating
* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Placement
* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Position (in the box)
* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Position (on product image)
* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Content
* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Layout type (in the box)
* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Layout type (on product image)
* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Corner type (on product image)
* Tab "Listing pages" => Block "Product box" => Section "Product rating" => Hover effect (on product image)
* Tab "Layout" => Block "Product rating" => Section "Basic configuration" => Star style
* Tab "Layout" => Block "Product rating" => Section "Colour configuration" => Star
* Tab "Layout" => Block "Product rating" => Section "Colour configuration" => Star (blank)
