Skip to main content

Customizing the Review Widget (new version)

Updated today

This feature is currently in beta testing

The new Review Widget gives you finer control over how reviews appear on your product pages. Configure the header, review content layout, color palette, pagination, and more—all from a single screen. These options help you present social proof clearly, reinforce your brand, and improve conversion.


Customize the header of the Review Widget

1. Title

To customize the title of the Review Widget:

  1. Go to the Review Widget header settings:

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

    • Find the Review Widget card, click Customize.

    • In the Widget header section, open the Customize collapsible menu.

  2. There, under Title:

    • To display a title (for example, "Customer Reviews") at the top of the Review Widget, check the box next to "Show widget title".

    • In the Header text size dropdown, to adjust the size of the Review Widget title, choose between these options:

      • "Small"

      • "Medium"

      • "Large" .

    • In the Header text weight dropdown, to control how thick or bold the Review Widget title appears, choose between these options:

      • "Regular"

      • "Bold"

  3. Click Save.

2. Average rating

To customize the average rating below the Review Widget title:

  1. Go to the Review Widget header settings:

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

    • Find the Review Widget card, click Customize.

    • In the Widget header section, open the Customize collapsible menu.

  2. There, under Average rating, in the Average rating style dropdown, choose how the average rating appears under your widget title:

    • "Minimal":

      • Shows the star icons, average rating, and review count.

      • Example: ★★★★★ 5.0 (3 Reviews)

    • "Compact":

      • Shows the average rating and review count.

      • Example: 5.0 3 Reviews

    • "Bold":

      • Shows the star icon and the average rating in bold, and review count.

      • Example: ★ 5.0 3 Reviews

    • "Extra bold":

      • Shows the star icon and the average rating in extra-large font size, and review count.

      • Example: 5.0 3 Reviews

    • "Stars only":

      • Shows the star icons in large font size, and the average rating and review count.

      • Example: 5.0 3 Reviews

  3. Click Save.

3. Bar chart

By default, we display the rating filter in the header 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 customize the rating filter in the Review Widget:

  1. Go to the Review Widget header settings:

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

    • Find the Review Widget card, click Customize.

    • In the Widget header section, open the Customize collapsible menu.

  2. There, under Bar chart:

    • To show the rating filter in the Review Widget, check the box next to "Show bar chart".

    • In the Bar chart type dropdown, choose how the rating filter is displayed:

      • "Numbers": Shows each rating level (1–5) with the rating number next to a single star icon, a progress bar, and the number of reviews.

      • "Stars": Shows each rating level (1–5) as full star rows, progress bar, and the number of reviews.

    • In the Bar chart style dropdown, choose how the progress bars in the rating filter are displayed:

      • "Standard": Shows regular, thin progress bars for each rating level.

      • "Bold": Shows thicker progress bars for a more prominent visual effect.

  3. Click Save.

4. Media gallery

Available on the Free plan

The media gallery is a section displayed in the middle of the Review Widget header, showcasing customer-uploaded photos and videos.

To enable the media gallery in your Review Widget:

  1. Go to the Review Widget header settings:

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

    • Find the Review Widget card, click Customize.

    • In the Widget header section, open the Customize collapsible menu.

  2. Scroll down to find and check the box next to "Show media gallery".

  3. Click Save.

Note:

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

5. Search bar

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

  1. Go to the Review Widget header settings:

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

    • Find the Review Widget card, click Customize.

    • In the Widget header section, open the Customize collapsible menu.

  2. Scroll down to find and check the box next to "Show search bar".

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

6. 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. Go to the Review Widget header settings:

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

    • Find the Review Widget card, click Customize.

    • In the Widget header section, open the Customize collapsible menu.

  2. Scroll down to find and check the box next to "Show review keywords".

  3. Click Save.

7. Judge.me trust marks

Available on the Free plan

When your store qualifies, we will automatically display product-specific medals in the Review Widget, including transparency and authenticity badge,... These medals highlight products with strong performance based on verified reviews and other trust signals.

To disable all medals in the Review Widget:

  1. Go to the Review Widget header settings:

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

    • Find the Review Widget card, click Customize.

    • In the Widget header section, open the Customize collapsible menu.

  2. Scroll down to find Judge.me trust marks and uncheck the box next to "Show product medals".

  3. Click Save.


Customize the reviews section in the Review Widget

1. Review images

To customize the style of the review images in the Review Widget:

  1. Go to the Review Widget review section settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down to the Reviews section section.

    • Open the Customize collapsible menu.

  2. There, in the Image style dropdown, choose how the review images appear:

    • "Thumbnails": Shows all images of each review in a small grid under that review.

    • "Highlight": Shows one main image, with an overlay (e.g., “+2”) if there are more images in the review.

  3. If you choose "Highlight" as the image style, you can also set the image ratio:

    • In the Review image ratio dropdown, choose from these aspect ratios:

      • "Square"

      • "3:4": portrait

      • "4:3": landscape

  4. Click Save.

2. Stars size

To set the size of the stars of each reviews in the Review Widget:

  1. Go to the Review Widget review section settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down to the Reviews section section.

    • Open the Customize collapsible menu.

  2. There, in the Stars size dropdown, choose from these options:

    • "Small"

    • "Medium"

    • "Large"

  3. Click Save.

3. Verified badge style

To adjust the style of the verified badge in the Review Widget:

  1. Go to the Review Widget review section settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down to the Reviews section section.

    • Open the Customize collapsible menu.

  2. There, in the Verified badge dropdown, choose from these options:

    • "Bold badge": Shows a filled verified badge icon.

    • "Standard badge": Shows an outlined verified badge icon.

    • "Bold text": Shows the word "Verified" inside a filled badge.

    • "Standard text": Shows the word "Verified" inside an outlined badge.

  3. Click Save.

4. Review text size and length

To set the size and length of the review text in the Review Widget:

  1. Go to the Review Widget review section settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down to the Reviews section section.

    • Open the Customize collapsible menu.

  2. There, in the Review title text size dropdown, choose a font size for the review title:

    • "Small"

    • "Medium"

    • "Large

  3. In the Review text size dropdown, choose a font size for the review content:

    • "Small"

    • "Medium"

    • "Large

  4. In the Review text length dropdown, choose how much review text to show:

    • "Short"

    • "Medium"

    • "Long".

  5. Click Save.

5. Content display

To set the size and length of the review text in the Review Widget:

  1. Go to the Review Widget review section settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down to the Reviews section section.

    • Open the Customize collapsible menu.

  2. There, under Content display, to control which details are shown in each review, check or uncheck the boxes next to the following :

    • "Show reviewer avatar": Shows the reviewer’s profile icon.

    • "Show reviewer location": Shows the reviewer’s city and region (if available).

    • "Show reviewer country flag":

      • Shows the reviewer’s country flag next to their name

      • Location is not available for reviews imported from AliExpress.

    • "Show review thumbs up and down": Shows the “Helpful?" label text and thumbs-up and thumbs-down icons in each the review.

    • "Show social share buttons":

      • Shows the sharing icons for each review.

      • You can click "Click to update selection" link under this option and check the box of the platforms to include:

        • "Facebook"

        • "X"

        • "Pinterest"

        • "LinkedIn"

  3. Click Save.


Customize the colors and styling of the Review Widget

1. Color palette

Available on the Free plan

To customize the color palette of the Review Widget:

  1. Go to the Review Widget color and styling settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down and open the Color and styling collapsible section.

  2. There, under Color palette, you can adjust the colors for the following elements:

    • Star and bar chart color: Sets the color of the review stars and rating filter.

    • Button color: Sets the background color of buttons (e.g. the Write a review button).

    • Button text color: Sets the color of the text inside buttons (e.g. the Write a review button).

    • Text color: Sets the color of regular text (e.g. the reviewer name and review content).

    • Lighter text color: Sets the color of secondary or less prominent text including:

      • The review count in the rating filter

      • The review date

      • The "Helpful?" label text and the thumbs-up and thumbs-down icons

      • The social share icons

  3. Click Save.

2. Corner styling

To customize the corner stylings of the Review Widget:

  1. Go to the Review Widget color and styling settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down and open the Color and styling collapsible section.

  2. There, in the Corner styling dropdown, choose how rounded the corners of the buttons in your Review Widget appear:

    • "Square": Shows sharp, right-angled corners.

    • "Soft": Shows slightly rounded corners.

    • "Rounded": Shows moderately rounded corners.

    • "Extra round": Shows fully rounded corners for a softer look.

  3. Click Save.


Customize the display of the Review Widget

1. Sorting method

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. Go to the Review Widget display preferences settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down and open the Display preferences collapsible section.

  2. There, 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

  3. Click Save.

2. Pagination

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

  1. Go to the Review Widget display preferences settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down and open the Display preferences collapsible section.

  2. There, in the Reviews per page field, enter a number between 1 and 10 to set how many reviews are shown per page. Values outside this range will show a "Number of reviews is invalid" error.

  3. In the Pagination type dropdown, choose how customers can browse through reviews:

    • "Load more button": Shows a button at the bottom of the widget that loads more reviews when clicked.

    • "Page number": Shows numbered pages customers can click to view more reviews.

  4. Click Save.


Customize the texts in the Review Widget

To customize the texts in the Review Widget:

  1. Go to the Review Widget text settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down and open the Text collapsible section.

    • In the Widget title field: adjust the default "Customer Reviews" text.

    • In the Review word (singular) field: adjust the default "Review" text.

  2. Available on the Awesome plan:

    • In the Reply author name field: sets the name displayed when the store replies to a review.

    • In the No reviews text field: adjust the default "Be the first to write a review" text.

  3. Click Save.


Customize the Review Widget with CSS

To add custom CSS for the Review Widget in Judge.me:

  1. Go to the Review Widget advanced settings:

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

    • Find the Review Widget card, click Customize.

    • Scroll down and open the Advanced collapsible section at the bottom.

  2. In the Custom CSS (Advanced) editor, add the CSS code you want to use. The Custom CSS editor is limited to 1000 characters and only accepts CSS that begins with .jdgm-rev, .jdgm-rev-widg, or #judgeme_product_reviews.

  3. Click Save.

Did this answer your question?