Star Ratings

The Star Rating component lets you display a customizable star rating on your Replo pages. Use it to showcase product ratings, customer feedback scores, or any numerical rating you want to visualize with stars.

Adding a Star Rating Component

1. In the Replo editor, click Components in the left panel.
2. Search for "Star Rating" and drag it onto your page.

Customization Options

The Star Rating component has several customizable properties:

• Rating — The rating value to display (e.g., 4.5). Supports half-star increments. Default: 5
• Total Stars — The total number of stars to display. Default: 5
• Star Color — The color of the stars (filled, half-filled, and outline)
• Size — The size of each star in pixels. Default: 16px

How Ratings Display

The component automatically rounds ratings to the nearest half-star:

• A rating of 4.3 displays as 4.5 stars (4 filled + 1 half-filled)
• A rating of 4.7 displays as 5 stars (5 filled)
• A rating of 3.1 displays as 3.5 stars (3 filled + 1 half-filled)

Use Cases

• Product ratings — Display average customer review scores
• Testimonials — Add visual ratings to customer quotes
• Feature comparisons — Rate product features or benefits
• Quality indicators — Show product quality tiers

Styling Tips

• Match the star color to your brand colors for a cohesive look
• Pair with text showing the numeric rating (e.g., "4.8 out of 5")
• Use consistent star sizes across your page for visual harmony

Accessibility

The Star Rating component includes accessibility options:

• Accessibility Label — Provide a text description for screen readers (e.g., "4.5 out of 5 stars")
• Accessibility Hidden — Hide the component from screen readers when it's purely decorative
• Labelled By — Reference another element that describes this rating

For product review ratings that pull data from your review app, see our integration guides for Junip, Yotpo, Stamped, and other review platforms.

]]>