Knowledge base | Judge.me

Reviews Tab - Awesome plan

Reviews Tab is a a feature for Awesome plan that add a floating button that can display all reviews of your store. It's a lightweight version of All Reviews page that you can showcase on every page of your store.

Review Tab Example

From TripleMoon:

Theme Installation

Please add this code to your layouts/theme.liquid file, at the bottom right before the closing </body> tag:

<section class='jdgm-widget jdgm-revs-tab'>
  {% assign jm_metafields = shop.metafields.judgeme %}
  <div class='jdgm-revs-tab-btn btn' position='bottom'>★ 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>

Special notes

  • Reviews Tab button hangs at the top (only when you are logged in Shopify Admin): this is a side effect of the black bar at the top the screen from Shopify theme. This is okay, your customers can't see the black bar as well as this effect.

Advanced Customizations

Judge.me Reviews Tab automatically respects your store's overall design so as to save your time on customizing. Still, it is highly customizable with HTML and CSS. Please note that Advanced Customizations require some knowledge of HTML, CSS.

  • Changing position of the floating button: in the above installation snippet, please change bottom to either right or left.

  • Changing title of the Reviews Tab header: in the above installation snippet, please change Let customers speak for us to any text you like, such as Why customers love us.

  • Adding background color to Reviews Tab header: please add the following CSS to your theme CSS file:

.jdgm-revs-tab__header.jdgm-revs-tab__header {
  background: green;
  color: white;
}

  • Adding background color to Reviews Tab button: we automatically apply your store's styles to the button but if you want a different background color, please add the following CSS to your theme CSS file:
.jdgm-revs-tab-btn.jdgm-revs-tab-btn {
  background: green;
  color: white;
}

  • Making the button text ALL CAPS: please add the following CSS to your theme CSS file:
.jdgm-revs-tab-btn.jdgm-revs-tab-btn {
  text-transform: uppercase;
}

  • Hiding the tab in mobile screen: by default, Reviews Tab shows on both desktop and mobile screen. If you want to hide it from mobile screen, please add the following CSS to your theme CSS file:
@media all and (max-width: 768px) {
  .jdgm-revs-tab {
    display: none !important;
  }
}