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
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
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
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
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
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
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.