To apply more custom styling to your Reviews Carousel, you can add custom CSS either directly 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. The Custom CSS editor is limited to 500 characters.
Click Save.
What you want to change | CSS code to add in Judge.me |
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 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 add in Shopify theme editor |
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 { |
To reduce the gap between the Reviews Carousel and the block above it | .jdgm-carousel-wrapper { |
To reduce the gap between the Reviews Carousel and the block below it | .jdgm-carousel-wrapper { |