--- title: "Adding the Reviews Widget" slug: "adding-the-reviews-widget-legacy" tags: ["Reviews ", "Adobe Commerce (Magento)", "Volusion", "WooCommerce", "Salesforce Commerce Cloud", "Custom", "BigCommerce", "Shopify Plus", "Shopify"] updated: 2024-04-01T22:34:25Z published: 2024-04-01T22:34:25Z canonical: "support.yotpo.com/adding-the-reviews-widget-legacy" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.yotpo.com/llms.txt > Use this file to discover all available pages before exploring further. # Adding the Reviews Widget (Legacy) 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](/v1/docs/adding-the-reviews-widget-30) ## How it works [Embedded content](https://yotpo-1.wistia.com/embed/iframe/p322c9w6ha)Click the links below to view a specific section of the video: - [General Settings](http://www.youtube.com/watch?v=LKwLo9GIVys&t=0m30s)(widget performance) - [Widget Configuration](http://www.youtube.com/watch?v=LKwLo9GIVys&t=1m23s) - [Filters](http://www.youtube.com/watch?v=LKwLo9GIVys&t=2m9s) - [Look & Feel](http://www.youtube.com/watch?v=LKwLo9GIVys&t=3m9s) - [Advanced Setup](http://www.youtube.com/watch?v=LKwLo9GIVys&t=4m26s) **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](/v1/docs/viewing-and-sorting-reviews) within the next 30 minutes or so. ## Installing the Reviews Widget For detailed installation instructions, choose the relevant platform from the list below: - **Shopify** - [Shopify: Installing Yotpo Reviews on Online Store 2.0](/v1/docs/shopify-installing-yotpo-reviews-on-online-store-20) - [Shopify: Installing Yotpo Reviews on a Vintage Theme](/v1/docs/shopify-installing-yotpo-reviews-on-a-vintage-theme) - [**Adobe Commerce (formerly Magento) 1**](/v1/docs/adobe-commerce-1-installing-yotpo-reviews) - [**Adobe Commerce (formerly Magento) 2**](https://support.yotpo.com/docs/adobe-commerce-2-setting-up-yotpo-reviews-extension-400) - [**BigCommerce**](/v1/docs/bigcommerce-stencil-installing-yotpo-reviews-on-stencil) - [**Salesforce Commerce Cloud**](https://support.yotpo.com/docs/salesforce-commerce-cloud-installing-yotpo-reviews) - [**Volusion**](/v1/docs/volusion-installing-yotpo) - [**WooCommerce**](https://support.yotpo.com/docs/woocommerce-installing-yotpo-reviews) - [**Generic (all other platforms)**](https://support.yotpo.com/docs/generic-other-platforms-installing-yotpo-reviews-v3) ## Customizing the Reviews Widget ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/8245f4ab-f783-40a8-9f22-c52366efb85c.png?sv=2026-02-06&spr=https&st=2026-11-14T08%3A32%3A09Z&se=2026-11-14T09%3A32%3A09Z&sr=c&sp=r&sig=4AUAwJz5yIIKDODE2lkE9ahBoCb2tNJEXVoc%2FVvk3Sc%3D) | Number | Element | Description | Path to Element | | --- | --- | --- | --- | | 1 | Widget | Reviews Widget font | On-Site Widgets > Reviews Widget > Look & Feel > Widget font | | | | Reviews Widget Background Color | On-Site Widgets > Reviews Widget > Look & Feel > Background | | | | Reviews Widget Background transparency | On-Site Widgets > Reviews Widget > Look & Feel > Transparent | | | | Reviews Widget size | On-Site Widgets > Reviews Widget > Look & Feel > Widget Size | | | | Sort order | On-Site Widgets > Reviews Widget > General settings > Widget Configuration | | 2 | Stars | Star Icon (image) | On-Site Widgets >Reviews Widget > Advanced Setup > Change Star Icon | | | | Star color | On-Site Widgets > Reviews Widget > Look & Feel > Stars | | 3 | Reviewer Avatar | Avatar | On-Site Widgets > Reviews Widget > Look & Feel > Advanced Setup > Upload Avatar | | 4 | Review date format | Date format | On-Site Widgets > Reviews Widget > General Settings > Date format | | 5 | Primary color | Yotpo logo, shopper names, avatars, filter icon, pagination | On-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. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/e331b148-aca2-4c2d-bf64-41357218cac8.png?sv=2026-02-06&spr=https&st=2026-11-14T08%3A32%3A09Z&se=2026-11-14T09%3A32%3A09Z&sr=c&sp=r&sig=4AUAwJz5yIIKDODE2lkE9ahBoCb2tNJEXVoc%2FVvk3Sc%3D) **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. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/ed36aafc-610e-46e2-bc22-5cc19269f5ee.png?sv=2026-02-06&spr=https&st=2026-11-14T08%3A32%3A09Z&se=2026-11-14T09%3A32%3A09Z&sr=c&sp=r&sig=4AUAwJz5yIIKDODE2lkE9ahBoCb2tNJEXVoc%2FVvk3Sc%3D) ### 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](/v1/docs/reviews-widget-smart-filters#filter-by-star-distribution) - **Free Text Search** - Make your reviews widget searchable to help prospective shoppers quickly pinpoint the reviews they're looking for. [See example](/v1/docs/reviews-widget-smart-filters#free-text-search) - **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](/v1/docs/reviews-widget-smart-filters#filter-by-topic) - **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](/v1/docs/reviews-widget-smart-filters#filter-by-custom-fields) - **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](https://support.yotpo.com/docs/adding-the-reviews-widget#customizing-the-star-icon). 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: | Setting | Description | | --- | --- | | Adjust the Reviews Widget font | Affects the font used in the Reviews Widget. | | Match the text shade to your store | Affects 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: | Setting | Description | | --- | --- | | Make the Reviews Widget Background Transparent | Affects the transparency of the Reviews Widget on the product page on your website. - Select the checkmark next to Transparent. | | Make the Reviews Widget Background Opaque | Affects the transparency of the widget on the product page on your website. - Deselect the Transparent checkbox. | | Set the Reviews Widget Background Color | Affects 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 Color | Affects 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 Color | Affects 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](/v1/docs/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. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/b3ce0382-1944-4939-bdf5-e9912eab1ccf.png?sv=2026-02-06&spr=https&st=2026-11-14T08%3A32%3A09Z&se=2026-11-14T09%3A32%3A09Z&sr=c&sp=r&sig=4AUAwJz5yIIKDODE2lkE9ahBoCb2tNJEXVoc%2FVvk3Sc%3D) **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](https://apidocs.yotpo.com/reference/about-reviews-metadata) **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](/v1/docs/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**](https://reviews.yotpo.com/#/display-reviews/on-site-widgets). 2. Next to Reviews Widget, click **Edit**. If there's an available update, you'll see the following message:![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/0f38f418-b455-4079-9e7f-47c3d87b1520.jpg?sv=2026-02-06&spr=https&st=2026-11-14T08%3A32%3A09Z&se=2026-11-14T09%3A32%3A09Z&sr=c&sp=r&sig=4AUAwJz5yIIKDODE2lkE9ahBoCb2tNJEXVoc%2FVvk3Sc%3D) 3. Click the **Preview New Version** button. You'll be redirected to the CSS Editor page. 4. On this page click **Update Widget Version:**![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/81df6587-88c7-48f9-8e9b-62b3b2bee29d.jpg?sv=2026-02-06&spr=https&st=2026-11-14T08%3A32%3A09Z&se=2026-11-14T09%3A32%3A09Z&sr=c&sp=r&sig=4AUAwJz5yIIKDODE2lkE9ahBoCb2tNJEXVoc%2FVvk3Sc%3D) 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 ## Related - [Reviews Widget Troubleshooting Guide](/reviews-widget-troubleshooting-guide-troubleshooting-we-are-investigating-this-issue.md) - [Reviews Widget Smart Filters](/reviews-widget-smart-filters.md) - [Adding the Reviews Widget to Shopify](/adding-the-reviews-widget-to-shopify.md)