Skip to main content

Customizing the Happy Customers Widget (new version)

Learn how to add the Happy Customers Widget to any page on your store to display product and store reviews, and build shopper trust.

Updated today

Available on the Awesome plan
​

Unlock the Happy Customers Widget—and all Judge.me features—with a 15-day free trial of the Awesome plan. Showcase your store's reputation, improve SEO, and turn trust into conversions.

The Happy Customers Widget lets you showcase your best reviews in one dedicated place—helping shoppers quickly understand why they can trust your store.

Unlike product-specific review widgets, Happy Customers is designed to highlight your overall store reputation. Merchants commonly use it on a standalone "Reviews" or "Happy Customers" page for SEO, but it can also be added to your homepage, product pages, or collection pages.

Considerations

  • Currently, the new version is not available for pages built with a page builder.

  • The upgrade might take around 5 minutes to finish. We'll keep showing the previous version until the new one is ready.

  • Pinning reviews is not supported at the moment.

Upgrade to the new version

To upgrade your Reviews page to the new version:

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

  2. Click the Upgrade now button.

  3. A confirmation popup will appear, click Upgrade Widget to confirm.
    ​

Once you confirm, the upgrade will start automatically.

  • Your widget will stay visible during the process, there's no downtime.

  • The upgrade usually finishes in about 5 minutes.

For vintage themes

  1. Go to Online store and click the 3 dots (...) > Edit code.

  2. Open the template file of the page where your existing widget is installed.

    • For pages previously created automatically by Judge.me, the template name is page.judgeme_reviews.liquid.

  3. Locate the existing widget code.

    • The widget code block starts with <!-- Judge.me reviews -->.

  4. Replace the old widget snippet with the new widget code provided below in the same location.
    ​

    <div id='judgeme_all_reviews_page' class="page clearfix jdgm-all-reviews-page">
      <div class="jdgm-all-reviews-page__wrapper">
        <h1 class="jdgm-all-reviews-page__title">##{{ page.title }}</h1>
        <div class='jdgm-all-reviews-page__description'>##{{ page.content }}</div>


        <!-- Start of Judge.me code -->
         {% assign has_legacy = false %}{% if shop.metafields.judgeme.all_reviews_header.size > 20 %}{% assign has_legacy = true %}{% endif %}<div class='jdgm-widget jdgm-all-reviews-widget-v2025' data-widget='all-reviews-v2025' data-auto-install='false' data-entry-point='all_reviews_widget_v2025.js' data-entry-key='all-reviews-widget-v2025/main.js'>{% if has_legacy %}<div class='jdgm-legacy-widget-content' style='display: none;'><article class='jdgm-widget jdgm-all-reviews-widget'><style class='jdgm-temp-hiding-style'>.jdgm-all-reviews-widget{ display: none }</style>##{{ shop.metafields.judgeme.all_reviews_header }}<div class='jdgm-all-reviews__body'>{% assign prefix = 'all_reviews_' %}{% for count in (0..65535) %}{% assign metafield_key = prefix | append: count %}{% assign current_metafield = shop.metafields.judgeme[metafield_key] %}{% unless current_metafield %}{% break %}{% endunless %}##{{ current_metafield }}{% endfor %}</div></article></div>{% endif %}</div>{% if shop.metafields.judgeme.all_reviews_widget_v2025_data %}<script>jdgm.data ||= {}; jdgm.data.allReviewsWidgetV2025 = ##{{ shop.metafields.judgeme.all_reviews_widget_v2025_data }};</script>{% endif %}
         <!-- End of Judge.me code -->

      </div>
    </div>

  5. Click Save.

Customizing the Happy Customers Widget with in-app settings

1. Colors

Available on the Awesome plan

To customize the colors in the Happy Customers Widget:

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

  2. Scroll down and open the Color and styling section.

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

  4. Click Save.

2. Corner styling

Available on the Awesome plan

To choose how rounded the corners of the buttons in your Happy Customers Widget appear:

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

  2. Scroll down and open the Color and styling section.

  3. Open the Corner styling dropdown.

  4. Select one of the following options:

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

  5. Click Save.

3. No reviews texts

Available on the Awesome plan

To customize the No reviews texts in the Happy Customers Widget:

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

  2. Scroll down and open the Text section.

  3. In the No reviews text field, edit the default "Be the first to write a review" texts.

  4. Click Save.

4. Header theme

Available on the Awesome plan

To choose a theme for the header of the Happy Customers Widget:

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

  2. Open the Widget header section.

  3. Open the Theme dropdown.

  4. Select one of the following header themes:

    • Default:

    • Minimal:

    • Sidebar:

  5. Click Save.

5. Widget title

Available on the Awesome plan

To hide or show the title at the top of the Happy Customers Widget:

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

  2. Open the Text section.

  3. Click the checkbox next to Show widget title.

  4. Click Save.

To change the "Customer reviews" title of the Review Widget:

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

  2. Open the Text section.

  3. In the Widget title field, edit the default "Customer reviews" texts (this setting is only available when Show widget title is enabled).

  4. Click Save.

To customize the size and font weight of the widget title:

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

  2. Open the Widget header section.

  3. To adjust the size of this title, open the Header text size dropdown and select one of the following options: Small, Medium, Large.

  4. To set how thick or bold this title appears, open the Header text weight dropdown and select one of the following options: Regular, Bold.

  5. Click Save.

6. Average rating

Available on the Awesome plan

To customize how the average rating appears below the Customer reviews title in the Happy Customers Widget:

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

  2. Open the Widget header section.

  3. Open the Average rating style dropdown.

  4. Select one of the following options:

    • 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
        ​

  5. Click Save.

7. Bar chart

Available on the Awesome plan

By default, we display the rating filter in the header of the Happy Customers Widget.

  • This section—also known as the rating breakdown, star distribution, or rating summary bars—shows the review count each star rating (e.g. 5 stars, 4 stars, etc.).

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

To show the rating filter in the Happy Customers Widget:

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

  2. Open the Widget header section.

  3. Scroll down to Bar chart.

  4. Click the check box next to Show bar chart.

  5. Click Save.

To choose how the rating filter is displayed in the Happy Customers Widget:

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

  2. Open the Widget header section.

  3. Scroll down to Bar chart.

  4. Open the Bar chart type dropdown (this setting is only available when Show bar chart is enabled).

  5. Select one of the following options:

    • 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.
      ​

  6. Click Save.

To choose how the progress bars in the rating filter are displayed in the Happy Customers Widget:

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

  2. Open the Widget header section.

  3. Scroll down to Bar chart.

  4. Open the Bar chart style dropdown (this setting is only available when Show bar chart is enabled).

  5. Select one of the following options:

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

    • Bold – Shows thicker progress bars for a more prominent visual effect.
      ​

  6. Click Save.

9. Review keywords, sentiment and highlights

Available on the Awesome plan

Help shoppers quickly understand your reviews by highlighting common themes, sentiment, and key feedback from your store reviews.

How review keywords, sentiment and highlights work:

  • Keywords are generated from up to the 500 most recent published reviews across your store, including imported reviews.

  • Unpublished reviews are not included.

  • Keywords represent common themes mentioned in reviews and include a sentiment label (positive, neutral, or negative).

  • Up to 5 keywords are displayed as clickable buttons.

  • When a customer clicks a keyword, the widget filters the review list to show related reviews.

  • Sentiment markers (👍 👎) appear next to keywords:

  • 👍 is green (positive) and 👎 is red (negative) by default

  • You can display them in light grey instead

  • Highlights help shoppers quickly understand what people love about your store.

    • Up to 3 review highlights can be generated and displayed.

      • Clicking highlights opens the full review.

  • AI-generated summaries and highlights are automatically translated based on your store's language settings.

    • Keywords are currently available in English only.

To enable review keywords, sentiment and highlights:

  1. From your Judge.me Admin, go to Settings > Widgets > Happy Customers Widget.

  2. Open the Widget header section.

  3. Scroll down to AI review insights.

  4. Enable:

    • Show review keywords and sentiment

    • Show review highlights

  5. (Optional) Enable Show sentiment markers in lighter colour to display grey icons instead of green and red.

  6. Click Save.
    ​

10. Media gallery

Available on the Awesome plan

The media gallery is a section displayed in the middle of the Happy Customers Widget header, showcasing customer-uploaded photos and videos. It is generated automatically from reviews that include media and updates as new photo or video reviews are collected.

To show the media gallery in the Happy Customers Widget:

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

  2. Open the Widget header section.

  3. Scroll down to find and click the checkbox next to Show media gallery.

  4. Click Save.

To display larger media thumbnails whenever the product has at least 3 images or videos:

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

  2. Open the Widget header section.

  3. Click the checkbox next to Show expanded media gallery (this setting is only available when Show media gallery is enabled).

  4. Click Save.

11. Search bar

Available on the Awesome plan

To allow customers to search for reviews in the Happy Customers Widget:

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

  2. Open the Widget header section.

  3. Scroll down to find and click the check box next to Show search bar.

  4. Click Save.
    ​

12. Sorting method

By default, the Happy Customers 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 for the Happy Customers Widget:

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

  2. Open the Widget header section.

  3. Scroll down to find and open the Default sorting method dropdown.

  4. Select one of the following options:

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

12. Review section theme

Available on the Awesome plan

The Review section theme controls the overall layout and visual style of reviews displayed in the Happy Customers Widget.

To choose a theme for the review section in the Happy Customers Widget:

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

  2. Scroll down and open the Review section section.

  3. Open the Theme dropdown.

  4. Select one of the following review section themes:

    • Default:

    • Cards:

    • Align:

    • Carousel:

  5. Click Save.

13. Number of reviews per page

To adjust the number of reviews per page for the Happy Customers Widget (only available for the Default, Align, and Carousel review section theme):

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

  2. Scroll down and open the Review section section.

  3. For the Default and Align theme:

    • In the Reviews per page field, enter a number between 1 and 15. Values outside this range will show a red "Number of reviews is invalid" error.

  4. For the Carousel theme:

    • Open the Reviews per page dropdown.

    • Select one of the following options: 1, 2, 3, 4.

  5. Click Save.

14. Pagination type

Available on the Awesome plan

To adjust the pagination type for the Happy Customers Widget (only available for the Default and Align section theme):

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

  2. Scroll down and open the Review section section.

  3. Open the Pagination type dropdown.

  4. Select one of the following options:

    • Load more button – Shows a Show more 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.

  5. Click Save.

15. Number of columns (desktop)

When using the Cards review section theme, the Happy Customers widget always displays 1 column on mobile devices to ensure readability.

To adjust the number of columns in desktop for the Happy Customers Widget (only available for the Cards section theme):

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

  2. Scroll down and open the Review section section.

  3. Open the Number of columns (desktop) dropdown.

  4. Select one of the following options:

    • 4 columns

    • 3 columns

    • 2 columns

    • 1 column

  5. Click Save.

16. Review section size

To adjust the review section size in desktop for the Happy Customers Widget (only available for the Cards section theme):

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

  2. Scroll down and open the Review section section.

  3. Open the Review section size dropdown.

  4. Select one of the following options: Small, Medium, Tall

  5. Click Save.

17. Transition speed

To adjust the transition speed for the Happy Customers Widget (only available for the Carousel section theme):

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

  2. Scroll down and open the Review section section.

  3. In the Transition speed field, enter a number between 0 and 60 (seconds).

  4. Click Save.

18. Review images

Available on the Awesome plan

To customize the style of the review images in the Happy Customers Widget:

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

  2. Scroll down and open the Review section section.

  3. Scroll down to Styling.

  4. Open the Image style dropdown.

  5. Select one of the following options:

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

  6. If you choose Highlight as the image style, to set the image ratio:

    • Open the Review image ratio dropdown.

    • Select one of these aspect ratios:

      • Square

      • 3:4 – portrait

      • 4:3 – landscape

  7. Click Save.

19. Verified badge style

Available on the Awesome plan

To adjust the style of the verified badge in the Happy Customers Widget:

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

  2. Scroll down and open the Review section section.

  3. Scroll down to Styling.

  4. Open the Verified badge dropdown.

  5. Select one of the following 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.

  6. Click Save.

20. Review text size and length

Available on the Awesome plan

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

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

  2. Scroll down and open the Review section section.

  3. Scroll down to Styling.

  4. To set the font size for the review title:

    • Open the Review title text size dropdown.

    • Select one of the following options: Small, Medium, Large.

  5. To set the font size for the review content:

    • Open the Review title text size dropdown.

    • Select one of the following options: Small, Medium, Large.

  6. To set how long the review text will show:

    • Open the Review text length dropdown.

    • Select one of the following options: Short, Medium, Long.

  7. Click Save.

21. Content display

Available on the Awesome plan

To select which review details to show in the Happy Customers Widget:

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

  2. Scroll down and open the Review section section.

  3. Scroll down to Content display.

  4. Click the checkboxes next to any the following options:

    • 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 social share buttons – Shows the sharing icons for each review. To select which platforms to include, click Click to update selection and click the checkboxes next to platforms you want:

      • "Facebook"

      • "X"

      • "Pinterest"

      • "LinkedIn"

    • Show product variant if available – Shows the product variant details (such as size, color, or material) if available.

  5. Click Save.

Customize the Happy Customers Widget in Shopify theme editor

Available on the Awesome plan

You can control how the Happy Customers Widget behaves on a specific page using the Shopify theme editor. To access these settings:

  1. Go to Online Store > Themes.

  2. Click Customize next to your active theme.

  3. Navigate to the page where the Happy Customers Widget is added.

  4. Click Reviews page (paid plan) in the left-sidebar (inside the Apps block).

1. Maximum width

Use Maximum width to control how wide the widget appears on the page.

  • Drag the slider or enter a value in pixels.

  • This is useful for aligning the widget with your page layout or content width.

2. Show and filter reviews by

Use Show and filter reviews by to choose which reviews are displayed:

  • All reviews – Shows both product and store reviews

  • Product reviews – Shows product reviews only

  • Store reviews – Shows store reviews only

  • Current collection – Dynamically shows reviews for products in the current collection (Available only when the widget is added to a collection page)

3. Show all reviews on the same tab

When All reviews is selected, you can choose whether reviews are grouped or separated:

  • Enable Show all reviews on the same tab to display all reviews in one list.

  • Disable it to separate Product reviews and Store reviews into tabs.

This setting applies only when All reviews is selected.

4. Show first

Use Show first to choose which tab is shown by default:

  • Product reviews

  • Store reviews

This setting applies only when tabs are enabled.

5. If no reviews show

Use If no reviews show to control what happens when there are no reviews to display:

  • Show empty widget

  • Hide widget

Customize the Happy Customers Widget with CSS

Add custom CSS in Judge.me

Available on the Awesome plan

To add custom CSS to the Happy Customers Widget:

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

  2. Click Customize.

  3. Scroll down to Advanced.

  4. Paste your CSS into Custom CSS.

  5. Click Save.

The Custom CSS editor is limited to 1000 characters.
​

Resources

  1. Get your free trial:

    📈 Unlock the Happy Customers Widget to showcase your store's reputation and build shopper trust with a 15-day free trial.

  2. See our latest updates:

    ➡️ Check our Unboxed page to discover newly launched features and improvements from Judge.me. See what's new and start using the latest updates to grow your store.

Related Articles
Customizing the Review Widget (legacy version)
Customizing the Happy Customers Widget (legacy version)
All Reviews Counter
Verified Reviews Counter
Customizing the Review Widget (new version)
Did this answer your question?