Knowledge Base

Knowledge base

Explore How-To's and learn best practices from our knowledge base.

Judge.me Manual Installation

Modified on: Thu, 29 Aug, 2019 at 1:51 PM


Judge.me Manual Installation

This article is about installing Judge.me Product Reviews completely manually in your theme. This is only necessary if you are working in an unpublished theme, that has never before published, or if you are trying to troubleshoot something.

Please note: Judge.me Product Reviews 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 ({% include 'judgeme_core' %})

Manually Installing Judge.me Product Reviews

Install Judge.me Core Files

  1. Create the judgeme_core snippet in the Shopify theme editor: Go to your Shopify admin > Online stores > Themes > Click Actions > Edit Code
  2. In your theme editor, in the left-hand section that displays files, scroll down to “Snippets” and click add new snippet.
  3. Call the new snippet “judgeme_core.liquid” and paste the below code to the snippet and 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 %} 

{{ 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="all" href="https://cdn.judge.me/shopify_v2.css"> 

  1. Scroll to the layout section and edit the theme.liquid file
  2. Find the closing tag </header> and paste the snippet reference {% include 'judgeme_core' %} above it like in the example below:
{% include 'judgeme_core' %} </head>


Install Judge.me widget files

Now you will need to add the file that contains the code for the widgets (this file will not add the widgets to your theme). Like before, you will need to create a new snippet inside your theme. Scroll down to “Snippets” and click add new snippet.

This time call the snippet “judgeme_widgets.liquid” and paste the below code to the snippet and 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)"> 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_floating_tab' %} <section class='jdgm-widget jdgm-revs-tab'> {% assign jm_metafields = shop.metafields.judgeme %} <div class='jdgm-revs-tab-btn btn' position="none">★ 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 href='/pages/reviews'> <div data-score='{{ jm_metafields.all_reviews_rating }}' class='jdgm-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> <a href=javascript:void(0) class='jdgm-all-reviews-rating-wrapper'> <span style="display:block" data-score='{{ shop.metafields.judgeme.all_reviews_rating }}' class='jdgm-all-reviews-rating'></span> <span style="display: block"> from {{ shop.metafields.judgeme.all_reviews_count }} reviews </span> </a> </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 %}

Add Judge.me Widget Snippets

Now you can add the snippets onto your theme so that the widgets appear on your 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 (this 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 the product page (typically product-template.liquid) and paste the preview badge code below the title.

Preview badge code:

{% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}

Product Review Widget

To add the review widget to your product page go to your product page file on the theme editor (typically product-template.liquid) and paste the review widget code in the desired location on the page.

Product review widget code:

{% include 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true %}

Place review widget above related products

Search for related product section on the product page and paste the widget code above related products and save.

Place review widget at bottom of page

Go to the product page template and paste review widget at the bottom of the file and save. Depending on the theme, look for <div>s that hold the standard page width and try to include the review widget inside this <div>.



Did you find it helpful? Yes No

Can you please tell us how we can improve this article?

More articles in Installations