> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yukoreviews.com/llms.txt
> Use this file to discover all available pages before exploring further.

> Learn how to add star ratings to your product pages using Yuko’s rating widget.

# Star Rating Widget

The Star Rating Widget displays your product’s average rating and total review count. It usually appears under the product title or price, and on collection pages. This small visual cue helps customers quickly understand product quality, increasing click-through rates and overall trust.

### **Navigation**

Yuko Dashboard → **Reviews → Widgets → Star Rating**

\
\
**How the Star Rating Widget Works**

<Frame>
  <img src="https://mintcdn.com/yukoreviews/2A4-jGC_tIjwzp80/images/yuko-star-rating.png?fit=max&auto=format&n=2A4-jGC_tIjwzp80&q=85&s=7086818d734f892858276af51df41098" alt="Yuko Star Rating" width="2800" height="1292" data-path="images/yuko-star-rating.png" />
</Frame>

The widget calculates the product’s average rating based on approved reviews and displays stars and review counts according to your chosen settings.

You can choose to display:

* Stars only
* Review count only
* Stars + review count

You can also enable **empty stars** so that every product’s badge stays the same width, even for products with fewer reviews.

**Dynamic Text Placeholders**\
You can customize the text next to the stars using placeholders:

| Placeholder  | Description                             |
| :----------- | :-------------------------------------- |
| `{{count}}`  | Total number of reviews                 |
| `{{rating}}` | Average rating (rounded to one decimal) |

Example formats:

* “Rated rating based on count reviews”
* “count customers rated this rating stars”

***

## Settings

The Star Rating Widget is fully customizable in the Yuko Dashboard.

Navigation: Yuko Dashboard → **Reviews → Widgets → Star Rating → Customise**

### 1. General / Text Settings

| Option               | Description                                                                       |
| :------------------- | :-------------------------------------------------------------------------------- |
| **Text**             | Customize the text content using placeholders                                     |
| **Text (Singular)**  | Customize text for singular review scenarios                                      |
| **Show Q\&A Count**  | Enable or disable the Q\&A count display                                          |
| **Hide Text**        | Hide all text content next to the stars                                           |
| **Hide Stars**       | Hide all star icons                                                               |
| **Show Empty Stars** | Enable empty stars to maintain consistent badge width; check store to see changes |

***

### 2. Style Settings

| Option                | Description                                 |
| :-------------------- | :------------------------------------------ |
| **Widget Alignment**  | Align the widget (Left, Center, Right)      |
| **Icon Position**     | Position of the star icons relative to text |
| **Icon Alignment**    | Alignment of the icons themselves           |
| **Text Color**        | Customize the color of the text             |
| **Rating Icon Color** | Customize the star color                    |

> All style changes can be **previewed live in Yuko** before saving.

***

### 3. Advanced Customization (CSS)

For additional control over spacing, alignment, or visibility, you can add custom CSS:

**Steps:**

1. Go to **Star Rating Widget settings**
2. Scroll to **Advanced CSS**
3. Add your custom CSS code
4. Click **Save**