Review Carousel | Judge.me

Review Carousel

The Review Carousel will show featured reviews on a specific page of your store, e.g. the home page. This helps you to showcase your best reviews and win the trust of your visitors and also can upsell your most-loved products. The Review Carousel is a feature of our Forever Free plan with unlimited review request.

Review Carousel examples

From Standout Designs:

From Chibebe:

Review Carousel Installation

You can enable the Review Carousel in your Judge.me app admin: More > Settings > Installation > Review Carousel Installation. The widget will then be automatically added to the bottom of your home page (templates/index.liquid). Upon request, our Theme Concierge will position the Review Carousel according to your preferences.

You can adjust your carousel header by changing the Carousel Title (by default: "") and the Summary Text below the ★★★★★ (by default: "from {{ n }} reviews").

Further Review Carousel Customization

  • Show pictures inside the carousel
  • Show product images or review photos (if available)
  • Position of the slider arrows
  • Autoslide Interval
  • Review Carousel height
  • Review Carousel width
  • Slider arrows color

Feature Reviews for the Review Carousel

In order to show your Review Carousel, you first need to select reviews that you want to feature. (You need to feature at least 1 review for the Carousel to show.)

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

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

Advanced Customizations

The Review Carousel automatically respects your store's overall design to save your time on customizing. Still, the Review 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 .jdgm-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;
}

.jdgm-carousel__item-wrapper {
  height: 300px !important;
}

.jdgm-carousel-item__review {
  height: calc(100% - 4em) !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-wrapper { 
  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; 
  border-left:1px solid #e5e5e5 !important; 
  border-top: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
}
  
.jdgm-carousel-item { 
  padding: 10px !important; 
  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:
.jdgm-widget.jdgm-carousel {
  width: calc(100% - 81px) !important;
  margin: 0 auto !important;
}

.jdgm-carousel__left-arrow {
  float: left;
  margin-left: -20px !important;
  margin-top: -250px !important;
}


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

.jdgm-carousel__arrows {
  margin: 0 !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;
}


Images on left with arrows on left.


.jdgm-carousel__item-wrapper {
  height: 150px !important;
}

.jdgm-carousel-item__review {
  float: right;
  text-align: left !important;
  height: 100% !important;
  width: 60% !important;
  padding: 0 12px;
  font-size: 75% !important;
}

.jdgm-carousel-item__product {
  float: left;
  height: 90% !important;
  width: 35% !important;
  margin-left: 5% !important;
}

.jdgm-carousel-item__product-image {
  height: auto !important;
  margin: 5px !important;
}

.jdgm-carousel-item__reviewer-name {
  font-size: 90% !important;
  font-weight: bold;
  opacity: 1 !important;
}

.jdgm-carousel-item {
  padding: 0 !important;
}
.jdgm-carousel-item__timestamp {
  display: none !important;
}

.jdgm-widget.jdgm-carousel {
  width: calc(100% - 81px) !important;
  margin: 0 auto !important;
  margin-right: 20px !important;
}

.jdgm-carousel__left-arrow {
  float: left;
  margin-left: -40px !important;
  margin-top: -100px !important;
}


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

.jdgm-carousel__arrows {
  margin: 0 !important;
}

.jdgm-carousel-item__product-title {
  display:none !important;
}


More carousel styles and their required CSS


Images on left. Works nice if your images have the same size.


.jdgm-carousel__item-wrapper {
  height: 150px !important;
}

.jdgm-carousel-item__review {
  float: right;
  text-align: left !important;
  height: 100% !important;
  width: 60% !important;
  padding: 0 12px;
}

.jdgm-carousel-item__product {
  float: left;
  height: 90% !important;
  width: 35% !important;
  margin-left: 5% !important;
}

.jdgm-carousel-item__product-image {
  height: auto !important;
}

.jdgm-carousel-item__reviewer-name {
  font-size: 120% !important;
  font-weight: bold;
  opacity: 1 !important;
}

.jdgm-carousel-item {
  padding: 0 !important;
}


Compact carousel

In addition of the styles below, you will need to also use the following carousel wrapper.

      <div class='jdgm-carousel-wrapper'>    
        <div class="jdgm-carousel-title-and-link">
          <h2 class='jdgm-carousel-title'>Let customers speak for us</h2>
          <a href='/pages/reviews' class='jdgm-all-reviews-rating-wrapper'>
            <span style="display:block"  data-score='{{ shop.metafields.judgeme.all_reviews_rating }}' class='jdgm-all-reviews-rating'></span>
            <span style="display: block">
              from {{ shop.metafields.judgeme.all_reviews_count }} reviews
            </span>
          </a> 
        </div>
        {{ shop.metafields.judgeme.featured_carousel }}  
      </div>
.jdgm-carousel__item-wrapper {
  height: 150px !important;
}

.jdgm-carousel-item__review {
  text-align: left !important;
  height: calc(100% - 4em) !important;
  width: 100% !important;
  padding: 0 12px;
}

.jdgm-carousel-item__product {
  display: none !important;
}

.jdgm-carousel-item__product-image {
  height: auto !important;
}

.jdgm-carousel-item__reviewer-name {
  font-size: 120% !important;
  font-weight: bold;
  opacity: 1 !important;
}

.jdgm-carousel-item__reviewer-name-wrapper {
  text-align: left !important;
  padding-left: 12px;
}

.jdgm-carousel-item {
  padding: 0 !important;
}

.jdgm-carousel-title-and-link {
  display: inline-block;
  float: left;
  width: 20%;
  height: 150px;
}

.jdgm-carousel {
  display: inline-block !important;
  width: calc(80% - 60px) !important;
  margin: 0 20px 0 40px !important;
 
}

.jdgm-carousel__left-arrow {
  float: left;
  margin-left: -30px !important;
  margin-top: -100px !important;
}


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

.jdgm-carousel__arrows {
  margin: 0 !important;
}


@media only screen and (max-width: 767px) {
  .jdgm-carousel {
    width: calc(65% - 60px) !important;
  }
  
  .jdgm-carousel-title-and-link {
    width: 35%;
  }
  
  .jdgm-carousel-item__reviewer-name-wrapper {
    text-align: center !important;
    padding-left: 0;
  }
  
  .jdgm-carousel-item__review {
    text-align: center !important;  
  }
}


@media only screen and (max-width: 321px) {
  .jdgm-carousel {
    width: calc(100% - 60px) !important;
    margin: 20px 20px 0 40px !important;
    text-align: center;
  }
  
  .jdgm-carousel-title-and-link {
    width: 100%;
    height: auto;
  }
}


images on the left with aligned product title and reviewer name, and arrows on the carousel sides.


.jdgm-carousel__item-wrapper {
  height: 150px !important;
}

.jdgm-carousel-item__review {
  float: right;
  text-align: left !important;
  height: 100% !important;
  width: 60% !important;
  padding: 0 12px;
  font-size: 75% !important;
}

.jdgm-carousel-item__product {
  float: left;
  height: 90% !important;
  width: 35% !important;
}

.jdgm-carousel-item__product-image {
  height: 100px !important;
}

.jdgm-carousel-item__reviewer-name {
  font-size: 90% !important;
  font-weight: bold;
  opacity: 1 !important;
  width: 35% !important;
}

.jdgm-carousel-item {
  padding: 0 !important;
}
.jdgm-carousel-item__timestamp {
  display: none !important;
}

.jdgm-widget.jdgm-carousel {
  width: calc(100% - 81px) !important;
  margin: 0 auto !important;
  margin-right: 20px !important;
}

.jdgm-carousel__left-arrow {
  float: left;
  margin-left: -40px !important;
  margin-top: -100px !important;
}


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

.jdgm-carousel__arrows {
  margin: 0 !important;
}

.jdgm-carousel-wrapper{
  padding-bottom: 20px !important;
}

Troubleshooting

  • Feature at least 1 review: Without any featured review from the reviews dashboard, the Review Carousel will not show at all.
  • 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.