# Product rating

<figure><img src="/files/q0yfz5Bkxs4UpzxYsJOl" alt=""><figcaption></figcaption></figure>

## Overview

A comprehensive product rating display block that renders the rating information for a product. The block supports various styling options, alignment controls, and responsive visibility settings to seamlessly integrate with different product layouts and themes.

## Common use cases

* Configure the product resource setting to specify which product's rating to display
* Display product ratings on product pages and product cards
* Show customer reviews and ratings to build trust

## Block settings

### General

| Setting                | Description                                     | Options                   |
| ---------------------- | ----------------------------------------------- | ------------------------- |
| Show advanced settings | Reveals icon type, icon display, and visibility | Checkbox (default: false) |

### Content

| Setting | Description                              | Options        |
| ------- | ---------------------------------------- | -------------- |
| Product | Select the product to display rating for | Product picker |

### Spacing

| Setting                   | Description                               | Options                   |
| ------------------------- | ----------------------------------------- | ------------------------- |
| Enable horizontal padding | Adds horizontal padding around the rating | Checkbox (default: false) |
| Enable top padding        | Adds top padding around the rating        | Checkbox (default: false) |
| Enable bottom padding     | Adds bottom padding around the rating     | Checkbox (default: false) |

### Color

| Setting    | Description             | Options                                                                                                                                                                                                                                                      |
| ---------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Text color | Controls the text color | <p>• Default (default)<br>• Alternative<br>• Primary background<br>• Primary foreground<br>• Secondary background<br>• Secondary foreground<br>• Tertiary background<br>• Tertiary foreground<br>• Neutral background<br>• Neutral foreground<br>• Shade</p> |

### Style

| Setting      | Description                                   | Options                                                                                                                                                                                                             |
| ------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Icon type    | Shape of rating icons                         | <p>• Star (default)<br>• Circle<br>• Square<br><br>Visible when icon display is not "none"</p><p><br><br>Visible when <strong>Icon display</strong> != 'none' and <strong>Show advanced settings</strong> is on</p> |
| Icon display | Controls how rating icons are displayed       | <p>• None<br>• Default (default)<br>• Simple</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p>                                                                                           |
| Icon style   | Style variant for rating icons                | <p>• Classic (default)<br>• Sharp<br><br>Visible when icon display is not "none"</p>                                                                                                                                |
| Icon size    | Size of rating icons                          | <p>10 - 100 px (default: 14)<br><br>Visible when icon display is not "none"</p>                                                                                                                                     |
| Font family  | Controls the font family used for rating text | <p>• Standard<br>• Heading<br>• Subheading<br>• Accent<br><br>Visible when font size contains 'type--'</p>                                                                                                          |
| Font size    | Controls the font size of rating text         | <p>• Smaller<br>• Small<br>• Default (default)<br>• Big<br>• Bigger<br>• Heading 1<br>• Heading 2<br>• Heading 3<br>• Heading 4<br>• Heading 5<br>• Heading 6</p>                                                   |

### Layout

| Setting              | Description                   | Options                                        |
| -------------------- | ----------------------------- | ---------------------------------------------- |
| Horizontal alignment | Controls horizontal alignment | <p>• Left (default)<br>• Center<br>• Right</p> |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/slab/content/blocks/products/rating.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.