Adding Yotpo Reviews Widgets to BigCommerce Stencil
Adding Yotpo Reviews Widgets to BigCommerce Stencil
Article summary
Did you find this summary helpful?
Thank you for your feedback
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
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.
Please note:
If you need help finding and replacing the codes, please reach out to our Support team
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:
- From your Yotpo Reviews main menu, go to On-Site Widgets.
- Click Reviews Widget .
- Adjust and customize the Reviews Widget to match your brand’s tone and voice. Learn more about customization options.
- Click Publish. You will see a window with two code snippets.
- Copy the code in the upper window.
- In your BigCommerce admin go to Storefront. > Script Manager.
- 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
- 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:
- From your Yotpo Reviews main menu, go to On-Site Widgets.
- Click Reviews Widget.
- Adjust and customize the widget to match your brand’s tone and voice. Learn more about customization options
- Click Publish. You will see a window with two code snippets.
- If you have already added Yotpo’s JavaScript to your store, copy only the code in the bottom window.
- In your BigCommerce admin go to Storefront > My Themes.
- Click on Advanced > Make a Copy.
Please note:
Some of the themes offered on BigCommerce Themes Marketplace 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:
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:
- In the Yotpo Reviews main menu, go to On-Site Widgets.
- Click Star Rating 3.0.
- Adjust and customize the widget to match your brand’s tone and voice.Learn more about customization options
- Click Publish. You will see a window with two code snippets.
- If you have already added Yotpo’s JavaScript to your store, copy only the code in the bottom window.
- In your BigCommerce admin go to Storefront > My Themes.
- Click on Advanced > Make a Copy.
Please note:
Some of the themes offered on BigCommerce Themes Marketplace 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:
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:
- From your Yotpo Reviews main menu, go to On-Site Widgets.
- Click Q&A 3.0.
- Adjust and customize the widget to match your brand’s tone and voice. Learn more about customization options
- Click Publish. You will see a window with two code snippets.
- If you have already added Yotpo’s JavaScript to your store, copy only the code in the bottom window.
- In your BigCommerce admin go to Storefront > My Themes.
- Click on Advanced > Make a Copy.
Please note:
Some of the themes offered on BigCommerce Themes Marketplace 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:
10. Click Save File.
Was this article helpful?
