Adding Judge.me widgets (Stencil theme)

BigCommerce offers two theme platforms: Stencil and Blueprint. Stencil is the default for all new stores, while stores created before November 2016 may still use the legacy Blueprint theme.

This article covers how to install Judge.me widgets on Stencil, the modern theme engine that supports advanced customization, better design tools, and seamless widget integration.

Step 1: Disable the native BigCommerce review

To prevent review duplication, disable the built-in BigCommerce reviews:

From your BigCommerce admin, go to Settings.
Scroll down to Products > Comments.
Go to the Built-in tab and uncheck Product reviews.
Click Save.

Step 2: Add the installation code

Judge.me JavaScript is automatically inserted to your Stencil theme. You just need to place the widget code in your theme files.

From your BigCommerce admin, go to Storefront > My Themes.
Find the theme you want and click Advanced > Edit Theme Files. If there is no Edit theme files option, please make a copy of the theme first, then edit the copied theme.
Follow the specific steps below to install your desired widgets.

Star Ratings

Star Ratings on product page

Go to Templates > Components > Products > product-view.html.
Under the line that contains class="productView-title", add the following code:
```
<div class='jdgm-widget jdgm-preview-badge' data-id='{{product.id}}'></div>
```
Click Save & apply file.

Star Ratings on listings and category pages

Go to Templates > Components > Products > card.html.
Above the line that contains class="prod-price", add the following code:
```
<div class='jdgm-widget jdgm-preview-badge' data-id='{{id}}'></div>
```
Click Save & apply file.

Review Widget

Go to Templates > Components > Products > product-view.html.

You can add the following code at the end of the file:

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

Click Save & apply file.

Reviews Carousel

Go to Templates > Pages > home.html.

Above the last </div> of the page, add the following code:

<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
  </a>
</div>

Click Save & apply file.

All Reviews Counter

Go to Templates > Components > Common > footer.html.

Under the line that contains <div class="container">, add the following code:

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

Click Save & apply file.

Verified Reviews Counter

Available for stores with more than 20 verified reviews.

Go to Templates > Components > Common > footer.html.
Under the line that contains <div class="container">, add the following code:
```
<div class='jdgm-verified-badge-wrapper'></div>
```
Click Save & apply file.

Floating Reviews Tab

Go to Templates > Components > Layouts > base.html.

Above the line that contains </body>, add the following code:

<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
   </a>
  </div>
</section>

Click Save & apply file.

Notes:

Avoid duplicate code: Make sure there is no extra or duplicated Judge.me code in your theme files. Duplicate snippets can prevent widgets from loading properly.
Add custom styles: To customize the appearance of Judge.me widgets, add your custom CSS in Assets > scss > theme.scss.

Adding Judge.me widgets (Blueprint theme)

Creating a Reviews Page (Stencil theme)

Adding Judge.me widgets in Vintage themes

Adding Judge.me widgets in PageFly

Adding Judge.me widgets in the Shogun pagebuilder