Reviews Widget Style Glossary

A guide to understanding how changing a style setting changes the Reviews widget

Amanda Calderon avatar
Written by Amanda Calderon
Updated over a week ago

Keep in mind: All the elements in green show what changes when you change the setting. And some of the images have been modified outside of the Okendo admin so they will not reflect what you actually see in the Okendo admin.

General Tab

Style Setting & Description

Example

Include Q&A Tab: Displays the Q&A tab and gives shoppers the ability to view questions about a product.

Hide widget when there are no reviews: Hides the reviews widget if you haven't received or published any reviews. By default, this setting is toggled off.

Style Tab

Basic Settings

Style Setting & Description

Example

Accent Color: Defines the color for these text components in the customer information box:

  • verified buyer or reviewer

  • recommendation icon

Shading Color: Sets the background color for the customer information box.

Space Above: Amount of space at the top of the widget (above the aggregate star rating).

Space Below: Amount of space at the bottom of the widget (below the Show More button).

Product Image Size: Defines the size of product images that appear in "TBD". Enter or select a value between 11 and 64 pixels.

Show Dates: Toggle on to show when the customer submitted the review.

Star Settings

Style Setting & Description

Example

Height: Defines the height of the stars in the widget. Enter or select a value between 15 and 40 pixels.

Border Settings

Style Setting & Description

Example

Border Color: Border around the customer profile box and between each review.

Border Width: Width of the border around the customer profile box and between each review.

Note: You can set this width to 0 pixels to remove the border altogether.

Text Settings

Style Setting & Description

Example

Primary Text Color: Defines the color for these text components both the review widget and the aggregate widget:

  • review title

  • review body

  • attribute labels

  • customer information

  • date

  • tab labels

  • sort labels

  • aggregate widget's overall average star rating number

  • aggregate widget's star rating number

  • aggregate widget's attribute labels

Secondary Text Color: Sets the color for these text components in the widget:

  • date

  • total reviews

  • upvote & downvote icons and "Was this helpful?"

  • aggregate widget subtitle

  • aggregate widget total number of reviews per star rating

Standard Font Size: Determines the size of these text components:

  • attribute labels

  • tab labels

  • sort labels

  • button text

  • review title

  • review body

Small Font Size: Determines the size for these text components:

  • aggregate star rating

  • aggregate subheading

  • aggregate total number of reviews

  • customer information

  • date

  • upvote & downvote and "Was this helpful?"

Large Font Size: Controls the font size of the aggregate widget's rating average

Filter Options Settings

Style Setting & Description

Example

Background Color: Manages the background color of each attribute bubble.

Note: The Attributes Filters setting in the Reviews List tab controls when the customer sees the attributes in the widget.

Border Color: Manages the color of the border around each attribute bubble.

Text Color: Controls the color of the label within an attribute bubble.

Background Color Active: Manages the background color of the attribute that the customer selected when they submitted their review of the product.

Border Color Active: Controls the color of the border around the attribute that the customer selected when they submitted their review of the product.

Text Color Active: Defines the text color of the attribute selected by a customer when they submitted their review.

Border Radius: Adjusts how rounded or squared the attribute pills appear in the filter section.

The example shows the border radius set to 0 to give the attribute pills a square shape.

Button Settings

Style Setting & Description

Example

Background Color: Controls the background color of the Filter, Write a Review, and Show More buttons in the widget.

Text Color: Manages the color of the text within the Filter, Write a Review, and Show More buttons in the widget.

Border Color: Sets the color of the text within the Filter, Write a Review, and Show More buttons in the widget.

Border Width: Changes the width of the border around the Filter, Write a Review, and Show More buttons.

Border Radius: Adjusts the radius of all corners on the Filter, Write a Review, and Show More buttons.

Background Color Hover: Controls the color of the button when you hover over it.

Text Color Hover: Controls the color of the button text when you hover over it.

Border Color Hover: Manages the color of the border around the button when you hover over it.

Background Color Selected: Manages the background color of the button when you click it.

Text Color Selected: Manages the color of the button text when you click it.

Border Color Selected: Controls the color of the border around the button when you click it.

Attribute Bars Settings

Style Setting & Description

Example

Style: Determines the look of the attribute bars in the reviews widget and the aggregate widget.

You can choose from these 5 styles: Default, Classic, Rounded, Outlined, and Blocks.

Default:

Rounded:

Blocks:

Border Color: Sets the border color for these styles only: Classic, Outlined, and Block.

Background Color: Sets to the color of the area that isn't shaded.

Shading Color: Manages the color that shades the area representing the customer's attribute selection.

Marker Color: Manages the color of the marker at the end of the attribute bars.

Avatar Settings

Style Setting & Description

Example

Show Avatars: Displays the customer's profile image.

Size: Controls the size of the avatar.

Placeholder Background Color: Sets the background color of the placeholder avatar when the customer doesn't upload their profile image.

Placeholder Text Color: Manages the text color within the placeholder avatar, which is typically the customer's initials.

Aggregate Modules Tab

To see a list of definitions for the Review Aggregate style settings, click here.

Reviews List Tab

Controls Settings

Style Setting & Description

Example

"Write a Review" Button: Adds the Write a Review button which allows the customer to leave a review directly from the reviews widget on your site.

Attributes Filters: Determines whether or not the attributes appear opened or closed in the reviews widget.

As shown in the example, if you select Starts Open in the Attribute Filters drop-down list, the product's attributes appear when you navigate to the widget.

Default Sort: Controls which sorting option appears by default in the Sort filter.

As shown in the example, if you select Media First in the Default Sort drop-down list, the Photos & Videos sort option appears in the widget.

Initial Page Size: Controls how many reviews initially appear in the widget (before you click the Show More button to load more reviews).

Load More Page Size: Controls how many additional reviews appear in the widget after you click the Show More button.

Reviews Settings

Style Setting & Description

Example

Review Layout: Determines the overall layout of the Reviews widget. You have 5 options to choose from: Default, Minimal, Split, Masonry, and Carousel.

Minimal:

Masonry:

Show Attributes Bars in Reviews: Includes or removes the attribute bars in the Reviews Widget.

This setting does not affect the attribute bars in the Reviews Aggregate widget.

Reviewer Border Style: Changes the border style around the reviewer's profile information.

You have two options to choose from: Full and Minimal in the drop-down list.

Full:

Minimal:

Collapse Reviewer on Smaller Screens: Toggle this setting on to collapse the reviewer image and name to save space when viewed on a small screen.

If you select Masonry for your Review Layout, you'll see these settings:

Style Setting & Description

Example

Card Layout: Changes the layout of the review card.

You have four layouts to choose from in the drop-down list: Default, Featured, Minimal Centered, and Testimonial.

Featured:

Testimonial:

Show Product Name (Grouped Reviews): Shows the name of a product in the reviewer details section.

Reviewer Details Position: Changes the position of the reviewer's details within the review card when you use card-based-layouts like Masonry and Reviews Carousel.

You have two options: Above and Below.

Note: This setting doesn't apply to the Minimal Centered layout.

Note: This example uses Masonry's Default layout.

Above:

Below:

If you select Carousel for your Review Layout, you'll see these settings:

Style Setting & Description

Example

Slides Per Page - Large: The maximum of review slides that appear in the carousel when viewed on a large screen.

Slide Per Page - Medium: The maximum of review slides that appear in the Reviews Carousel when viewed on a medium screen.

Scroll Behavior: Customers can scroll through the carousel one slide or one page at a time.

Show Navigation Arrows: Displays or hides the navigation arrows on the left and right sides of the carousel.

Arrow Color: Adjust the color of the navigation arrows.

Arrow Size: Increase or decrease the size of the navigation arrows.

Media Settings

Style Setting & Description

Example

Media Layout: Sets the layout of your UGC in a review card.

Image Height: Height of your photos or videos in a review card.

Image Gap: Space between your photos or videos in a review card.

Truncation Settings

Style Setting & Description

Example

Hide media and attributes in the review body with a "read more" button: Shortens the content within a review card by hiding any UGC and attribute bars, but doesn't remove it from the layout. You can still access this information by clicking the Read More link.

Limit review body length with a "read more" button: Shortens the body of the review to the specified number of lines by hiding the remaining review content, but doesn't delete it. You can still access this extra review content by clicking the Read More button.

Maximum lines of body text: The maximum number of lines that will appear in the review card when you choose to limit the review body length (see definition above).

Did this answer your question?