Skip to main content

Customizing the Reviews Carousel with CSS

Updated this week

To apply more custom styling to your Reviews Carousel, you can add custom CSS in Judge.me or in Shopify theme editor.

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.

  2. Scroll down to the Review Carousel card and click Customize.
    ​

  3. Scroll down to the Advanced section at the bottom.

  4. Open the Custom CSS (Advanced) editor.

  5. Paste the CSS code from the table below into the editor (only CSS that begins with .jdgm-carousel will be accepted).

  6. Click Save.
    ​

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 reduce the gap between the Reviews Carousel and the block above it

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

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

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 Customize.

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

  4. Scroll down to Custom CSS and add the CSS code from the table below.

  5. Click Save.

What you want to change

CSS code

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;
}
Did this answer your question?