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

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

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

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 this copied theme.
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 adding Judge.me widgets, contact our team at [email protected]. We're available to help 24/7!

Adding Judge.me widgets (Blueprint theme)

Creating a Reviews Page (Stencil theme)

Adding Judge.me widgets (Vintage themes)

Adding Judge.me widgets in PageFly

Installing Judge.me widgets on external platforms