Adding Judge.me widgets (Stencil theme)
Updated yesterday

Your BigCommerce store will use one of two theme platforms, which determine what designs and design-related features are available for your store.

Stencil comes with all newly created stores. Stores created before November 2016 use Blueprint, a legacy theme.

Step 1: Disable the native BigCommerce review

  1. From your BigCommerce admin, go to Settings.

  2. Scroll down to Products > Comments.

  3. Go to the Built-in tab and uncheck Product reviews.

  4. Click Save.

Step 2: Add the installation code

On Stencil theme, we automatically insert the required Javascript. You just need to add Judge.me widget code to your theme.

  1. From your BigCommerce admin, go to Storefront > My Themes.

  2. 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 this copied theme.

  3. Depending on the widgets you want to install, the next steps might differ.

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.


Make sure there is no extra or duplicated code since this would prevent the widgets from being loaded.

For custom CSS, you can add it in Assets > scss > theme.scss.

If you need help deleting our code and files, contact our team at [email protected]. We're available to help 24/7!

Did this answer your question?