Product Review Widget

Learn how to customize the review widget on your product pages

Beth avatar
Written by Beth
Updated over a week ago

Overview

The Review Widget is the primary display element that sits on your product pages in order to show your reviews, photos and Q&A content to prospective customers. This guide will go through all of the main settings and how they affect content on your website. 


  1. Login to your TrustSpot account

  2. Click on the Product Reviews Tab

  3. Click on General Settings

  4. Click on the Review Widget Tab


NEW Review Widget Design 2.0

Introducing the new Review Widget Design 2.0! This updated version of our widget focuses on displaying the average review rating in a more elegant and straightforward design. The upgrade is accessible to users on the Growth, Premium, Ultimate, and Enterprise plans.

TrustSpot Review Widget Design 2.0

Making the switch is as easy as selecting the new widget and saving your settings. No need to worry about losing your previous design settings - elements like Star Type, colors for the Stars, Title Text, Paragraph Text, Buttons, Accents, and Panel Background all carry over seamlessly to the new design.


With our new design, your reviews will stand out, making it easier for your customers to make informed decisions. To access the new design, simply visit https://trustspot.io/product_reviews/review_display_widget.


Review Widget - Settings Tab

This is the primary section of the settings area which allows you to configure how the content will appear on your site. There are a few areas mentioned here:

1. Widget Configuration

This is where you can customize:

  • # of Reviews to show per page

  • Date Format of the Reviews

  • Default Reviews Sorting (Newest is selected by default)

2. Widget Content

This is where you can enable / disable certain types of content from appearing on your Review Widget. 

  • Enable a Partial Star Rating to show a true aggregation of your overall reviews - this will display a total out of 5 in increments of 0.1 e.g. 4.8/5 stars

  • Show Rating Text Value

  • Show Custom Questions Fit/Rating Labels

  • Allow users to submit reviews - This will add a "Write Review" button at the top, allowing users to submit reviews directly on your product page. We email verify all reviews through this method. 

  • Display Company Reviews in an additional Tab

  • Display Photos in an additional Tab 

  • Display Reviewer Location captured by IP address  (ex: Orlando, FL) 

  • Enable "Read More" link - If there is a very long review on your product page, it might be pushing others out of the way. This setting adds a "Read More" link to the end, and maintains 500 characters maximum for each review. 

  • Allow users to share reviews from the widget

  • Allow users to vote on reviews if they are helpful or not

  • Display rich snippets - This will display gold stars in organic search results. 

  • Display Experience answers - this will display content collected through our Experience Survey system in the widget


Review Widget - Design Tab

This Tab allows you to fully customize every aspect of your Widget. For advanced users, we also give you direct access to a CSS Editor to ensure everything is designed exactly to your specifications. The CSS Editor feature is available beginning on our Ultimate Plan

1. Widget Font & TrustSpot Logo

  • Select the type of font to show on the Widget - If you have a custom font that you would like to use, please contact our support team so we can help with that. 

  • Logo Style - Depending on the color of the top header bar, this will ensure the Trustspot logo matches up against that. 

2. Widget Colors

  • Star Type - this allows you to pick between our block icon or a regular star icon. 

  • Star Color - customize the color of the star icon

  • Header Background Color - This controls the color of the header bar at the top of the widget.

  • Header Font Color - This controls the text color within the header bar at the top. 

  • Title Text color - this controls the text color of all section titles, such as Product Reviews or Photos. 

  • Paragraph Text Color - this controls the text color of all sub-section text content such as Reviews Text or Question / Answer Text. 

  • Button Color - this controls the color of all buttons on the widget, such as Answer a Question or Review Voting. 

  • Accent Color - This controls the color of Review Dates, Questioner Name, and Review Counts. 

  • Panel Header Background Color - this controls the top section of the collapsible panel headers, such as Answers to Questions or Review Responses. 

  • Panel Background Color - this controls the background of collapsible panels such as review responses, or question answers. 

3. CSS Editor

If you prefer to add your own custom CSS into the widget settings instead of selecting colors above that's available from here. Simply enter all of your custom CSS and and select Save, and the preview will update. 

To locate the CSS values associated with the widget, right click on your Review Widget and click "Inspect" (Google Chrome), then on the right side click "Styles", and click the Widget CSS item. 

Note: Access to the CSS editor begins on our Ultimate Plan


Review Widget - Category Stars Tab

This section allows you to customize the appearance of Category Stars on your website. The Category page is typically an area that contains all similar products (ex: Pants, Shirts, Hats, Sneakers) etc. 

1. Design Style

We support 3 types of design styles:

  • Stars with Review Count & Review Text

  • Stars with Review Count

  • Stars Only

This way you can use a design that best matches your site's needs. 

2. Content Settings

  • Display Empty Star Ratings - If a product does not have any reviews assigned to it, you have the option of displaying empty stars below the product. If this is not checked, then no stars will show below a product. 

  • Font Size - This controls the size of the category stars and associated text with it. 


Review Widget - Product Stars Tab

Similar to Category Stars, we also allow you to customize the appearance of Product Stars as well. These Stars will show below the Title or Price on your Product Page. 

1. Design Style

We support 3 types of design styles:

  • Stars with Review Count & Review Text

  • Stars with Review Count

  • Stars Only

This way you can use a design that best matches your site's needs. 

2. Content Settings

  • Display Empty Star Ratings - If a product does not have any reviews assigned to it, you have the option of displaying empty stars below the product. If this is not checked, then no stars will show below a product. 

  • Font Size - This controls the size of the product stars and associated text with it. 


Have a question or need support for this feature? 

Please contact our support team via our live chat or at support@trustspot.io

Did this answer your question?