This article will show you how to install Judge.me files and widgets in your Shopify theme manually from scratch.


3 steps to install Judge.me manually

Step 1: Add Judge.me files

Judge.me will automatically add these files to your theme when you enable any of our widgets inside the app settings.

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

  • Scroll down to Snippets and click Add a new snippet and add the next 3 files.

judgeme_core.liquid (required)

Name the new snippet judgeme_core and paste the following code, then click Save.

{% comment %}
  Please do not edit this file. This file will be updated frequently so any manual changes will be discarded
  It's recommended to include this file right before closing </head> tag
{% endcomment %}
<!-- Start of Judge.me Core -->
<link rel="dns-prefetch" href="https://cdn.judge.me/">
{{ shop.metafields.judgeme.settings }}
{% for count in (0..5) %}
  {% assign metafield_key = 'html_miracle_' | append: count %}
  {% assign current_metafield = shop.metafields.judgeme[metafield_key] %}
  {% unless current_metafield %} {% break %} {% endunless %}
  {{ current_metafield }}
{% endfor %}


<script data-cfasync="false" type="text/javascript" async src="https://cdn.judge.me/shopify_v2.js"></script>
<link rel="stylesheet" type="text/css" media="nope!" href="https://cdn.judge.me/shopify_v2.css"
      onload="this.media='all',function(){var d=document,e=d.createEvent('Event');e.initEvent('jdgm.doneLoadingCss',!0,!0),d.dispatchEvent(e)}();">

<noscript><link rel="stylesheet" type="text/css" media="all" href="https://cdn.judge.me/shopify_v2.css"></noscript>
<!-- End of Judge.me Core -->

judgeme_widgets.liquid (required)

Name the new snippet judgeme_widgets and paste the following code, then click Save.

{% comment %} Please do not edit this file. It is automatically updated by Judge.me{% endcomment %}


{% if widget_type == 'judgeme_review_widget' %}
<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-from-snippet='{% if concierge_install != nil  %}{{ concierge_install }}{% else %}true{% endif %}'
data-auto-install='{% if auto_install != nil %}{{ auto_install }}{% else %}false{% endif %}'>
  {{ product.metafields.judgeme.widget }}
</div>
{% endif %}

{% if widget_type == 'judgeme_verified_reviews_count_badge' %}
<div style='clear:both'></div>
<div style='text-align: center'>
  <a class="jdgm-verified-count-badget" href="javascript:void(0)" data-from-snippet='{% if concierge_install != nil %}{{ concierge_install }}{% else %}true{% endif %}'>
    {{ shop.metafields.judgeme.verified_badge }}
  </a>
</div>
{% endif %}

{% if widget_type == 'judgeme_all_reviews_text' %}
<div class='jdgm-widget jdgm-all-reviews-text' data-from-snippet='{% if concierge_install != nil  %}{{ concierge_install }}{% else %}true{% endif %}' >
  <a href="javascript:void(0)">
    <span data-score="{{ shop.metafields.judgeme.all_reviews_rating }}" class='jdgm-all-reviews-rating'></span>
    <span class='jdgm-all-reviews-text__text' data-score="{{ shop.metafields.judgeme.all_reviews_rating }}" data-number-of-reviews="{{ shop.metafields.judgeme.all_reviews_count }}" data-locale="en">
      Customers rate us {{ shop.metafields.judgeme.all_reviews_rating | round: 1 }}/5 based on {{ shop.metafields.judgeme.all_reviews_count }} reviews.
    </span>
  </a>
</div>
{% endif %}

{% if widget_type == 'judgeme_medals' %}
  {{ shop.metafields.judgeme.medals }}
{% endif %}

{% if widget_type == 'judgeme_floating_tab' %}
<section class='jdgm-widget jdgm-revs-tab' role='complementary'>
  {% assign jm_metafields = shop.metafields.judgeme %}
  <div class='jdgm-revs-tab-btn btn' position="none" tabindex="0" aria-label="Click to open Judge.me floating reviews tab" role='button'>★ Judge.me Reviews</div>
  <div class='jdgm-revs-tab__header'>
    <a class='jdgm-close-ico'></a>
    <h3 class='jdgm-revs-tab__title'>Let customers speak for us</h3>
    <a class='jdgm-revs-tab__url' href='/pages/reviews'>
      <div data-score='{{ jm_metafields.all_reviews_rating }}' class='jdgm-all-reviews-rating' aria-label='Average rating is {{ jm_metafields.all_reviews_rating }}' role='img'></div>{{ jm_metafields.all_reviews_count }} reviews
    </a>
  </div>
  {{ jm_metafields.reviews_tab }}
</section>
{% endif %}

{% if widget_type == 'judgeme_featured_carousel' %}
<div class='jdgm-carousel-wrapper'
data-from-snippet='{% if concierge_install != nil %}{{ concierge_install }}{% else %}true{% endif %}'
data-auto-install='{% if auto_install != nil %}{{ auto_install }}{% else %}false{% endif %}' >
  <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='{{ shop.metafields.judgeme.all_reviews_rating }}' class='jdgm-all-reviews-rating' aria-label='{{ shop.metafields.judgeme.all_reviews_rating }} stars' tabindex='0' role='img'></span>
      <span style="display: block" class='jdgm-carousel-number-of-reviews' data-number-of-reviews='{{ shop.metafields.judgeme.all_reviews_count }}'>
        from {{ shop.metafields.judgeme.all_reviews_count }} reviews
      </span>
</span>  </div>
  {{ shop.metafields.judgeme.featured_carousel }}
</div>
{% endif %}

{% if widget_type == 'judgeme_preview_badge' %}
<div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'
data-template='{% if concierge_install == true or concierge_install == nil %}{{ template }}{% else %}manual-installation{% endif %}'
data-auto-install='{% if auto_install != nil %}{{ auto_install }}{% else %}false{% endif %}'>
  {{ product.metafields.judgeme.badge }}
</div>
{% endif %}

{% if widget_type == 'judgeme_ugc_media_grid' %}
<div class='jdgm-ugc-media-wrapper'
    data-from-snippet='{% if concierge_install != nil %}{{ concierge_install }}{% else %}true{% endif %}'
    data-auto-install='{% if auto_install != nil %}{{ auto_install }}{% else %}false{% endif %}' >
  {{ shop.metafields.judgeme.ugc_media_grid }}
</div>
{% endif %}

judgeme_all_reviews.liquid (optional)

If you want to have an All reviews page as well (available on the Awesome plan), you can create a new snippet file named judgeme_all_reviews and paste the following code:

{% comment %} Please do not edit this file. This file will be updated frequently so any manual changes will be discarded {% endcomment %}
<article class='jdgm-widget jdgm-all-reviews-widget'>
  <style class='jdgm-temp-hiding-style'>.jdgm-all-reviews-widget{ display: none }</style>
  {{ shop.metafields.judgeme.all_reviews_header }}
  <div class='jdgm-all-reviews__body'>
    {% assign prefix = 'all_reviews_' %}
    {% for count in (0..65535) %}
      {% assign metafield_key = prefix | append: count %}
      {% assign current_metafield = shop.metafields.judgeme[metafield_key] %}
      {% unless current_metafield %} {% break %} {% endunless %}
      {{ current_metafield }}
    {% endfor %}
  </div>
</article>

Step 2: Add Judge.me core

  • In the left-hand section, find the theme.liquid file in Layout.
  • Paste this liquid code {% render 'judgeme_core' %} above the closing tag </head>.

Step 3: Install Judge.me widgets

Below are the liquid code you can use to install Judge.me widgets on your pages.

Preview badge

It's best to install the preview badge (star rating) in the snippet file for your collection page and product page (typically product-grid-item.liquid and product-template.liquid, but can vary depending on the theme.

{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: false, product: product %}

Review widget

It's best to install the review widget inside the <div> that holds the standard page width of the snippet file for your product page (typically product-template.liquid).

{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: false, product: product %}

The review carousel is usually added to the template/index.liquid file so it will show up on your home page. But you can pretty much place this widget anywhere you'd like.

{% render 'judgeme_widgets', widget_type: 'judgeme_featured_carousel', concierge_install: false %}

Verified reviews count badge

The Verified reviews count badge is usually installed in the sections/footer.liquid file.

{% render 'judgeme_widgets', widget_type: 'judgeme_verified_reviews_count_badge', concierge_install: false %}

All reviews text

The All reviews text badge is usually also installed in the sections/footer.liquid file.

{% render 'judgeme_widgets', widget_type: 'judgeme_all_reviews_text', concierge_install: false %}

Floating reviews tab

The floating reviews tab is usually added above the closing tag </body> in the theme.liquid file so it will show up on every page.

{% render 'judgeme_widgets', widget_type: 'judgeme_floating_tab', concierge_install: false %}

Judge.me medals

The Judge.me medals are usually also installed in the sections/footer.liquid file.

{% render 'judgeme_widgets', widget_type: 'judgeme_medals', concierge_install: false %}