Customizing the Star Rating
    • Dark
      Light

    Customizing the Star Rating

    • Dark
      Light

    Article summary

    Products


    Reviews

    Supported plans

    Free, Starter, Pro, Premium, Enterprise

    eCommerce Platform

    Shopify, Shopify Plus, BigCommerce

    Star Ratings are a subtle yet effective way to establish buyer trust on any product or category page on your site. The Star Rating reflects the average aggregated rating of a product's published reviews and offers an easy way to link shoppers to read full reviews on your site. 

    In this article, you'll learn how to use the widget editor to match your brand's tone and voice to create a seamless customer experience.

    Accessing the widget editor

    Use the flow below to access the new widget editor:

    1. In your Yotpo Reviews main menu, go to On-Site Widgets.

    2. Click Star Rating.

    3. Customize the widget according to your needs.

    Please note:

    If you haven't yet added the widget to your store, click on the platform relevant to you to learn how to add it:

    Customization options

    General settings

    Setting

    Description

    Stars

    The color used for the stars

    Font

    The font used for the text indicating the number of reviews. Learn how to add a custom font

    Widget placement

    Product page

    These settings will only affect the Star Rating widget on product pages.

    Setting

    Description

    Alignment

    This will affect the location of the star rating and review count text in comparison to the product title
    Default: Left

    Number of reviews

    When on, displays the total number of reviews submitted for this product
    Default: On

    Text

    The text that is used in the star rating
    Default: {{reviews_count}} reviews

    Text color

    The color used for the text indicating the number of reviews

    Average rating score

    When on, displays the average star rating this product received
    Default: On

    Scroll to product reviews on click

    When on, clicking the Star Rating will direct shoppers to read full reviews displayed in the Reviews Widget
    Default: On

    Show when there are no reviews

    When on, Star Rating will display an empty rating
    Default: On

    Allow shoppers to write a review

    When on, and your reviews have not been published yet, the display will invite shoppers to submit a review
    Default: On

    Other pages

    These settings will affect the Star Rating widgets on your homepage, collection page, and cart page.

    Setting

    Description

    Alignment

    This will affect the location of the star rating and review count text in comparison to the title above it

    Number of reviews

    When on, displays the total number of reviews submitted
    Default: On

    Average rating score

    When on, displays the average star rating
    Default: On

    Reviews summary

    The Reviews Summary makes it easier for shoppers to quickly find the information they need by highlighting the main topics that appear across existing reviews in the Reviews Widget.

    To learn more about The Reviews Summary, go to Adding the Reviews Summary


    FAQ

    Can I hide the star ratings when there are no reviews?

    1. Go to Onsite Widgets > Star Rating.

    2. Select the Star Rating widget with the gear icon.

    3. Under Widget Placement, click on Product Page.

    4. Scroll to Empty State and toggle off "Show when there are no reviews".

    5. Save changes.

    Note

    This is only applicable to Star Ratings V3, for older version of the widget The star rating will only appear next to products that have reviews.


    Was this article helpful?