Knowledge Base

Knowledge base

Explore How-To's and learn best practices from our knowledge base.

Advanced Customization

Modified on: Sat, 6 Apr, 2019 at 3:55 AM


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


Did you find the answer you were looking for in the Article?

If not, feel free to create a ticket here and our support team will be in touch.


Did you find it helpful? Yes No

Can you please tell us how we can improve this article?

More articles in Review Carousel