Skip to main content
Add custom CSS in Judge.me
Add custom CSS in the Shopify theme editor

Customizing the Review Widget with CSS

Updated this week

Add custom CSS in Judge.me

Besides the built-in customizations, you can apply more styling to your Review Widget with CSS.

To add custom CSS for the Review Widget:

  1. From your Judge.me admin, go to Widgets > Review Widget > Customize.

  2. Scroll down to Advanced and open the Custom CSS (Advanced) editor.

  3. Add in any of the CSS code from the table below.

  4. Click Save.

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 methods dropdown

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

To change the width of the Review Widget (usually if you want to add some space between the Review Widget and the left and right edges of the page. It 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 font color of the reviews in the Review Widget

#judgeme_product_reviews {
    color: black;
}

To change the color of the text input (when writing a review) in the Review Widget 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 icon covers the Sorting methods container in the Review Widget

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

To add more columns to the Review Widget Cards theme

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

To reduce the picture size in the Review Widget Cards theme

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

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

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

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

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

See the steps for the new app design (coming soon)

To add custom CSS codes 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 panel, open the Custom CSS (Advanced) editor.

  4. Add in any of the CSS code below.

  5. Click Save.

Add custom CSS in the Shopify theme editor

The CSS settings inside Judge.me admin only apply to the elements that directly belong to the Review Widget (e.g., .jdgm-rev, .jdgm-rev-widg,...).

If you need to style other elements relating to the Review Widget but don't belong to the Review Widget elements, you can add the CSS in the Shopify theme editor instead.

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

To change the color of the text input (when writing a review) in the Review Widget pop-up form.

textarea#jdgm-review-body-input {
    color: black;
}
Related Articles
Adding Judge.me widgets (Stencil theme)
All Reviews widget
All Reviews Counter
Review Snippets Widget
Customizing the Reviews Carousel with CSS
Did this answer your question?