Contents x
      Adding the Reviews Widget (Legacy)
        • Dark
          Light
        Contents

        Adding the Reviews Widget (Legacy)

          • Dark
            Light
          Article summary

          Products


          Reviews
          Supported plans

          Free, Starter, Pro, Premium, Enterprise

          eCommerce Platform

          Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Volusion, Salesforce Commerce Cloud, Custom

          The Reviews Widget allows you to showcase your reviews on product pages in a fully customizable format. Each review will appear with a title, review content, and its associated star rating. Design the widget to match the look and feel of your store and customize the default sorting of your reviews to prioritize the order of the reviews shown in the widget. 

          In this article, you'll learn how to add the Reviews Widget to your store.

          Available for:

          Merchants who are using the previous version of the Reviews Widget. If you’re using the new Reviews Widget 3.0, see this article

          How it works

          Click the links below to view a specific section of the video:

          Good to know:
          If a customer submits a review directly through the Reviews Widget on one of your product pages, they'll receive an email asking them to verify the review. Upon verification, the review will appear in the moderation panel within the next 30 minutes or so.

          Installing the Reviews Widget

          For detailed installation instructions, choose the relevant platform from the list below: 

          Customizing the Reviews Widget

          NumberElementDescriptionPath to Element
          1WidgetReviews Widget fontOn-Site Widgets > Reviews Widget > Look & Feel > Widget font


          		Reviews Widget Background ColorOn-Site Widgets > Reviews Widget > Look & Feel > Background


          		Reviews Widget Background transparencyOn-Site Widgets > Reviews Widget > Look & Feel > Transparent


          		Reviews Widget sizeOn-Site Widgets > Reviews Widget > Look & Feel > Widget Size


          		Sort orderOn-Site Widgets > Reviews Widget > General settings > Widget Configuration
          2Stars Star Icon (image)On-Site Widgets >Reviews Widget > Advanced Setup > Change Star Icon


          		Star colorOn-Site Widgets > Reviews Widget > Look & Feel > Stars
          3Reviewer AvatarAvatarOn-Site Widgets > Reviews Widget > Look & Feel > Advanced Setup > Upload Avatar
          4 Review date formatDate formatOn-Site Widgets > Reviews Widget > General Settings > Date format
          5 Primary colorYotpo logo, shopper names, avatars, filter icon, paginationOn-Site > Reviews Widget > Look & Feel> Primary Color

          Selecting widget performance

          The Reviews Widget includes two performance settings that control content delivery versus widget loading time for all Yotpo on-site widgets.

          Better performance

          Choose this setting for optimal on-site widget performance and to ensure optimal loading time.

          Widgets will load faster on-site, however, moderation actions like publishing reviews or changing Look & Feel design settings may take up to an hour to be reflected on your on-site widgets. We recommend this setting only after you've completed the initial widget deployment on your site. 

          Immediate update (temporary) 

          Choose this setting only during the initial setup of your on-site widgets. You can think of it as "Developer Mode" or a staging setting that is recommended only during the initial setup and implementation of Yotpo widgets on your site. Moderation actions like publishing a review and Look & Feel design settings will be immediately reflected on your site but widgets will take longer to load. To ensure optimal widget performance, this setting will automatically revert to Better Performance after five days. 

          Please note:
          When choosing the Immediate update setting, please allow at least 5 minutes for this setting to take effect.

          Setting the number of reviews per page

          This setting affects the number of reviews shown on each page of the Reviews Widget. From the General Settings tab:

          1. Enter the preferred number of reviews in the Reviews per page.
          2. Click Save Changes at the bottom of the screen.

          Setting the date format

          This setting affects the date format of the reviews in the Reviews Widget. From the General Settings tab:

          1. Select the date format (MM/DD/YY, DD/MM/YY, or YYYY-MM-DD) in the Date format drop-down list.
          2. Click Save Changes at the bottom of the screen.

          Applying filters

          The widget leverages Yotpo's latest and most advanced AI algorithms to actively help shoppers make quick, well-informed, buying decisions using the following Smart Filters:

          • Star Distribution Filter - Allow shoppers to see the distribution of star ratings for a specific product and click to filter by rating. Star Distribution displays at the top of the Reviews Widget. See example
          • Free Text Search - Make your reviews widget searchable to help prospective shoppers quickly pinpoint the reviews they're looking for. See example
          • Smart Topic Filters - Help shoppers focus on the topics that matter most when making buying decisions. Smart Topic Filters are automatically generated based on top mentioned topics from your published reviews. Smart Topic Filters are currently available only for English reviews. See example
          • Custom Fields Filters - Allow shoppers to filter reviews for specific answers to custom review form questions. This is a great way for shoppers to focus on reviews written by shoppers who share common intent and characteristics. See example
          • Metadata Filters - Leverage metadata collected upon order creation to allow shoppers to filter reviews according to customer, order, and/or product-related fields such as membership type, location, delivery type, order history, and more.

          Changing the reviewer avatar

          This setting affects the picture that appears next to the customer reviews. The default is the initial letter of the reviewer on a colored circle.

          Please note:
          If you upload a custom reviewer avatar, you won't be able to change the star color from the default of yellow in the Look & Feel section. However, you can change the color by uploading star icons in the desired color.

          From the Advanced Setup tab:

          1. Click the icon next to Avatar.
          2. Browse to the file you want to upload.
          3. Click Open. The avatar changes to the picture you uploaded.
          4. Click Save changes at the bottom of the screen.

          Customizing the star icon

          This setting affects the three-star icons (full, half, and empty) that appear in the Reviews Widget. You’ll upload three 200 x 200 px, 500 Kb files, one for each icon: full, half full, and empty.

          From the Advanced Setup tab:

          1. Click the icon to Full Star.
          2. Browse to the file you want to upload.
          3. Click Open.
          4. Repeat these steps for Half Star and Empty Star.
          5. Click Save Changes at the bottom of the screen.

          Restoring the star icons to the default

          This setting restores star icons to the default.

          From the Advanced Setup tab, click Remove next to the relevant star icon. The star icon reverts to the default values.

          Adjusting the Reviews Widget size

          This setting affects the size of the Reviews Widget as it appears in your store. You can configure the relative size - as a percentage of the container size on your product page, or the absolute size - in pixels.

          From the Look & Feel tab:

          1. Either:
            1. Enter the size in the Widget Size field or
            2. Use the up/down buttons to change the size
          2. Choose the unit in the dropdown menu.
          3. Click Save Changes at the bottom of the screen.

          Configuring the font

          Configure font settings in the Look & Feel tab.  You can configure all of the following settings:

          SettingDescription
          Adjust the Reviews Widget fontAffects the font used in the Reviews Widget.
          Match the text shade to your storeAffects the text shades that appear in the Review Widget.- If your website background color is dark, set the text color to Light.- If your website background color is light, set the text color to Dark.

          Customizing the colors

          Configure color settings in the Look & Feel tab.

          You can configure all of the following settings:

          SettingDescription
          Make the Reviews Widget Background TransparentAffects the transparency of the Reviews Widget on the product page on your website.
          - Select the checkmark next to Transparent.
          Make the Reviews Widget Background OpaqueAffects the transparency of the widget on the product page on your website.
          - Deselect the Transparent checkbox.
          Set the Reviews Widget Background ColorAffects the background color of the Reviews Widget on the product page on your website.
          Please note: This setting only applies if the widget background is not transparent.
          Either:
          1. Click the Background field to open the color picker.
          2. Select the color in the color picker.
          3. Click the X to close the picker.
          4. Click Save Changes at the bottom of the screen. 
          Or:
          1. Enter the color in Hex in the Background field.
          2. Click the button at the bottom of the screen.
          3. Click Save Changes at the bottom of the screen.
          Set the Primary ColorAffects the color used for the Yotpo logo, shopper names, avatars, filter icon, and pagination. When you change this, your Reviews Widget palette is updated.
          Either: 
          1. Click the Primary field to open the color picker.
          2. Select the color in the color picker.
          3. Click the X to close the picker.
          4. Click Save Changes at the bottom of the screen. 
          Or:
          1. Enter the color in Hex in the Primary field.
          2. Click Save Changes at the bottom of the screen. Yotpo logo, shopper names and avatars, filter icon, paginationYotpo logo, shopper names and avatars, filter icon, pagination
          Set the Star ColorAffects the color used for the stars in the Reviews Widget. If you use a custom reviewer avatar, you cannot change the star color from the default of yellow. If you have changed the star color, it will revert to yellow.
          Either: 
          1. Click the Stars field to open the color picker.
          2. Select the color in the color picker.
          3. Click the X to close the picker.
          4. Click Save Changes at the bottom of the screen. 
          Or:
          1. Enter the color in Hex in the Stars field.
          2. Click Save Changes at the bottom of the screen.

          Changing the sort order

          To change the order the reviews are displayed in the Reviews Widget, from the General Settings tab:

          1. Drag the sort parameter to the position.
          2. Click Save changes at the bottom of the screen.

          Allowing your customers to sort reviews

          To allow your customers to sort reviews on your website, from the General Settings tab:

          1. Click the checkmark next to Allow your customers to sort reviews on your website checkbox.
          2. Click Save changes at the bottom of the screen.

          To prevent your customers from sorting reviews on your website, from the General Settings tab:

          1. Deselect the checkmark next to Allow your customers to sort reviews on your website checkbox.
          2. Click Save changes at the bottom of the screen.

          Restoring to default settings

          To restore the look and feel to the default Settings:

          1. Click Look & Feel.
          2. Click Reset to default.

          To restore the advanced customization to the default settings:

          1. Click Advanced Setup.
          2. Click Reset to default.

          Advanced customizations

          Learn about advanced visual customizations to the Reviews Widget in Widget CSS Editor.

          Displaying specific review attributes

          You can leverage metadata collected upon order creation to allow shoppers to filter reviews according to customer, order, and/or product-related fields such as membership type, location, delivery type, order history, and more!

          Using Yotpo's order creation schema, you can configure predefined or custom properties to collect and leverage as filters right in your Reviews Widget. You can also choose whether to reflect this data in-line with each review.

          How it works If your Reviews Widget includes metadata filters, you have the option of configuring the widget to load in a pre-sorted and/or pre-filtered state according to the predefined or custom metadata params defined upon order creation.

          Available parameters:

          Predefined properties are standard metadata parameters you can collect upon order creation:

          Predefined Properties Example
          Product Properties
          • Color, Size, Vendor, Material, Model, Coupon Used 
          Order Properties
          • Coupon Used, Delivery-type
          Customer Properties
          • State, Country, Address, Phone Number

          Custom properties are metadata properties defined by the merchant where the property names and their values can be totally customized to gather specific product, order, or customer parameters. For example, coupon_used, event_type, membership_type, etc.

          To learn how to display metadata fields in the Reviews Widget, refer to the Reviews Metadata API Reference

          Please note:
          • Metadata filtering is only available for stores built on non-hosted (custom/generic) eCommerce platforms. Contact your Yotpo representative to learn more.
          • Review-related metadata takes 6 hours to appear in Yotpo Reviews and on-site.

          Updating your widget version

          • This process is only relevant to customers on Yotpo plans that include the Widget CSS Editor feature and have it enabled.
          • The widget version update will happen automatically on accounts that do not include the feature.

          From time to time, Yotpo updates its code and releases the update as a New Widget Version. Updated versions include new features, improve widget performance, resolve bugs, etc.

          Most of these updates don't require any action on your part, however, some larger updates may require you to manually update your widget version.

          Updating the widget version is only the first step in the troubleshooting process of certain issues.

          Important!

          Updating the widget version could change the existing implementation. To update the widget version:

          1. From your Yotpo Reviews main menu, go to click On-Site Widgets.
          2. Next to Reviews Widget, click Edit. If there's an available update, you'll see the following message:
          3. Click the Preview New Version button. You'll be redirected to the CSS Editor page. 
          4. On this page click Update Widget Version:
          Please note:
          If the CSS editor is toggled on (green), you can access the CSS Editor directly and click on the Update Widget Version button
          Was this article helpful?
          Related articles
          What's Next

          PRODUCT

          RESOURCES

          PARTNERSHIPS

          COMPANY

          SUPPORT

          footer-logo

          Terms of Service

          Terms of Use

          Security

          Privacy Policy