Knowledge base | Judge.me

Reviews Carousel

Reviews Carousel showcases your featured reviews to promote your shop. We recommend putting it in your homepage or landing page to maximize its impression.

Review Carousel examples

From Standout Designs:

From Chibebe:

To select which reviews to be featured, please:

  • Go to Judge.me Index page.
  • On a review row, click the action button on More column. You will see a list of actions for that review.
  • Select Feature review (carousel) or Un-feature review (carousel) to toggle whether the review should be featured or not.
  • When a review is featured, you will see a green border at the very left of that review row.

Theme Installation:

Note: you need to feature at least 1 review for the Carousel to show.

  • Basic usage: put this line to your theme and that's it: {{ shop.metafields.judgeme.featured_carousel }}
  • Recommended usage: put this code in your theme where you want the carousel to show:
<div class='jdgm-carousel-wrapper'>
  <h2 class='jdgm-carousel-title'>Let customers speak for us</h2>
  <a href='/pages/reviews' class='jdgm-all-reviews-rating-wrapper'>
    <div data-score='{{ shop.metafields.judgeme.all_reviews_rating }}' class='jdgm-all-reviews-rating'></div> from {{ shop.metafields.judgeme.all_reviews_count }} reviews
  </a>
  {{ shop.metafields.judgeme.featured_carousel }}
</div>

  • Where to install: In product.liquid template if you want the carousel on product pages, in index.liquid template if you want carousel on homepage, etc.

Special notes:

  • Feature at least 1 review: Without any review featured from the app admin, nothing will show when you install the review carousel code.
  • Maximum 50 reviews: The carousel can store a maximum of 60_000 characters, which comes down to, on average, 50 reviews.
  • New to old: The carousel shows featured reviews new to old, just like the review widget. There is currently no way to alter this review order.

Advanced Customizations

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

  • Hiding review dates: The review dates in the review carousel use the US date format mm/dd/yy. This can not be changed. However, you can hide the carousel review dates by adding this code to your theme CSS file:
.jdgm-carousel-item__timestamp { display: none !important; }

  • Responsive design: by default, the reviews carousel shows 3, 2 or 1 reviews per slide on desktop, tablet or mobile screen respectively. You can change number of reviews per slide with CSS. Here is an example to show 2 reviews per slide (please note that 50% is from 100% divided by 2 and 2 is from two reviews per slide - unfortunately this is how CSS works):
.jdgm-carousel-item { width: 50%; }

  • Less spacing between review and product image: By default, the reviews carousel already adapts to your theme's font size, color and spacing. However, some themes create too much white space in the carousel. In this case, you can adjust this by adding this CSS to your theme:
.jdgm-carousel__item-wrapper.jdgm-carousel__item-wrapper {
  font-size: 14px;
  line-height: 1.4;
  height: 250px;
}

  • Changing arrow colors: If the grey arrows of our review carousel aren't clear enough in your theme, please add the following CSS to your theme to change the arrow color (in the example below, to black):
.jdgm-carousel__right-arrow, .jdgm-carousel__left-arrow {
  border-color: black !important;
}

  • Changing star colors: By default, the carousel star colors are the link colors from your theme, or the widget star color if you picked one in the app settings. If you want a custom star color for the carousel only, please use this code:
.jdgm-carousel-wrapper .judgeme-star { 
   color: red;
 }

  • Changing background color: By default, our carousel has no background color. If you want to set a custom background color, please use this code:
.jdgm-carousel__item-container { 
   background-color: grey; 
 }

  • Removing product images: We show product image thumbnails for each review in the carousel. If you don't want to show the product images, please use this code:
.jdgm-carousel-item__product-image { 
  display: none !important;
}

  • Adding carousel borders: If you want to show borders around the featured reviews in the carousel, please use this code:
.jdgm-carousel-item { 
  border: 1px solid black;
  border-right: none;
}
.jdgm-carousel-item:last-child { 
  border-right: 1px solid black;
}

  • Changing carousel font: By default, the carousel uses your theme's text font, font size and font color. If you want to customize the font for just the carousel, please use this code:
.jdgm-carousel-item {
  font-family: Arial;
  color: red;
}

  • Disabling Auto-slide: By default, the carousel will automatically slide to the next review every 5 seconds. If you want to disable this auto-slide, please use this code:
<script>
  judgemeOpts=window.judgemeOpts||{}; judgemeOpts.carouselNoAutoSlide = true;
</script>

  • Reducing product image size: We show product images with 240x240 pixels. If you want a different image size (say 120x120 pixels), please change {{ shop.metafields.judgeme.featured_carousel }} into this:
{{ shop.metafields.judgeme.featured_carousel | replace: '_240x240.', '_120x120.' }}