We have moved to a new and improved knowledge base. This article is no longer updated. Please click here to find the new version. 

We have moved to a new and improved knowledge base. This article is no longer updated. Please click here to find the new version. 



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

ON THIS PAGE

Disable the Native Bigcommerce Review

Before installing Judge.me 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 Judge.me widgets in Stencil theme

On Stencil theme, we have automatically inserted the required Javascript. You will just need to add Judge.me 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='{{product.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='{{product.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
  </a>
</div>

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

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>
</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 Judge.me widgets in Blueprint theme

Step 1: Add the Judge.me script

On the Blueprint theme, you need to manually add the Judge.me 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='https://cdn.judge.me/widget_preloader.js' defer></script>
<script>  
  jdgm = window.jdgm || {};
  jdgm.PLATFORM = 'bigcommerce';
  jdgm.SHOP_DOMAIN = 'INSERT YOUR SHOP DOMAIN';
  jdgm.PUBLIC_TOKEN = 'INSERT YOUR PUBLIC TOKEN';
</script>


Please add your shop's domain (store-xxxxx.mybigcommerce.com) and your public token in Judge.me Settings > Integrations > Developers > Judge.me 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 Judge.me app's Settings page.