Customizing the Reviews Widget
    • Dark
      Light

    Customizing the Reviews Widget

    • Dark
      Light

    Article summary

    Products


    Reviews

    Supported plans

    Free, Starter, Pro, Premium, Enterprise

    eCommerce Platform

    Shopify, Shopify Plus, BigCommerce

    The Reviews Widget lets you showcase your reviews on your homepage and product pages in a fully customizable format.

    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. From your Yotpo Reviews main menu, go to On-Site Widgets.

    2. Click Reviews Widget 3.0.

    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

    Layout

    Choose a layout for your widget.

    This option is available in the Layout section of the Reviews Widget Editor.

    Layout

    Description

    Standard

    A straightforward layout with 3 columns.

    Bold

    A grid layout that emphasizes key-converting content such as media and reviews with high star ratings. Reviews with a star rating of 4 and above showcase larger titles.

    Colors & style

    Define the colors, fonts, and other look and feel settings for your widget.

    These options are available in the General Settings section of the Reviews Widget Editor.

    Setting

    Description

    Primary color

    The color used for the aggregated star rating, filler icons, tab names, “Write A Review” button, and shopper status

    Stars

    The color used for the stars

    Text

    The color used for the Yotpo logo, title, aggregated reviews, shopper names, avatars, filter icon, and pagination

    Background

    The background color of the Reviews Widget on the product page on your website

    Primary font

    The font used for your widget header, review title, store comment title, etc. Learn how to add a custom font

    Secondary font

    The font used by any widget elements not using the primary font. Learn how to add a custom font

    Widget width

    The relative size of the widget as a percentage of the container size on your product page

    Reviews per page

    The number of reviews you’ll display on each page of the widget

    Line separator style

    The line that is displayed between each review

    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

    Widget header

    Define the headline text and star rating text.

    These options are available in the Widget Header section of the Reviews Widget Editor.

    Setting

    Description

    Headline text

    When on, displays a header at the top of the Reviews Widget
    Default: On

    Text

    The text that is displayed at the top of the Reviews Widget
    Default: Customer Reviews

    Hide Yotpo branding

    When on, hides the Yotpo branding on the top right of the Reviews Widget.

    Default: Off

    Average star rating

    When on, displays the average star rating for the product at the top of the widget
    Default: On

    BottomLine Text

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

    Star distribution

    When on, displays the number of reviews that were submitted per star rating
    Default: On

    Sorting & filtering

    Define the on-site sorting logic and filtering options available to customers

    These options are available in the Sorting & Filtering section of the Reviews Widget Editor.

    Sort by

    The order in which reviews are displayed on-site in the Reviews Widget. The parameters include:

    Parameter

    Description

    Most relevant

    High-scoring reviews that are the most relevant to the shopper.

    Each review is given a score according to the following parameters:

    • Media: Reviews with images or videos will get a higher score

    • Review length: Reviews containing between 30-250 characters get higher scores

    • Number of topics (Only available for reviews in English): Reviews that have between 1-5 topics get higher scores

    • Reviewer badge: Reviews that have a “Verified buyer” badge get higher scores.

    • Recency: Newly added reviews get higher scores

    Most recent

    Newly added reviews

    With media

    Reviews that include images or videos

    Verified purchase

    Reviews with “Verified buyer” badges. To learn more about reviewer badges, see the Reviewer Badges article.

    Filter by

    The on-site filters are available to customers when viewing reviews.

    Smart filters

    Smart Filters let shoppers filter reviews by topics that interest them the most. Using AI, these topics are automatically selected according to their prominence in reviews and showcased on-site in a dynamic display. To learn more about Smart Filters, see Reviews Widget Smart Filters.

    Custom questions

    Define the display of information collected with the Custom Questions feature.

    These options are available in the Custom Questions section of the Reviews Widget Editor.

    Setting

    Description

    Product feedback

    The display location/s and color of product feedback
    Default: Off

    Customer details

    The display location/s of customer details
    Default: Off

    Reviews

    Define the display settings for your reviews and comments.

    These options are available in the Reviews section of the Reviews Widget Editor.

    Setting

    Description

    Avatar

    When on, displays the customer avatar
    Default: On
    Note: The reviewer name is the name provided by the user the first time they leave a review. Even if that same user later changes the name associated with their email account, the initial name will continue to be applied to all future reviews.

    Style

    Choose to display either an icon or the shopper’s initials
    Default: Icon

    Reviewer name format

    Choose to display either the shopper’s first name and initial or their initials only
    Default: First name + initial

    Reviewer badge

    When on, displays a badge to indicate the authenticity of the reviewer. Learn more about reviewer badges Default: On

    Date

    When on, displays the date the review was submitted
    Default: On

    Date format

    The date format
    Default: DD/MM/YY

    Store comment title

    The title displayed above any comments you submit
    Default: Store Owner

    Empty state

    Define what your widget looks like before you’ve started displaying reviews.

    These options are available in the Empty State section of the Reviews Widget Editor.

    Setting

    Description

    Empty State

    When on, and you haven’t published any reviews yet, displays text inviting shoppers to submit a review
    Default: On

    Title text

    The title of the empty state

    Body text

    The body text of the empty state

    Button text

    The button text of the empty state

    Button color

    The color of the button in the empty state

    Next steps

    If the Reviews Widget is already live on your site, the next step is to add the Star Rating 3.0.


    Was this article helpful?