All Collections
Ratings & Reviews
How to Design Your Star Rating Widget?
How to Design Your Star Rating Widget?

A Guide On How to Design and Customize Your Rating Widgets To Match Your Brand Guidelines.

Arezou Solouki avatar
Written by Arezou Solouki
Updated over a week ago

Star Ratings on your Product Detail Pages (PDP) is a discreet yet powerful means of building buyer trust. These ratings represent the aggregated average of customer feedback and indicate the total number of responses received, providing valuable insights into the product's overall satisfaction level. By incorporating Star Ratings, you build confidence in potential buyers, allowing them to make informed decisions based on the experiences of others.

To design your star rating widget in the platform follow the steps.

Login to your Flowbox Account.

STEP 1: Click 'Ratings and Reviews'.

STEP 2: Click 'Widgets' Under Display.

STEP 3: Click 'New Widget'. or edit existing widgets that you want to embed into your page.

STEP 4: Choose the Stars template and click " Create Widget".

Configure and Style the Star Rating widget

When you access the page for styling the widget, you will be presented with a preview of how your widget will appear on the right side of the screen, along with customizable options on the left. Any modifications you make to the widget appearance will be immediately reflected in the live preview on the right-hand side.

Configure The Widget

This will allow you to configure the appearance of the Star Rating widget. You can decide to show/hide the Numerical average value, and the Response count.

Style The Widget

  1. Primary text color: Defines the text color for the Numerical average value.

  2. Secondary color: Defines the divider color of the Response count.

  3. Active star color: Defines the color for active (filled-in) stars

  4. Inactive star color: Defines the color of Inactive stars.

  5. Inherit font: If active, the widget will inherit the front from your website.

  6. Typography font: Defines the font of the form. All available fonts are Google fonts.

  7. Star Height: Defines the size of the stars

  8. Space in between the stars: Defines the space between the stars.

  9. Space above: Defines the space above the stars.

  10. Space below: Defines the space above the stars.

Did this answer your question?