This article will show you how to install widgets manually in your BigCommerce store, for both Stencil and Blueprint themes.

Disable the Native Bigcommerce Review

Before installing code, the native review system of BigCommerce needs to be disabled.

  • In your BigCommerce admin, click Settings.
  • Scroll down and click on Comments under Products.
  • Click on Built-in and uncheck the Product reviews checkbox, then click Save.

Install widgets in Stencil theme

On Stencil theme, we have automatically inserted the required Javascript. You will just need to add widget code to your theme.

To access Stencil theme editor:

  • Go to Storefront > My Themes.
  • Choose the theme you want to edit and click Advanced > Edit Theme Files.

If there is no Edit theme files in the advanced menu, make a copy of the theme first, then edit the theme files of this copied theme.

BigCommerce doesn't support undo so it is best to make a copy of the theme first so you will have a backup in case something goes wrong.

To install the widgets:

1. Preview badge (star rating)

Preview badge on product page

You can add this code under the product title in Templates > Components > Products > product-view.html:

<div class='jdgm-widget jdgm-preview-badge' data-id='{{}}'></div>

Preview badge on category pages and other listings

You can add this code under the product title in Templates > Components > Products > card.html.

<div class='jdgm-widget jdgm-preview-badge' data-id='{{id}}'></div>

2. Review widget

You can add this at the end of this file (or above the related product listing) in Templates > Components > Products > product-view.html:

<div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{product.title}}' data-id='{{}}'></div>

You can add this in Templates > Pages > home.html:

<div class='jdgm-carousel-wrapper'>
  <h2 class='jdgm-carousel-title'>Featured reviews</h2>
  <a href='/reviews' class='jdgm-all-reviews-rating-wrapper'>
    <div data-score='' class='jdgm-all-reviews-rating'></div> 
    from <span class='jdgm-all-reviews-count'></span> reviews

4. All reviews text

You can add this in Templates > Components > Common > footer.html:

<p>We score <span class='jdgm-all-reviews-rating'></span> out of 5 based on <span class='jdgm-all-reviews-count'></span> reviews.</p>

5. Verified reviews count badge

You can add this in Templates > Components > Common > footer.html:

<div class='jdgm-verified-badge-wrapper'></div>

6. Floating reviews tab

You can add this in  Templates > Components > Layouts > base.html:

<section class='jdgm-widget jdgm-revs-tab'>
  <div class='jdgm-revs-tab-btn btn' position='bottom'>Reviews</div>
  <div class='jdgm-revs-tab__header'>
    <a class='jdgm-close-ico'></a>
    <h3 class='jdgm-revs-tab__title'>Product Reviews</h3>
    <a href='/pages/reviews'>
      <div class='jdgm-all-reviews-rating'></div>
      <span class='jdgm-all-reviews-count'></span> reviews

7. All reviews page

  • In BigCommerce admin, go to Storefront > Web Pages and click Create a Web Page.

  • Choose the first option, WYSIWYG editor, and open the HTML editor on the right.

  • Add this code:
<div class="jdgm-widget jdgm-all-reviews-widget">
  <div class="jdgm-all-reviews__body">&nbsp;</div>

Important notes

  • DON’T add extra code since this could prevent the widgets from loading.
  • You can add custom CSS in Assets > scss > theme.scss.
  • To comment out code, use the markers <!-- and -->.

Install widgets in Blueprint theme

Step 1: Add the script

On the Blueprint theme, you need to manually add the script to your theme.

  • In your BigCommerce admin, click Storefront Design.
  • Click My Themes and choose Edit HTML/CSS.
  • Select Other Template Files.
  • Select the file HTMLHead.html which is located under Panels.
  • Add the following script at the end of the file, above </head>:
<script src='' defer></script>
  jdgm = window.jdgm || {};
  jdgm.PLATFORM = 'bigcommerce';

Please add your shop's domain ( and your public token in Settings > Integrations > Developers > API.

Step 2: Add the widget code

To install the review widget, add thí code to your ProductDetails.html file:

<div class="jdgm-widget jdgm-review-widget" data-id="%%GLOBAL_ProductId%%" data-product-title="%%GLOBAL_ProductName%%" id="judgeme_product_reviews"></div>

To install the preview badge, add the following script in your ProductDetails.html (for product page) and CategoryProductsItem.html (for collection page):

<div class="jdgm-widget jdgm-preview-badge" data-id="%%GLOBAL_ProductId%%"></div>

The other widgets code are similar to the code above for Stencil theme and can be found in the Installation tab of your app's Settings page.