Adding Judge.me widgets (Vintage themes)
Updated this week

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.

If you need help deleting our code and files, contact our team at [email protected]. We're available to help 24/7!

Did this answer your question?