Skip to main content

Adding Judge.me widgets in Vintage themes

Updated yesterday

Vintage themes are no longer available in the Shopify Theme Store and do not include the advanced features of Online Store 2.0. However, you can still use them to showcase product reviews.

If you're using a Vintage theme, you can add the following Judge.me widgets to your theme:


Check if you're using a Vintage theme

To confirm if you're using a Vintage theme using your Shopify theme editor:

  1. Go to your Shopify theme editor:

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

    • Find the theme you want to edit and click Customize.

  2. On the left panel, inside Template, click + Add section.

  3. Go to the Apps tab.

  4. If you don't see any blocks inside the Apps tab, you're using a Vintage theme.

To confirm if you're using a Vintage theme using your Shopify code editor:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Open the templates folder.

  3. Scroll down to find index.

    • If your home page template is index.liquid, you're using a Vintage theme.

    • If your home page template is index.json, you're using a 2.0 theme.


Add Judge.me widgets in Vintage themes

Available on the Free plan

Step 1: Enable Judge.me app embed

To enable Judge.me app embed:

  1. Go to your Shopify theme editor:

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

    • Find the theme you want to edit and click Customize.

  2. From the menu on the left, click the App embeds icon (the third icon).

  3. Enable the "Judge.me" app embed.

  4. Click Save on the top right.

Step 2: Add the installation code


Star Rating Badge

To add the Star Rating Badge on your product page:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Find your product section file:

    • Open the templates folder.

    • Scroll down to find and open the product.liquid file.

    • In this file, look for a line that starts with {% section ... %} — for example, {% section 'product-template' %}.

    • Note the section name inside the quotes (e.g. product-template).

    • Go to the sections folder and open the corresponding file (e.g. product-template.liquid).

  3. Find the product title code:

    • In your product section file (e.g. product-template.liquid), look for the product title code.

    • It usually looks like this: <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1> or simply {{ product.title }}.

  4. Under the product title code, add this code for the Star Rating Badge:

    <!-- 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 -->

  5. Click Save on the top right.


Review Widget

To add the Review Widget on your product page:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Find your product section code:

    • Open the templates folder.

    • Scroll down to find and open the product.liquid file.

    • In this file, look for a line that starts with {% section ... %} — for example, {% section 'product-template' %}.

  3. Under the product section code, add this code for the Review Widget:

    <!-- 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 }}' data-product-title='{{ product.title | escape }}'>
    {{ product.metafields.judgeme.widget }}
    </div>
    <!-- End of Judge.me code -->

  4. Click Save on the top right.


Reviews Carousel

To add the Reviews Carousel on your home page:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Find your home page template:

    • Open the templates folder.

    • Scroll down to find and open the index.liquid file.

  3. Add the Reviews Carousel code:

    • In the index.liquid file, look for the {{ content_for_index }} line.

    • Under that line, add this code for the Reviews Carousel:

      <!-- 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 -->

  4. Click Save on the top right.


Judge.me Medals

To add the Judge.me Medals widget on your home page:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Find your home page template:

    • Open the templates folder.

    • Scroll down to find and open the index.liquid file.

  3. Add the Judge.me Medals widget code:

    • In the index.liquid file, look for the {{ content_for_index }} line.

    • Under that line, add this code for the Judge.me Medals widget:

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

  4. Click Save on the top right.


UGC Media Grid

To add the UGC Media Grid on your home page:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Find your home page template:

    • Open the templates folder.

    • Scroll down to find and open the index.liquid file.

  3. Add the UGC Media Grid code:

    • In the index.liquid file, look for the {{ content_for_index }} line.

    • Under that line, add this code for the UGC Media Grid:

      <!-- 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 -->

  4. Click Save on the top right.


Verified Reviews Counter

To add the Verified Reviews Counter on your footer:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Find your home page template:

    • Open the templates folder.

    • Scroll down to find and open the index.liquid file.

  3. Add the Verified Reviews Counter code:

    • In the index.liquid file, look for the {{ content_for_index }} line.

    • Under that line, add this code for the Verified Reviews Counter:

      <!-- 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 -->

  4. Click Save on the top right.


All Reviews Counter

To add the All Reviews Counter on your footer:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Find your home page template:

    • Open the templates folder.

    • Scroll down to find and open the index.liquid file.

  3. Add the All Reviews Counter code:

    • In the index.liquid file, look for the {{ content_for_index }} line.

    • Under that line, add this code for the All Reviews Counter:

      <!-- Start of Judge.me code -->
      <div class='jdgm-widget jdgm-all-reviews-text'>
      <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>
      <!-- End of Judge.me code -->

  4. Click Save on the top right.



Create an All Reviews page in Vintage themes

A Reviews Page helps you build trust by displaying both product reviews and store reviews on a single, easy-to-browse page. It gives potential customers the confidence to buy by showing real experiences from past shoppers.

To create an All Reviews page if you're using a Vintage theme:

Step 1: Enable Judge.me app embed

To enable Judge.me app embed:

  1. Go to your Shopify theme editor:

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

    • Find the theme you want to edit and click Customize.

  2. From the menu on the left, click the App embeds icon (the third icon).

  3. Enable the "Judge.me" app embed.

  4. Click Save on the top right.

Step 2: Create a reviews template

To create a template for your All Reviews page:

  1. Go to your Shopify code editor:

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

    • Find the theme you want to edit.

    • Click the 3-dot icon (...) and select Edit code.

  2. Open the templates folder.

  3. Click the New file icon to create a new template.

  4. Name your template judgeme_reviews.liquid and hit Enter.

  5. Add the following code:

    <!-- Start of Judge.me code --> 
    <div id='judgeme_all_reviews_page' class="page clearfix jdgm-all-reviews-page">
    <div class="jdgm-all-reviews-page__wrapper">
    <h1 class="jdgm-all-reviews-page__title">{{ page.title }}</h1>
    <div class='jdgm-all-reviews-page__description'>{{ page.content }}</div>
    <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>
    </div>
    </div>
    <!-- End of Judge.me code -->

  6. Click Save on the top right.

Step 3: Create a new page and assign the template

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

  2. Click the Add page button on the top right.

  3. Enter a page title (e.g., Happy Customers).

  4. In the Template section on the right, select judgeme_reviews.

  5. Click Save.


Troubleshoot


My theme doesn't have the index.liquid file

When installing the Reviews Carousel, UGC Media Grid, Judge.me Medals widget, Verified Reviews Counter, or the All Reviews Counter, if you can't find an index.liquid file in your theme, check if you see an index.json file instead.

If your theme has an index.json file instead of index.liquid, you’re using an Online Store 2.0 theme, which allows you to install the widgets using app blocks instead.

Follow the steps in these articles install the widgets using app blocks instead:


Did this answer your question?