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 over a week ago

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 show the Customer reviews 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 Happy Customers 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 (Available only 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.

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

    • 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. In that section, 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. In that section, 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. In that section, 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.

8. 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. In that section, 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.

9. 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. In that section, scroll down to find and click the check box next to Show search bar.

  4. Click Save.
    ​

10. Sorting method

Available on the Awesome plan

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. In that section, 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.

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

12. Number of reviews per page

Available on the Awesome plan

To adjust the number of reviews per page for the Happy Customers Widget (This setting is 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.

13. Pagination type

Available on the Awesome plan

To adjust the pagination type for the Happy Customers Widget (This setting is 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.

14. Number of columns (desktop)

Available on the Awesome plan

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 (This setting is 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.

15. Review section size

Available on the Awesome plan

To adjust the review section size in desktop for the Happy Customers Widget (This setting is 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.

16. Transition speed

Available on the Awesome plan

To adjust the transition speed for the Happy Customers Widget (This setting is 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.

17. 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. In that section, 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.

18. Stars size

Available on the Awesome plan

To set the size of the stars of each reviews 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. In that section, scroll down to Styling.

  4. Open the Stars size dropdown.

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

  6. 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. In that section, 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. In that section, 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 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. In that section, 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"

  5. Click Save.

Customize the Happy Customers Widget in Shopify theme editor

Available on the Awesome plan

To access the settings for any specific Happy Customers Widget block in Shopify theme editor:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit and click Edit theme.

  3. At the top of the theme editor, open the template dropdown in the middle.

  4. Select the template where you added the Happy Customers Widget.

  5. On the left panel, inside Template, find the Happy Customers Widget block you added.

  6. Click the block to open its settings.

Once opened, you can customize the following settings for that specific Happy Customers Widget block:

1. Maximum width

To customize the width of the Happy Customers Widget:

  1. Go to the Happy Customers Widget settings in Shopify theme editor.

  2. Adjust Maximum width using the slider or by entering a px value (200-1200).

  3. Click Save on the top right.

2. Review type

To choose which types of reviews to show in the Happy Customers Widget:

  1. Go to the Happy Customers Widget settings in Shopify theme editor.

  2. Open the Show and filter reviews by dropdown.

  3. Select one of the following options:

    • 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 (This setting only works when the block is added to a collection page)

  4. Click Save on the top right.

3. Unified tab

Instead of separating into the Product reviews and Store reviews tab, you can show all reviews in the same tab (This setting is only available when All reviews is selected):

  1. Go to the Happy Customers Widget settings in Shopify theme editor.

  2. Open the Show and filter reviews by dropdown.

  3. Select All reviews.

  4. Enable Show all reviews on the same tab.

  5. Click Save on the top right.

4. Prioritized tab

To choose which tab is shown by default in the Happy Customers Widget (This setting is only available when All reviews is selected and Show all reviews on the same tab is disabled):

  1. Go to the Happy Customers Widget settings in Shopify theme editor.

  2. Open the Show and filter reviews by dropdown.

  3. Select All reviews.

  4. Disable Show all reviews on the same tab.

  5. Open the Show first dropdown.

  6. Select one of the following options:

    • Product reviews – shows the Product reviews tab first

    • Store reviews – shows the Store reviews tab first

  7. Click Save on the top right.

5. Products with no reviews

To control how the Happy Customers Widget shows when there are no reviews:

  1. Go to the Happy Customers Widget settings in Shopify theme editor.

  2. Open the If no reviews show dropdown.

  3. Select one of the following options:

    • Show empty widget – shows the Happy Customers Widget as empty.

    • Hide widget – hides the Happy Customers Widget entirely until there's a review.

  4. Click Save on the top right.

Customize the Happy Customers Widget with CSS

Add custom CSS in Judge.me

Available on the Awesome plan

To add custom CSS for the Happy Customers Widget:

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

  2. Scroll down and open the Advanced section at the bottom.

  3. In the Custom CSS (Advanced) editor, add the CSS code you want to use. The Custom CSS editor is limited to 1000 characters.

  4. Click Save.

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?