If you are working on an unpublished theme or trying to troubleshoot something, please follow this manual installation guide. Feel free to contact support@judge.me if you need any more assistance.

ON THIS PAGE

  1. Install the Judge.me core files
  2. Install Judge.me widget files
  3. Add the main Judge.me widget snippets
  4. Add other Judge.me widgets

First, please note that Judge.me will automatically add the following snippet files to your theme when you enable any of our widgets inside the app:

  • judgeme_core.liquid (styling of our widgets)
  • judgeme_widgets.liquid (widget code)
  • judgeme_all_reviews.liquid (All Reviews Page widget)
  • and make theme.liquid reference to the judge.me_core snippet ({% render 'judgeme_core' %})

1. Install the Judge.me core files

  • Create the judgeme_core snippet in the Shopify theme editor: Go to your Shopify Admin Dashboard > Online Store > Themes > Actions > Edit Code
  • In your theme editor, in the left-hand section that displays files, scroll down to Snippets and click Add a new snippet.
  • Call the new snippet judgeme_core.liquid and paste the code below to the snippet, 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 -->
  • In the left-hand section, scroll to Layout and edit the theme.liquid file
  • Find the closing tag </head> and paste the snippet reference {% render 'judgeme_core' %} right above this tag like in the example below:
  {% render 'judgeme_core' %} 
</head>

2. Install Judge.me widget files

Now, let's continue to add the file that contains the code for the widgets (this file doesn't add the widgets to your theme).

  • In the left-hand section that displays files, scroll down to Snippets and click Add a new snippet.
  • This time, call the new snippet judgeme_widgets.liquid and paste the code below to the snippet, 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>
    Customers rate us {{ shop.metafields.judgeme.all_reviews_rating | round: 1 }}/5 based on {{ shop.metafields.judgeme.all_reviews_count }} reviews.
  </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'>
  {% assign jm_metafields = shop.metafields.judgeme %}
  <div class='jdgm-revs-tab-btn btn' position="left" tabindex="0" aria-label="Click to open Judge.me floating reviews tab">★ 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' tabindex='0' aria-label='Average rating is {{ jm_metafields.all_reviews_rating }}'></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'></span>
      <span style="display: block">
        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 %}

3. Add the main Judge.me widget snippets

Now you can add the snippets onto your theme so that the widgets appear in your online store.

Preview Badge

To add the Preview Badge on your Collection Page, go to the file in your theme editor that makes up the Collection Page (it is typically product-grid-item.liquid or collection-template.liquid, but can vary depending on the theme).

Once you have the file that makes up your Collection Page, find the title and paste the Preview Badge code below it.

Similarly, to install the Preview Badge on the Product Page, find the file that makes up your Product Page (typically product-template.liquid) and paste the preview badge code below the title.

Preview Badge code:

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

Review Widget

To add the Review Widget to your Product Page, find the file that makes up your Product Page (typically product-template.liquid) and paste the Review Widget code in the desired location on the page.

Review Widget code:

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

Place Review Widget above related products:

Place review widget at bottom of page:

Go to the Product Page template and paste the Review Widget code at the bottom of the file, then click Save. Depending on the theme, look for <div> that holds the standard page width and try to include the Review Widget code inside this <div>.

4. Add other Judge.me widgets

Other widgets that you can add into your theme are:

  • Reviews Carousel
  • Verified Reviews Count Badge
  • All Reviews Text
  • Floating Reviews Tab

To add the Reviews Carousel to most pages, it is possible to add a new section and select "Featured review carousel" as part of Judge.me on theme editor.

When this section selection is not available, you can use the following code and paste it to the desired part of the template that you are working on:

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

Verified Reviews Count Badge

The Verified Reviews Count Badge is usually added in the footer.liquid file:

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

All Reviews Text

The all reviews text badge should be added also in the footer.liquid or anywhere that you want with the following code:

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

Floating Reviews Tab

The floating reviews tab could be added anywhere in the theme.liquid file

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