Advanced customizations for the Reviews Carousel : Judge.me

The Reviews Carousel is designed to fit with your store's overall look to save your time on customizing. Still, the carousel is highly customizable so you can customize it to your needs with basic 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 review per slide on desktop, tablet, or mobile screen respectively. You can change the 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 the review and product image: By default, the review 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 where "red" can be replaced with another color name or code:

.jdgm-carousel-wrapper .jdgm-star {
  color: red !important;
}

Changing background color: By default, our carousel has no background color. If you want to set a custom background color, please use this code and replace "grey" with another color name or code:

.jdgm-carousel__item-container {
  background-color: grey !important;
}

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 !important; 
}

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

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

*NOTE: Script changes have to be added to the index.liquid if the carousel is only on the front page, 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>

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 the size of product images on the 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;
}

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

Advanced customizations for the Reviews Carousel

Images on left with arrows on left.

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

Related Articles