Skip to main content
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. Yuko Dashboard → Reviews → Widgets → Star Rating Star Pn

How the Star Rating Widget Works
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:
PlaceholderDescription
{{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

OptionDescription
TextCustomize the text content using placeholders
Text (Singular)Customize text for singular review scenarios
Show Q&A CountEnable or disable the Q&A count display
Hide TextHide all text content next to the stars
Hide StarsHide all star icons
Show Empty StarsEnable empty stars to maintain consistent badge width; check store to see changes

2. Style Settings

OptionDescription
Widget AlignmentAlign the widget (Left, Center, Right)
Icon PositionPosition of the star icons relative to text
Icon AlignmentAlignment of the icons themselves
Text ColorCustomize the color of the text
Rating Icon ColorCustomize 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