Skip to main content

Customizing the Review Widget with CSS

Updated over 2 weeks ago

Add custom CSS in Judge.me

Available on the Awesome plan

To add custom CSS for the Review Widget:

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

  2. Find the Review Widget 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-rev or .jdgm-rev-widg will be accepted).

  6. Click Save.

To hide elements:

What you want to change

CSS code

To hide the "Review Title" from all reviews in the Review Widget

.jdgm-rev__title {
    display: none;
}

To remove the pin icon in the Review Widget

.jdgm-rev__pinned {
    display: none;
}

To hide the Review Widget and the Write a review button when the product has no reviews, without enabling Web Reviews Restriction

.jdgm-rev-widg[data-number-of-reviews='0'] {
   display: none;
}

To remove the "{{ average_rating }} out of 5" text in the Review Widget

.jdgm-rev-widg__summary-average {
    display: none;
}

To remove the "Based on {{ number_of_reviews }} review/reviews" text in the Review Widget

.jdgm-rev-widg__summary-text.jdgm-all-reviews__summary-text--verified {
    display: none;
}

To remove the "Most Helpful" option from the Sorting method dropdown

.jdgm-sort-dropdown option[value="most-helpful"] {
    display: none;
}

To hide the review count numbers beside the star breakdown in the Review Widget

.jdgm-histogram__frequency {
    display: none !important;
}

To customize elements:

What you want to change

CSS code

To change the width of the Review Widget, usually if:

  • You want to add some space (padding or margin) between the Review Widget and the left/right edges of the page

  • The Review Widget is stretching across the full width of the page, causing the reviews to appear cut off on the right side.

This doesn't fix the width issue in these themes: Horizon, Savor, Fabric, Dwell, Tinker, Atelier, Vessel, Heritage, Ritual, Pitch).

#judgeme_product_reviews {
    width: 80%!important;
    margin: 0 auto!important;
}

To change the font size in the Review Widget

.jdgm-review-widget .jdgm-rev-widg {
    font-size: 10px;
}

To change the color of the published review contents in the Review Widget

#judgeme_product_reviews {
    color: black;
}

To change the color of the texts when the customer writes a review in the Review Widget (text input in the pop-up form)

.jdgm-write-review-modal__field-group textarea, .jdgm-write-review-modal__field-group input {
    color: black;
}

To change the color of the texts when the customer writes a review in the Review Widget (text input in the embedded form)

.jdgm-form input:not([type="submit"]),
.jdgm-form textarea {
    color: black;
}

To prevent the Review Widget form from zooming automatically on iPhones

input, textarea {
    font-size: 16px !important;
}

To fix the issue where the dropdown arrow in the sorting method of the Review Widget is oversized and covers the text of the sorting method 

.jdgm-sort-dropdown {
   background: none;
}

To reduce the picture size in the Review Widget Cards theme

.jdgm-rev__pic-img {
    width: 50% !important;
}

Slider theme: To change the color of the Read More Reviews button in the Review Widget 

.jdgm-btn--dark {
    background: #2B5BBF;
    border-color: #2B5BBF;
}

Slider theme: To change the text color of the Read More Reviews button in the Review Widget 

.jdgm-btn--dark {
    color: white !important;
}

To change the font size of the Customer Reviews header

.jdgm-rev-widg__title {
    font-size: 40px !important;
}

To fix the Submit review button that doesn't look like a button in some themes 

.jdgm-submit-rev {
    border: 1px solid black !important;
    padding: 5px 10px !important;
}

To change the Write a review button style from solid to outlined

.jdgm-write-rev-link {
    background-color: transparent !important;
    border: 1px solid currentColor !important;
    color: #000000 !important;
}

Cards theme: To add more columns to the Review Widget

@media only screen and (min-width: 800px) { 
    .jdgm-rev.jdgm-rev { 
        width: calc(20% - 15px) !important; 
    } 
}

In general, divide 100% by the number of columns to get the right percentage. For example:

  • For 4 Columns: use 25%

  • For 5 Columns: use 20%

  • For 6 Columns: use 16%

  • For 7 Columns: use 15%

The pixel can go from 10 - 20px but you can leave it on 15 most of the time.

Cards theme: To place the review texts above the review image

.jdgm-rev__header {
    order: 1;
}
.jdgm-rev__content {
    order: 2;
}
.jdgm-rev__pics {
    order: 3;
}
.jdgm-rev__actions {
    order: 4;
}

Add custom CSS in the Shopify theme editor

Available on the Free plan

To add 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 any of the CSS code from the table below.

  5. Click Save.

What you want to change

CSS code

To remove the YouTube URL field in the Review Widget form

input[name="yt_url"] {
    display: none;
}

To change the background color of the Review Widget block (typically needed if your website background is a dark color)

div:has(.jdgm-rev-widg){
    background-color: RED;
}

To fix the issue where the stars in the Review Widget 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 fix the issue where the image in the Review Widget doesn't show in the middle of the screen when opened on mobile

.jm-mfp-wrap {
    top: 0px !important;
}

To fix the issue where the Review Widget only shows in a small corner of the page, instead of taking the full width of the page (usually happens in these themes: Horizon, Savor, Fabric, Dwell, Tinker, Atelier, Vessel, Heritage, Ritual, Pitch)

.spacing-style.layout-panel-flex.layout-panel-flex--column.section-content-wrapper.mobile-column:has(#judgeme_product_reviews) {
    --horizontal-alignment: unset !important;
}

Get your free trial

🎨 Start your 15-day free trial of the Awesome plan to unlock custom CSS and fully customize your widget styling to match your brand.

Follow us on LinkedIn

📢 Stay in the loop! Follow Judge.me on LinkedIn for the latest product updates, tips, and feature launches.

Related Articles
Floating Reviews Tab
All Reviews widget
All Reviews Counter
Review Snippets widget
Customizing the Reviews Carousel with CSS
Did this answer your question?