Contents x
      Adding the Reviews Widget (Legacy)
          Contents

          Adding the Reviews Widget (Legacy)

              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