Add custom CSS in Judge.me
Available on the Awesome plan
Besides the built-in customizations, you can apply more styling to your Review Widget with CSS.
To add custom CSS for the Review Widget:
From your Judge.me admin, go to Settings > Widgets.
Find the Review Widget 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-rev
or.jdgm-rev-widg
will be accepted).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 { |
To remove the pin icon in the Review Widget | .jdgm-rev__pinned { |
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'] { |
To remove the " | .jdgm-rev-widg__summary-average { |
To remove the "Based on | .jdgm-rev-widg__summary-text.jdgm-all-reviews__summary-text--verified { |
To remove the "Most Helpful" option from the Sorting method dropdown | .jdgm-sort-dropdown option[value="most-helpful"] { |
To hide the review count numbers beside the star breakdown in the Review Widget | .jdgm-histogram__frequency { |
To customize elements:
What you want to change | CSS code |
To change the width of the Review Widget, usually if:
This doesn't fix the width issue in these themes: Horizon, Savor, Fabric, Dwell, Tinker, Atelier, Vessel, Heritage, Ritual, Pitch). | #judgeme_product_reviews { |
To change the font size in the Review Widget | .jdgm-review-widget .jdgm-rev-widg { |
To change the font color of the reviews in the Review Widget | #judgeme_product_reviews { |
To change the color of the text input (when writing a review) in the Review Widget embedded form | .jdgm-form input:not([type="submit"]), |
To prevent the Review Widget form from zooming automatically on iPhones | input, textarea { |
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 { |
To reduce the picture size in the Review Widget Cards theme | .jdgm-rev__pic-img { |
Slider theme: To change the color of the Read More Reviews button in the Review Widget | .jdgm-btn--dark { |
Slider theme: To change the text color of the Read More Reviews button in the Review Widget | .jdgm-btn--dark { |
To change the font size of the Customer Reviews header | .jdgm-rev-widg__title {
|
To fix the Submit review button that doesn't look like a button in some themes | .jdgm-submit-rev { |
To change the Write a review button style from solid to outlined | .jdgm-write-rev-link { |
Cards theme: To add more columns to the Review Widget | @media only screen and (min-width: 800px) {
In general, divide 100% by the number of columns to get the right percentage. For example:
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 { |
Add custom CSS in the Shopify theme editor
Available on the Free plan
To add 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 any of the CSS code from the table below.
Click Save.
What you want to change | CSS code |
To remove the YouTube URL field in the Review Widget form | input[name="yt_url"] { |
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){ |
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 { |
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 { |
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) { |
To change the color of the text input when writing a review in the Review Widget pop-up form. | .jdgm-write-review-modal__field-input { |