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:
From your Judge.me admin, go to Settings > Widgets.
Scroll down to the Review Carousel card and click Customize.
Scroll down to the Advanced section at the bottom.
Open the Custom CSS (Advanced) editor.
Paste the CSS code from the table below into the editor (only CSS that begins with
.jdgm-carouselwill be accepted).Click Save.
What you want to change | CSS code |
To fix product name being cut off in the Reviews Carousel | .jdgm-carousel-item { |
To change the header font size | .jdgm-carousel-title { |
To manually change the star color in the Reviews Carousel | .jdgm-star { |
To change the color of the from | .jdgm-carousel-number-of-reviews { |
To reduce the gap between the Reviews Carousel and the block above it | .jdgm-carousel-wrapper { |
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 { |
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Customize.
On the left menu, click the Theme settings icon
Scroll down to Custom CSS and add the CSS code from the table below.
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) { |
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 { |