Adding Judge.me widgets (Vintage themes)
Updated over a week ago

Vintage themes aren't available in the Theme Store anymore. These themes also don't have the features included in Shopify's Online Store 2.0 themes.

But if you're using a Vintage theme, you'll still be able to add Judge.me widgets following the steps in this article (although the process won't be too easy).

Step 1: Enable Judge.me core snippet

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want and click Customize.

  3. Go to App embeds and enable Judge.me.

  4. Click Save.

Step 2: Add the installation code

  1. Go back to Online Store > Themes.

  2. Click "..." > Edit code.

  3. Depending on the widget you want to install, the next steps are slightly different for each widget.

Star Ratings

Star Ratings on product page

  1. Open product-template.liquid.

  2. Add the following code under the {{ product.title }} element and click Save.

<!-- Start of Judge.me code --> 
<div class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'>
{{ product.metafields.judgeme.badge }}
</div>
<!-- End of Judge.me code -->

Star Ratings on collection pages

  • To add Star Ratings to your collection pages and featured collection on the homepage, please refer to this installation guide instead.


Review Widget

  • Open product.liquid.

  • Under {% section 'product-template' %}, add the following code:

<!-- Start of Judge.me code --> 
<div style='clear:both'></div>
<div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-id='{{ product.id }}'>
{{ product.metafields.judgeme.widget }}
</div>
<!-- End of Judge.me code -->
  • Click Save.


Reviews Carousel

  • Open index.liquid.

  • At the bottom of the file, add the following code:

<!-- Start of Judge.me code --> 
<div class='jdgm-carousel-wrapper'>
{% 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>
<!-- End of Judge.me code -->
  • Click Save.


Judge.me Medals

  • Open index.liquid.

  • At the bottom of the file, add the following code:

<!-- Start of Judge.me code --> 
{{ shop.metafields.judgeme.medals }}
<!-- End of Judge.me code -->
  • Click Save.


UGC Media Grid

  • Open index.liquid.

  • At the bottom of the file, add the following code:

<!-- Start of Judge.me code --> 
<div class='jdgm-widget jdgm-ugc-media-wrapper'>
{{ shop.metafields.judgeme.ugc_media_grid }}
</div>
<!-- End of Judge.me code -->
  • Click Save.


Verified Reviews Counter

Available for stores with more than 20 verified reviews

  • Open footer.liquid.

  • Add the following code under the opening <footer> tag.

<!-- Start of Judge.me code --> 
<div style='clear:both'></div>
<div style='text-align: center'>
<a class='jdgm-verified-count-badget' href='javascript:void(0)'>
{{ shop.metafields.judgeme.verified_badge }}
</a>
</div>
<!-- End of Judge.me code -->
  • Click Save.


All Reviews Counter

  • Open footer.liquid.

  • Add the following code under the opening <footer> tag.

<!-- Start of Judge.me code --> 
<div style='text-align: center'>
<div class='jdgm-widget jdgm-all-reviews-text'>
<a href='javascript:void(0)'>
<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 }}'>
Customers rate us {{ shop.metafields.judgeme.all_reviews_rating | round: 1 }}/5 based on {{ shop.metafields.judgeme.all_reviews_count }} reviews.
</span>
</a>
</div>
</div>
<!-- End of Judge.me code -->
  • Click Save.

Did this answer your question?