Skip to main content
All CollectionsOkendo ReviewsDesign Your Reviews DisplaysWidget Plus
Designing a Star Ratings Widget with Widget Plus
Designing a Star Ratings Widget with Widget Plus

Build shoppers' trust by showing your products' ratings

Amanda Calderon avatar
Written by Amanda Calderon
Updated over 5 months ago

Subtle, yet powerful, the Star Ratings widget builds shopper trust on collection and product pages by displaying customer feedback in its most simplistic form. The Star Ratings widget shows the average aggregated rating of a product’s published customer reviews as well as the total number of published reviews.

In this article, you'll learn about:

Before you begin

You must install the Okendo Reviews app on your Shopify store before you can add the Star Ratings widget to your theme. Click here to see how to complete the basic installation.

Style your Star Ratings widget

Before you start styling your Star Ratings widget, consider reviewing the style definitions in the next section to understand how changing the settings changes the widget.

Note: You can change the color of the star rating by going to Settings > Widgets > Styling. Click here to learn more.

  1. Open your Okendo admin.

  2. Click Displays in the sidebar.

  3. Click the Star Ratings widget option.

  4. Click the General tab to:

    1. Hide the widget if you don't have any reviews.

    2. Define where to send the customer when they click a star rating.

  5. Click the Styling tab to adjust the settings to best fit your store's site. For example:

    1. Enter a number to change the height or the space between objects.

    2. Use the options in the Content or Label drop-down lists to define the text that appears in the widget.

    3. Include brackets around the text by toggling the switch on.

  6. Click Save Changes.

Star Rating style definitions

General tab

Style Setting

Definition

Hide when there are no reviews

Displays or hides the Star Ratings widget if you don't have any published reviews yet.

Action when clicked

There are 2 possible actions that can occur when the customer clicks the star rating:

  • Scroll to custom target takes your shopper to a section on the page that you specify in the Id of target to scroll to field.

  • Scroll to reviews widget takes your shopper directly to the Reviews widget on the page

Style tab

Style Setting

Definition

Stars Height

Height of the stars that appear in this widget.

Space Above

Amount of space above the star rating.

Space Below

Amount of space below the star rating.

Content

Choose between displaying the total review count or the average star rating.

Label

Refers to the text that follows the review count or average star rating.

For example, if you choose to show the Review Count, you can choose to show the word "reviews" or hide it so just the total number of reviews appears.

Include brackets around text

Places brackets around the total number of reviews text.

Related articles

Did this answer your question?