Install Judge.me widgets in Shogun : Judge.me

Judge.me integrates with many page builders so you can add our widgets easily on these pages.

If you're using Shogun page builder, this will be done by inserting an HTML placeholder and adding relevant code.

Steps to add Judge.me widgets in Shogun

Step 1: Add the placeholders in Shogun

Drag and drop an HTML element where you want to display Judge.me widget.

Double-click the HTML element to open the HTML text box.
Add a div placeholder for the widgets you want, each with a unique ID.

For the preview badge (star rating), you can use:

<div id="judgeme_badge_placeholder"></div>

For the review widget:

<div id="judgeme_widget_placeholder"></div>

For the review carousel:

<div id="judgeme_carousel_placeholder"></div>

Step 2: Add Judge.me widget code in Shopify theme file

In your Shopify admin, go to Online Store > Themes > Actions > Edit code.

Find your layout/theme.liquid file.

If installing in theme.liquid file doesn't work, try theme.shogun.liquid or any template with the words "shogun". However, please note that these templates will get overwritten whenever there are changes made in the Shogun app.

If you want to install on a product page

If the page you want to install Judge.me widgets is a product page, you can add these widget codes inside a div with style='display:none' in the theme.liquid file above </body>.

<div style="display: none">
      <div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false'>
        {{ all_products['handle-of-the-product'].metafields.judgeme.badge }}
      </div>

      <div style='clear:both'></div>
      <div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title | escape }}' data-id='{{ product.id }}' data-auto-install='false'>
        {{ all_products['handle-of-the-product'].metafields.judgeme.widget }}
      </div>

      <div class='jdgm-carousel-wrapper' data-auto-install='false' >
        {% assign jm_metafields = shop.metafields.judgeme %}
        <div class='jdgm-carousel-title-and-link'>
          <h2 class='jdgm-carousel-title'>Let customers speak for us</h2>
          <span class='jdgm-all-reviews-rating-wrapper' href='javascript:void(0)'>
            <span style='display:block'  data-score='{{ jm_metafields.all_reviews_rating }}' class='jdgm-all-reviews-rating' aria-label='{{ jm_metafields.all_reviews_rating }} stars' tabindex='0' role='img'></span>
            <span style='display: block' class='jdgm-carousel-number-of-reviews' data-number-of-reviews='{{ jm_metafields.all_reviews_count }}'>
              from {{ shop.metafields.judgeme.all_reviews_count }} reviews
            </span>
          </span>
        </div>
        {{ jm_metafields.featured_carousel }}
      </div>
</div>

If you want to install on a non-product page

If the page you want to install Judge.me widgets is a non-product page (e.g. home page, reviews page,...), you'll need to manually assign a product to the preview badge and review widget by adding their product_handle to the code.

Here's how to find the product_handle in Shopify.

<div style="display: none">
      <div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false'>
        {{ all_products['handle-of-the-product'].metafields.judgeme.badge }}
      </div>

      <div style='clear:both'></div>
      <div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title | escape }}' data-id='{{ product.id }}' data-auto-install='false'>
        {{ all_products['handle-of-the-product'].metafields.judgeme.widget }}
      </div>

      <div class='jdgm-carousel-wrapper' data-auto-install='false' >
        {% assign jm_metafields = shop.metafields.judgeme %}
        <div class='jdgm-carousel-title-and-link'>
          <h2 class='jdgm-carousel-title'>Let customers speak for us</h2>
          <span class='jdgm-all-reviews-rating-wrapper' href='javascript:void(0)'>
            <span style='display:block'  data-score='{{ jm_metafields.all_reviews_rating }}' class='jdgm-all-reviews-rating' aria-label='{{ jm_metafields.all_reviews_rating }} stars' tabindex='0' role='img'></span>
            <span style='display: block' class='jdgm-carousel-number-of-reviews' data-number-of-reviews='{{ jm_metafields.all_reviews_count }}'>
              from {{ shop.metafields.judgeme.all_reviews_count }} reviews
            </span>
          </span>
        </div>
        {{ jm_metafields.featured_carousel }}
      </div>
</div>

In this case, only one product can be assigned to the widget, since the product variable won't dynamically change like on product pages.

That also means that, this method can't be used to install the preview badge and review widget on a Shogun collection page.

Step 3: Add a script to load the widgets into the placeholder

Finally, a small script would need to be added below the closing </div> in Step 2. What this script does is to move the widget originally placed on the div with the display = 'none' to the placeholder in Step 1.

For the preview badge (star rating):

<script>
  document.addEventListener(
    'DOMContentLoaded',
    function() {
      document
        .querySelector('#judgeme_badge_placeholder')
        .appendChild(document.querySelector('.jdgm-preview-badge'));
    },
    false
  );
</script>

For the review widget:

<script>
  document.addEventListener(
    'DOMContentLoaded',
    function() {
      document
        .querySelector('#judgeme_widget_placeholder')
        .appendChild(document.querySelector('#judgeme_product_reviews'));
    },
    false
  );
</script>

For the review carousel:

<script>
  document.addEventListener(
    'DOMContentLoaded',
    function() {
      document
        .querySelector('#judgeme_carousel_placeholder')
        .appendChild(document.querySelector('.jdgm-carousel-wrapper'));
    },
    false
  );
</script>

If you want to install all 3 of the widgets above, you can combine the script like this:

<script>
  document.addEventListener(
    'DOMContentLoaded',
    function() {
      document
        .querySelector('#judgeme_badge_placeholder')
        .appendChild(document.querySelector('.jdgm-preview-badge'));
      document
        .querySelector('#judgeme_widget_placeholder')
        .appendChild(document.querySelector('#judgeme_product_reviews'));
      document
        .querySelector('#judgeme_carousel_placeholder')
        .appendChild(document.querySelector('.jdgm-carousel-wrapper'));
    },
    false
  );
</script>

Please only combine the scripts if you plan to install multiple widgets. Otherwise, the widgets cannot be loaded into the placeholder.

Advanced: If you have different templates for desktop, mobile, and tablet

With Shogun, you'll be able to design different templates for desktop, mobile, and table. In that case, with each template, you'll need to add a separate placeholder.

You can use the _tablet and _mobile suffixes to it's easier to check.

For example, after you've added the original placeholders in Step 1, you can go to your mobile template and add these placeholders:

<div id="judgeme_badge_placeholder_mobile"></div>

<div id="judgeme_widget_placeholder_mobile"></div>

<div id="judgeme_carousel_placeholder_mobile"></div>

Then, instead of the script in Step 3, add this script:

<script>
   var jdgmInstaller = (function() {
    var mobileMaxWidth = 767;
    var tabletMaxWidth = 991;
    var selectors = {
      review: "#judgeme_widget_placeholder", 
      badge: "#judgeme_badge_placeholder", 
      carousel: "#judgeme_carousel_placeholder" 
    }; 
    
    var getPlaceholders = function() {
      var deviceSuffix = window.innerWidth > tabletMaxWidth ? "" : (window.innerWidth > mobileMaxWidth ? "_tablet" : "_mobile");
      return {
        review: document.querySelector(selectors.review + deviceSuffix) ?? document.querySelector(selectors.review),
        badge: document.querySelector(selectors.badge + deviceSuffix) ?? document.querySelector(selectors.badge),
        carousel: document.querySelector(selectors.carousel +  deviceSuffix) ?? document.querySelector(selectors.carousel)
      };
    };
    
    return {
      install: function() {
        var placeholders = getPlaceholders();
        placeholders.review?.appendChild(document.querySelector("#judgeme_review_widget"));
        placeholders.badge?.appendChild(document.querySelector("#judgeme_real_badge"));
        placeholders.carousel?.appendChild(document.querySelector("#judgeme_carousel_widget"));
      }
    };
  })();
    
  jdgmInstaller.install();
  window.addEventListener('resize', jdgmInstaller.install); 
</script>

For other widgets:

The principle is the same:

You'd need to add an HTML placeholder for the widget on your Shogun page
You'd need to put the widget code inside a div with style="display: none" in your Shopify theme.liquid file.
You'd need to add a script to move the widget in display=none to the placeholder.

You can find the liquid code for each widget in our manual installation guide.

If you have any questions or would like us to install the widgets in Shogun for you, feel free to chat with us or email our team at support@judge.me. We'll be happy to help!