--- title: "Adding 3.0 Widgets to BigCommerce Stencil" slug: "adding-widgets-to-bigcommerce-stencil" tags: ["BigCommerce", "Reviews "] updated: 2026-07-24T11:13:44Z published: 2026-07-24T11:13:44Z canonical: "support.yotpo.com/adding-widgets-to-bigcommerce-stencil" stale: true --- > ## 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 Yotpo Reviews Widgets to BigCommerce Stencil Products Reviews ###### Supported plans Free, Starter, Pro, Premium, Enterprise ###### eCommerce Platform BigCommerce Yotpo Reviews new on-site widgets let you create and modify on-brand widgets with an intuitive, easy-to-use editor. Create captivating widgets with lightning-fast load times. In this article, you’ll learn how to add the Reviews widget, Star rating, and Q&A widget to your BigCommerce Stencil theme. Is this article for me? This article is for merchants using the new 3.0 widgets. If you’re using the previous version of the widgets, see [this article](https://support.yotpo.com/docs/bigcommerce-stencil-installing-yotpo-reviews-on-stencil) ## Migrating your existing widgets If you’re an existing Yotpo customer and have the old widgets installed, you can migrate your reviews to the new 3.0 version. To do so, you will need to manually erase the old widgets’ code from your theme and replace them with the new code. The old codes and their can be found [here](https://support.yotpo.com/docs/bigcommerce-stencil-installing-yotpo-reviews-on-stencil). Note If you need help finding and replacing the codes, please [reach out to our Support team](https://reviews.yotpo.com/#/?modal=contact_support) Once you remove the old code, add the new code as described below. ## Adding Yotpo’s Javascript to your store The Yotpo JavaScript allows the widgets to appear on-site and show reviews relevant to your shop. To add it to your store: 1. From your Yotpo Reviews main menu, go to [**On-Site Widgets**](https://reviews.yotpo.com/#/display-reviews/on-site-widgets). 2. Click **Reviews Widget** . 3. Adjust and customize the Reviews Widget to match your brand’s tone and voice. Learn more about [customization options](/v1/docs/adding-the-reviews-widget-30-1). 4. Click **Publish.** You will see a window with two code snippets. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/adding-3.0-widgets-to-bigcommerce-stencil-image-p86an1h2.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A18%3A49Z&se=2026-10-31T17%3A18%3A49Z&sr=c&sp=r&sig=O4uoa8o5b9o%2Fcf84XA4xFiKRzfGh2XgSQfXMYgUX6pM%3D) 5. Copy the code in the upper window. 6. In your BigCommerce admin go to **Storefront**. > **Script Manager**. 7. Under the **Name of the Script** field put it Yotpo.JS and choose the following settings: - Location on Page - Footer - Select Pages where Script will be added - All pages - Script Category - Essential - Script Type - Script 8. Paste the following code at the start of the footer and click **Save**. ## Adding the Reviews Widget to product pages The Reviews Widget will appear on your product pages and showcase your hard-earned reviews. To add it to your store: 1. From your Yotpo Reviews main menu, go to [**On-Site Widgets**](https://reviews.yotpo.com/#/display-reviews/on-site-widgets). 2. Click **Reviews Widget**. 3. Adjust and customize the widget to match your brand’s tone and voice. Learn more about [customization options](/v1/docs/customizing-the-reviews-widget-30) 4. Click **Publish.** You will see a window with two code snippets. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/adding-3.0-widgets-to-bigcommerce-stencil-image-n4ct9hzu.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A18%3A49Z&se=2026-10-31T17%3A18%3A49Z&sr=c&sp=r&sig=O4uoa8o5b9o%2Fcf84XA4xFiKRzfGh2XgSQfXMYgUX6pM%3D) 5. If you have already added Yotpo’s JavaScript to your store, copy only the code in the bottom window. 6. In your BigCommerce admin go to **Storefront** > **My Themes**. 7. Click on **Advanced > Make a Copy.** Note Some of the themes offered on [BigCommerce Themes Marketplace](https://support.bigcommerce.com/s/article/The-Bigcommerce-Themes-Marketplace?language=en_US) may require making a copy of the theme files before making any changes to them. As a baseline, we recommend making a copy of your theme before editing it, as a backup. 8. Once the theme is copied, click on **Edit Theme Files**. 9. Click **Templates > Components > Products > product-view.html** or **product.html** and paste the copied code under the ***productView-description*** article: ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/adding-3.0-widgets-to-bigcommerce-stencil-image-8cz517in.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A18%3A49Z&se=2026-10-31T17%3A18%3A49Z&sr=c&sp=r&sig=O4uoa8o5b9o%2Fcf84XA4xFiKRzfGh2XgSQfXMYgUX6pM%3D) 10. Click **Save File.** ## Adding the Star Rating to product pages The Star Rating will appear on your product pages next to the product image and show the average star rating for that product. Clicking on it also leads directly to the Reviews widget. To add it to your store: 1. In the Yotpo Reviews main menu, go to [**On-Site Widgets**](https://reviews.yotpo.com/#/display-reviews/on-site-widgets). 2. Click **Star Rating 3.0**. 3. Adjust and customize the widget to match your brand’s tone and voice. Learn more about [customization options](/v1/docs/customizing-the-star-rating-30-to-shopify) 4. Click **Publish.** You will see a window with two code snippets. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/adding-3.0-widgets-to-bigcommerce-stencil-image-epyr8ew3.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A18%3A49Z&se=2026-10-31T17%3A18%3A49Z&sr=c&sp=r&sig=O4uoa8o5b9o%2Fcf84XA4xFiKRzfGh2XgSQfXMYgUX6pM%3D) 5. If you have already added Yotpo’s JavaScript to your store, copy only the code in the bottom window. 6. In your BigCommerce admin go to **Storefront > My Themes**. 7. Click on **Advanced > Make a Copy**. Note Some of the themes offered on [BigCommerce Themes Marketplace](https://support.bigcommerce.com/s/article/The-Bigcommerce-Themes-Marketplace?language=en_US) may require making a copy of the theme files before making any changes to them. As a baseline, we recommend making a copy of your theme before editing it, as a backup. 8. Once the theme is copied, click on **Edit Theme Files**. 9. Click **Templates > Components > Products > product-view.html** or **product.html** and paste the copied code under the ***productView-price*** div: ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/adding-3.0-widgets-to-bigcommerce-stencil-image-fzoxo5u2.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A18%3A49Z&se=2026-10-31T17%3A18%3A49Z&sr=c&sp=r&sig=O4uoa8o5b9o%2Fcf84XA4xFiKRzfGh2XgSQfXMYgUX6pM%3D) 10. Click **Save File.** ### Adding the Star Rating to other pages You can add the Star Rating to different pages such as your homepage, collection page, homepage, and cart page. Simply find the location on the page where you'd like the element to appear and paste the code. ## Adding the Q&A widget to product pages The Q&A widget lets visitors to your store ask questions about your products as well as view popular questions and answers that have been asked previously. The Reviews Widget will appear on your product pages and showcase your hard-earned reviews. To add it to your store: 1. From your Yotpo Reviews main menu, go to [**On-Site Widgets**](https://reviews.yotpo.com/#/display-reviews/on-site-widgets). 2. Click **Q&A 3.0**. 3. Adjust and customize the widget to match your brand’s tone and voice. Learn more about [customization options](/v1/docs/customizing-the-qa-widget-30) 4. Click **Publish.** You will see a window with two code snippets. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/adding-3.0-widgets-to-bigcommerce-stencil-image-m4fieufo.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A18%3A49Z&se=2026-10-31T17%3A18%3A49Z&sr=c&sp=r&sig=O4uoa8o5b9o%2Fcf84XA4xFiKRzfGh2XgSQfXMYgUX6pM%3D) 5. If you have already added Yotpo’s JavaScript to your store, copy only the code in the bottom window. 6. In your BigCommerce admin go to **Storefront** > **My Themes**. 7. Click on **Advanced > Make a Copy.** Note Some of the themes offered on [BigCommerce Themes Marketplace](https://support.bigcommerce.com/s/article/The-Bigcommerce-Themes-Marketplace?language=en_US) may require making a copy of the theme files before making any changes to them. As a baseline, we recommend making a copy of your theme before editing it, as a backup. 8. Once the theme is copied, click on **Edit Theme Files**. 9. Click **Templates > Components > Products > product-view.html** or **product.html** and paste the copied code under the ***productView-description*** article: ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/adding-3.0-widgets-to-bigcommerce-stencil-image-afk9zbf4.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A18%3A49Z&se=2026-10-31T17%3A18%3A49Z&sr=c&sp=r&sig=O4uoa8o5b9o%2Fcf84XA4xFiKRzfGh2XgSQfXMYgUX6pM%3D) 10. Click **Save File.** ## ## Related - [Adding Yotpo Reviews Widgets to Adobe Commerce](/adding-widgets-to-adobe-commerce.md) - [New Widgets Overview](/new-widgets-overview.md) - [Adding Yotpo Reviews Widgets to WooCommerce](/adding-widgets-to-woocommerce.md)