Skip to main content

Customizing the Reviews Carousel

Showcase your top reviews in a dynamic, eye-catching carousel

Updated this week

You can customize your Reviews Carousel and see a live preview of your changes with sample data, or real data from you store before saving.

Adjust texts, layout, and behavior; toggling between desktop and mobile view to see how your carousel will look on different devices, and watch the carousel update instantly — helping you fine-tune its look before publishing it to your store.

Customize the Reviews Carousel with built-in settings

1. Theme

To select from prebuilt themes to change the overall layout and styling of your Review Carousel:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Theme section.

  3. Select one of the following options:

    • Compact without pictures (default) (available on the Free plan)

    • Gallery (available on the Awesome plan) – highlight big, bold images, making it ideal for visual storytelling and product presentation.

    • Cards (available on the Free plan)

    • Centered (available on the Free plan)

    • Compact with pictures (available on the Free plan)

    • Focused view (available on the Free plan)

    • Vertical sliding (available on the Free plan)

  4. Click Save.

2. Slider arrows

Slider arrows position

Available on the Free plan

To choose where to place the slider arrows in your Reviews Carousel:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down to the Theme section.

  3. For Slider arrows, select one of the following options:

    • Show arrows on the sides of the carousel

    • Show arrows below the carousel

  4. Click Save.

Slider arrows color

Available on the Free plan

To change the color of the slider arrows:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Color section.

  3. For Slider navigation arrows, adjust the color to your preference.

  4. Click Save.

3. Review details

Available on the Free plan

To choose which elements of the reviews you want to show in the Reviews Carousel:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Design section.

  3. Under Review details, click the checkboxes next to any of the following options:

    • Show review rating – Show the star rating of each review in the Reviews Carousel

    • Show review title – Show the title of the featured reviews in the Reviews Carousel

    • Show review body – Show the content of the featured reviews in the Reviews Carousel

    • Show review date – Show the date the review was submitted in the Reviews Carousel

  4. Click Save.

4. Reviewer details

To choose which reviewer information you want to show in the Reviews Carousel:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Design section.

  3. Under Review details, click the checkboxes next to any of the following options:

    • Show reviewer name – Show the name of the reviewer in the Reviews Carousel

    • Show product name and URL – Show the name of the product in the Reviews Carousel and link it to the product page

  4. Click Save.

5. Product and review pictures

To choose the type of pictures you want to show in your Reviews Carousel:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Design section.

  3. Under Pictures, select one of the following options:

    • Disabled – The Reviews Carousel won't show any pictures

    • Show product pictures – The Reviews Carousel will show pictures of the products

    • Show review pictures if available – The Reviews Carousel will show pictures from the reviews. If no review pictures are available, fall back to use pictures of the products.

  4. Click Save.

You can also adjust the physical size of the images to make them less blurry:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Design section.

  3. Under Pictures, in the Picture physical size field, adjust the pixel to your preference.

  4. Click Save.

6. Number of reviews

By default, the Reviews Carousel will show 3 reviews on each slide.

To change how many reviews the carousel will show on each slide on desktop:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Design section.

  3. In the Number of reviews on desktop field, enter a number between 1 and 15.

  4. Click Save.

7. Autoslide

To change how fast the Reviews Carousel slides (in seconds):

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down to the Design section.

  3. In the Autoslide interval field, enter a number between 0 and 20.

  4. Hit Save.

8. Long reviews

By default, the Reviews Carousel height is set to 250px, but you can increase its height to prevent longer reviews from being cut off.

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down to the Design section.

  3. In the Block height field, adjust the pixel to your preference.

  4. Click Save.

9. Carousel width

By default, the Reviews Carousel is set to 80% width of the block it is installed in.

To adjust this width:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down to the Design section.

  3. In the Page width field, adjust the percentage to your preference.

  4. Click Save.

10. Carousel header

To remove the header ("Let customers speak for us") from the Reviews Carousel:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down to the Header section.

  3. Unclick the checkbox next to Show the header.

  4. Click Save.

11. Link to a Happy Customers page

To make the text under the Reviews Carousel header (e.g., “ from {{n}} reviews”) clickable and link to your Reviews page:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down to the Header section .

  3. Click the checkbox next to Link text to All Reviews Page if available.

  4. Enter the link to your All Reviews page.

  5. Click Save.

12. Reviews Carousel texts

To adjust the texts in your Reviews Carousel:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. In the Text section, click Customize text.
    ​

  3. Adjust the texts in the following fields to your liking and click Save.

Field

Default texts

Note

Header title

Let customers speak for us

Text

from {{ n }} reviews

The variable {{ n }} shows the total number of reviews in your store

Theme-specific settings

Gallery theme

Border style

To change the border style of the Reviews Carousel on the Gallery theme:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Theme section.

  3. Under Border style, select either:

    • "Square corners" or

    • "Round corners"

  4. Click Save.
    ​

Review length

To show longer reviews in the Reviews Carousel on the Gallery theme:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll to the Design section.

  3. In the Review length field, adjust the number of lines to your preference (Default: 5 lines).

  4. Click Save.

Read more button

To show a Read more reviews button at the bottom of the carousel on the Gallery theme:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. In the Text section, click Customize text.
    ​

  3. In the Button card, enable the Show button at the bottom of the carousel.

  4. Under Button text, enter your preferred label (Default: "Read more reviews").

  5. Under Page URL, paste the link to your All Reviews page.

  6. Click Save.

Cards theme

To change the star color of the carousel on Cards theme:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll to the Color section.

  3. Choose your preferred color using the color picker or enter a hex code for:

    • Full star color

    • Empty star color

  4. Click Save.

Vertical sliding theme

To change the Header and Review block color of the carousel on Vertical sliding theme:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down to the Color section.

  3. Choose your preferred color using the color picker or enter a hex code for Header background and border, Header text, and Review block.

  4. Click Save.

Customize the Reviews Carousel with CSS

Add custom CSS in Judge.me

Available on the Awesome plan

To add custom CSS in Judge.me for the Reviews Carousel:

  1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

  2. Scroll down and open the Advanced section at the bottom.

  3. Add your CSS code in the Custom CSS (Advanced) editor. The Custom CSS editor is limited to 500 characters.

  4. Click Save.
    ​

Example CSS you can add in Judge.me to customize elements in the Reviews Carousel:

What you want to change

CSS code

To fix product name being cut off in the Reviews Carousel

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

To change the header font size

.jdgm-carousel-title {
    font-size: 24px;
}

To manually change the star color in the Reviews Carousel

.jdgm-star { 
    color: RED; 
}

To change the color of the from {{ n }} reviews text in the Reviews Carousel

.jdgm-carousel-number-of-reviews {
    color: red;
}

To fix the issue where the Reviews Carousel goes blank when scrolling on RTL (right-to-left) language stores like Arabic.

.jdgm-carousel__item-container {
    direction: ltr !important;
}

Compact with pictures theme: To fix reviewer name being cut off in the Reviews Carousel in mobile.

@media (max-width: 768px) {
    .jdgm-carousel--aligned-theme .jdgm-carousel-item__reviewer-name {
        padding-bottom: 10px;
    }

    .jdgm-carousel--aligned-theme .jdgm-carousel-item__review-wrapper {
        height: 90%;
    }
}

Add custom CSS in the Shopify theme editor

Available on the Free plan

For even more customizations, you can add the CSS in Shopify theme editor:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit and click Edit theme.

  3. On the left menu, click the Theme settings icon.

  4. Scroll down to Custom CSS and add your CSS code.

  5. Click Save.

Example CSS you can add in Shopify theme editor to customize elements in the Reviews Carousel:

What you want to change

CSS code to add in Shopify theme editor

To change the background color of the Reviews Carousel block in Shopify

div:has(.jdgm-carousel-wrapper) {
    background-color: RED;
}

To fix the issue where the stars in the Reviews Carousel are showing weird icons or showing as blocks (typically because our font family for the stars got overwritten by the theme font)

.jdgm-star {
    font-family: 'JudgemeStar'!important;
}

To reduce the gap between the Reviews Carousel and the block above it

.jdgm-carousel-wrapper {
    padding-top: 0;
}

To reduce the gap between the Reviews Carousel and the block below it

.jdgm-carousel-wrapper {
    padding-bottom: 0;
}

Customize the Reviews Carousel with JavaScript (Advanced)

To apply even more custom styling to your Reviews Carousel:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit.

  3. Click the 3-dot icon (...) and select Edit code.

  4. Go to the theme.liquid file.

  5. At the bottom of that file, above the before ending </body> tag, add in the JavaScript code.

  6. Click Save.

Javascript code

To make the images in the Reviews Carousel clickable and direct to the product page

<script>
   document.addEventListener('DOMContentLoaded', function() {    
      var jdgmImgs = document.querySelectorAll('.jdgm-carousel-item__product-image');    
      var jdgmLinks = document.querySelectorAll('a.jdgm-carousel-item__product');        
      for (var i = 0; i < jdgmImgs.length; i++) {        
         (function(index) {            
            jdgmImgs[index].addEventListener('click', function() {                
               window.open(jdgmLinks[index].getAttribute('href'), '_blank');            
            });        
         })(i);    
      }
   });
</script>
<style> 
   img.jdgm-carousel-item__product-image:hover {    
      cursor: pointer !important;
   }   
</style>

Troubleshoot

Product images appear broken in the Reviews Carousel

If the product images in your Reviews Carousel show as missing or broken (shown as a small icon and placeholder), this is typically because:

  • The reviews are linked to out-of-store products.

    • Out-of-store products no longer exist in your live store, so their images can’t be retrieved.

    • To prevent reviews from out-of-store products from showing in the Reviews Carousel:

      1. From your Judge.me admin, go to Settings > Advanced.

      2. In the Out-of-store products section, disable "Include reviews for out-of-store products in all widgets and out-of-store text setting".

      3. Click Save.

  • You recently updated your products and replaced or changed their images.

    • When product images are changed, the image URLs may be refreshed or temporarily unavailable, causing the carousel to attempt to load outdated or invalid links.

    • To refresh the image links in the Reviews Carousel:

      1. From your Judge.me admin, go to Settings > Widgets > Reviews Carousel (Classic).

      2. Scroll down to the main Design section.

      3. Under Pictures:

        • Select Disabled and click Save.

        • Then, select Show product pictures and click Save again.

Product pictures still show when I select "Show review pictures if available"

If you've enabled "Show review pictures if available" in the Reviews Carousel but still see product pictures, it usually means the featured reviews don't include any images. When a review has no picture, the carousel will automatically fall back to the product image.

To make sure only review pictures show in the Reviews Carousel:

  1. Keep the "Show review pictures if available" setting enabled to show review pictures if available.

  2. Adjust the Reviews Carousel curation method so that only reviews with pictures are included:

    • Select "Recent reviews with pictures" to automatically feature only image reviews, or

    • Select "Choose reviews manually" and feature only the reviews with pictures yourself.

With this setup, the Reviews Carousel will display only reviews that have images — and only their review pictures.

Related Articles
Customizing the Review Widget (legacy version)
All Reviews Counter
Verified Reviews Counter
Videos Carousel
Cards Carousel
Did this answer your question?