Skip to main content

Customizing the Review Widget (legacy version)

Customize and display reviews on your store’s product pages using the Review Widget

Updated yesterday

You can customize the Review Widget using the built-in settings or adding your own CSS for advanced styling.

As you customize the Review Widget, you’ll see your changes update instantly in the live preview on the right. This lets you review and refine your design in real time before saving.

Customize the Review Widget with built-in settings

1. Widget border

Available on the Awesome plan.

To add a border around your Review Widget:

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

  2. Find the Review Widget card, click Customize.

  3. Open the Theme section.

  4. Check the box next to "Add a border around the widget".

  5. Then under Border Style, choose between these border styles:

    • "Square corners"

    • "Round corners"

  6. Click Save.

2. Widget colors

Basic color customizations

Available on the Free plan

To change the color of the star icons in the Review Widget:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Colors section.

  4. In the Star color field, use the color picker or enter a hex code to select your preferred color.

  5. Click Save.

Advanced color customizations

Available on the Awesome plan

To customize the colors of the rating distribution filter, the pagination numbers, and the Write a review button in the Review Widget:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Colors section.

  4. In each of the color fields below, use the color picker or enter a hex code to select your preferred colors.

    • "Review filter color" field: to change the color of the rating distribution filter

    • "Pagination color" field: to change the color of the pagination numbers

    • '"Write a review" text color' field: to change the color of the text displayed on the "Write a review" button

    • '"Write a review" background color' field: to change the color of the background of the "Write a review" button

  5. Click Save.

3. Media grid

Available on the Free plan

The media grid is a horizontal section displayed at the top of the Review Widget, showcasing customer-uploaded photos and videos.

To enable the media grid in your Review Widget:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Photos and Videos section.

  4. Check the box next to "Show recent photos and videos in a grid".

  5. Click Save.

Note:

Currently, it’s not possible to select which images appear in the Media Grid. The grid automatically displays all images and videos from your published reviews.

4. Search bar

Available on the Awesome plan

To allow customers to search for reviews in the Review Widget:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Search and pagination section.

  4. Check the box next to "Show review search bar".

  5. Click Save.

Note:

The search bar in the Review Widget only searches reviews for the product currently being viewed. It doesn't return results from reviews grouped across other products.

5. Keyword search

Available on the Awesome plan

Let your customers search reviews more easily by highlighting the most common keywords found in published reviews.

How keyword search works:

  • When a product has more than 10 verified reviews, we’ll automatically generate a list of the most commonly used words and phrases from published reviews.

    • Only reviews collected directly through Judge.me are included.

    • Imported reviews and reviews synced via product groups or cross-shop sync are not used for keyword generation.

  • Up to 10 keywords will appear as clickable buttons at the top of the Review Widget.

    • Each button also shows the number of reviews that contain that keyword.

    • For example: letters (3), quality (5)

  • When a customer clicks a keyword, the widget filters the review list to show only reviews that include that term.

  • Matching keywords are also highlighted in the review text for better visibility.

To enable keyword search in the Review Widget:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Search and pagination section.

  4. Check the box next to "Enable keyword search".

  5. Click Save.

6. Rating filter

Available on the Awesome plan

By default, we display the rating filter at the top of the Review Widget. This section—also known as the rating breakdown, star distribution, or rating summary bars—shows how many reviews each star rating has received (e.g. 5 stars, 4 stars, etc.).

It also allows customers to filter the reviews by star rating with a single click.

To disable the rating filter:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Search and pagination section.

  4. Uncheck the box next to "Show the widget rating filter".

  5. Click Save.

7. Sorting method

Available on the Awesome plan.

By default, the Review Widget shows the latest reviews first.

You can change the default sorting method to better match your store’s goals—for example, showing the most helpful reviews or those with photos first.

To set your default sorting method:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Search and pagination section.

  4. In the Default sorting method dropdown, choose your preferred sorting option:

    • "Most Recent" - Shows the newest reviews first

    • "Highest Rating" - Shows reviews with the highest ratings first

    • "Lowest Rating" - Shows reviews with the lowest ratings first

    • "Only Pictures" - Shows only reviews that include at least 1 image

    • "Pictures First" - Shows reviews with images first, followed by text-only reviews

    • "Videos First" - Shows reviews with videos first

    • "Most Helpful" - Shows reviews with the most thumbs-up (likes) from customers first

  5. Click Save.

Note:

This setting will also apply to the All Reviews Page and Floating Reviews Tab.

8. Pagination type

Available on the Awesome plan

By default, the Review Widget displays 5 reviews per page using pagination. This means customers can navigate through multiple pages of reviews using numbered links at the bottom of the widget.

You can customize both the pagination style and the number of reviews shown per page to better suit your store’s layout and browsing experience.

To adjust the pagination settings:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Search and pagination section.

  4. Under Configure the pagination of reviews and questions, choose one of the following options:

    • Use "Load more" button to show more reviews

    • Use pagination

  5. In the Number of reviews per page field, enter a value between 1 and 10 (Values outside this range will show an error "Number of reviews is invalid").

  6. Click Save.

9. Reviewer avatar

Available on the Awesome plan

To remove the profile icon (customer avatar) in the reviews:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Review card details section.

  4. Uncheck the box next to "Show avatar icon"

  5. Click Save.

10. Reviewer location

Available on the Awesome plan

To showcase the country of your reviewers:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down to the Review card details section.

  4. Enable "Show reviewer location" and/or "Show reviewer country flag".

  5. Click Save.

Note:

Location is not available for reviews imported from AliExpress.

11. "Read more" link

Available on the Awesome plan

By default, the Review Widget displays the full content of each review, no matter how long it is.

To adjust how much of each review is shown:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down to the Review card details section.

  4. Under Review Length, choose one of the following options:

    • "Show the full review" (default)

    • "Limit the number of lines shown" – then enter the number of lines to show (1-10). A Read more link will be added to longer reviews so customers can expand the full text.

  5. Click Save.

12. Upvote / Downvote

Available on the Awesome plan

To let customers react to the reviews with a thumbs up or thumbs down:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down to the Review card details section.

  4. Under Review engagement, enable "Show review upvotes / downvotes buttons".

  5. Click Save.

Note:

Once a customer gives a thumbs up or thumbs down on a review, their votes can't be changed.

13. Social sharing buttons

Available on the Free plan

To let customers share the reviews to their social media:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Review card details section.

  4. For Review engagement, check the box next to "Show social media share buttons".

  5. For Social share option, check the boxes next to the social media platforms you want to enable sharing:

    • Facebook

    • Twitter

    • Pinterest

    • LinkedIn

  6. Click Save.

14. Product link

Available on the Awesome plan

When you enable Product Groups, the Review Widget displays reviews from all products in the same group. For reviews originally written for a different product, you can add a small link that takes customers back to the exact product where the review came from.

This helps maintain transparency and lets customers see the context of each review.

To add the link to original product for each grouped review:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Text section.

  4. Scroll down and check the box next to "Include a link to the original product when Product Groups is enabled".

  5. Click Save.

15. Hide the Review Widget when there's no review

By default, the Review Widget will show even if the product has no reviews. To hide the Review Widget on products without reviews, enable Web reviews restriction.

Customizing the texts of the Review Widget

To customize the texts of your Review Widget:

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

  2. Find the Review Widget card, click Customize.

  3. Scroll down and open the Text section.

  4. Under each section below, adjust the texts to your liking and click Save.

1. Review list

Available on the Awesome plan

Field

Default texts

Widget title

Customer Reviews

Average rating text

{{ average_rating }} out of 5

Write button text

Write a review

Cancel button text

Cancel review

Refresh button text

Refresh page

2. Text header

Available on the Free plan

Field

Default texts

Header (with reviews) label

Based on {{ number_of_reviews }} review/reviews

Header (no reviews) label

Be the first one to review this product

3. Media grid

Available on the Free plan

Field

Default texts

Grid title

Customer photos & videos

See more button

See more

4. Source of review

Available on the Free plan

Field

Default texts

Source of review label

collected by Judge.me

5. Search bar

Available on the Awesome plan.

Field

Default texts

Search bar placeholder text

Search reviews

6. Default sorting method

Available on the Awesome plan

Field

Default texts

See all reviews text

See all reviews

Most recent text

Most Recent

Highest rating text

Highest Rating

Lowest rating text

Lowest Rating

Only pictures text

Only Pictures

Pictures first text

Pictures First

Videos first text

Videos First

Most helpful text

Most Helpful

7. Review details

Available on the Awesome plan

Field

Default texts

Verified badge label

Verified

Store reply label

(applied to the beginning of the store's reply/answer in the Review Widget and the Q&A widget)

>> {{ shop_name }} replied:

Store name label

{{ shop_name }}

Text before the product link

(applied to the Product Groups and Reviews Page)

about

Customize the Review Widget with CSS

Add custom CSS in Judge.me

Available on the Awesome plan

To add custom CSS in Judge.me 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 find and open the Advanced section at the bottom.

  4. Add your CSS in the Custom CSS (Advanced) editor.

  5. Click Save.

Please note that:

  • The Custom CSS editor is limited to 500 characters.

  • All custom CSS added here is automatically wrapped in Review Widget-specific class (.jdgm-review-widget) to prevent global pollution.

Example CSS you can add in Judge.me to hide elements in the Review Widget:

What you want to change

CSS code you can add in Judge.me

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 hide the downvote icon from all reviews in the Review Widget

.jdgm-rev_thump-down-count, .jdgm-rev_thumb-down {
    display: none;
}

Example CSS you can add in Judge.me to customize elements in the Review Widget:

What you want to change

CSS code you can add in Judge.me

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 background 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 for the Review Widget:

  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 your CSS code.

  5. Click Save.

Example CSS you can add in Shopify theme editor to customize elements in the Review Widget:

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

Resources

  1. Get your free trial:

    🎨 Want more control over your review displays? Start your free 15-day trial of the Awesome plan and access all display widgets with unlimited customization.

  2. Follow us on LinkedIn:

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

Related Articles
Star Rating Badge
Customizing the Reviews Carousel
Floating Reviews Tab
All Reviews Counter
Customizing the Review Widget (beta version)
Did this answer your question?