Reviews Carousel | 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.

Tip: To filter to see only featured reviews, please search for featured in the search box.

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.
  • Change headline: The default headline for the review carousel is Let customers speak for us, this can be changed by simply replacing the text in the code snippet

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.

Adding the code below to your scss.liquid file will help you to customize detailed aspects of the review carousel widget. Make sure to only change your .scss.liquid file and not your actual .scss file, because the .scss file is compiled from the .scss.liquid file.

  • 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;
}

  • Removing empty space after removing product images: Usually empty space is left behind after removing the image thumbnails. This can be removed by reducing the size of the container
.jdgm-carousel__item-container { 
  height: 280px;
}

  • Adding carousel borders: If you want to show borders around the feature review in the carousel as well as the carousel container itself, please use these two code snippets:
.jdgm-carousel__item-container { 
  border-right:none !important; // the border on the right side is eventually defined by the next container's left border and the review carousel container's right border
  border-left:1px solid #e5e5e5 !important; 
  border-top: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
}
  
.jdgm-carousel-item { 
  padding: 10px !important;  // this will allow extra space in the small container that holds all review information
  border-right: 1px solid #e5e5e5 !important;
}

  • Changing carousel arrows so that they appear on the left and right side: By default, the carousel arrows show below the carousel. If you want to customize the position of the arrows, please use this code:
@media screen and (min-width: 760px) {

  .jdgm-carousel__left-arrow {
    margin-left: -30px !important; // leaving space between arrow and carousel container
    float: left !important; // making the arrow appear on the left side
    margin-top: -250px !important; // height of the arrow (compare this height with the total height of your carousel container)
  }

  .jdgm-carousel__right-arrow {
    margin-right: -30px !important;
    float: right !important;
    margin-top: -250px !important;
  }
}

  • Changing the width of the carousel: The style attribute can be added to adjust the width of the carousel, for example style='max-width:90%; margin:auto'

<div style='max-width:90%; margin:auto' 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>


  • Adjust the spacing below the reviewer name (the reviewer name is at the bottom of this container)
.jdgm-carousel-item__review{
  padding-bottom: 10px !important;
}

  • Adjust the spacing below the product name (the reviewer name is at the bottom of this container)
.jdgm-carousel-item{
  padding-bottom: 10px !important;
}

Script changes have to be added to the index.liquid if the carousel is only on the frontpage, at best before the ending </body> tag, so that it will eventually look like:

...
</script>
</body>

If the review carousel is used on other pages besides index.liquid, it has to be considered to place in theme.liquid

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

  • Changing auto-sliding time: By default, the auto-sliding time is every 5 seconds. If you want to change to, for example, 10 seconds, please use this code:
<script>
  jdgmSettings.autoSlideInterval = 10;
</script>

Image Customizations

  • 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.' }}

  • Blurry images: If the images are blurry, then increase the size of the image. Please change {{ shop.metafields.judgeme.featured_carousel }} into this:
{{ shop.metafields.judgeme.featured_carousel | replace: '_240x240.', '_512x512.' | replace: '_120x120.', '_512x512.' }}

  • Increase size of product images on carousel: Usually this is because of the height of the carousel. Need to make sure the height of the carousel is 400px or higher, then:
.jdgm-carousel-item__review {
  height: calc(50% - 4em) !important;
}

.jdgm-carousel-item__product {
  height: 50% !important;
}