Review Widget (legacy version)
CSS reference
You can use the following CSS classes to customize the appearance of the Review Widget. Each class corresponds to a specific visual element that you can target with your own stylesheet.
1. Main container and layout
CSS class / selector | What it controls in the Review Widget |
| Outer container for the Review Widget |
| Main widget wrapper around all Review Widget content |
| State class added once the widget has finished loading |
| Inner wrapper for the legacy Review Widget layout |
| Core Review Widget box (header, body, footer, etc.) |
| Temporary inline |
2. Header: title, summary, histogram, actions
Title and summary
CSS class / selector | What it controls in the Review Widget |
| Header strip at the top of the Review Widget |
| "Customer Reviews" title text |
| Row that contains the rating summary + histogram + "Write a review" button |
| Wrapper around the rating summary block |
| Inner layout for average rating and summary text |
| Row with large average rating stars and "X out of 5" text |
| Individual star icon (used everywhere: summary, reviews, forms) |
| Filled/active star state |
| Empty/inactive star state |
| Half-filled star state |
| "4.64 out of 5" text next to the average stars |
| "Based on X reviews" text underneath the average stars |
Histogram
CSS class / selector | What it controls in the Review Widget |
| Rating breakdown / histogram block |
| Single histogram row for a specific star rating |
| Clickable row of stars used to filter by rating |
| Background track for the histogram bar |
| Filled portion showing percentage width |
| Count of reviews for that rating (e.g. 20) |
| "See all reviews" link to clear rating filters |
Header actions
CSS class / selector | What it controls in the Review Widget |
| Container for header-level widget actions |
| The "Write a review" button |
3. Forms (inline + dynamic)
Inline “Write a review” form
CSS class / selector | What it controls in the Review Widget |
| Container for the inline "Write a review" form |
| Base form element (used by both inline and dynamic forms) |
| "Write a review" form title |
| Wrapper for each form field (label + input/textarea/etc.) |
| Inline label above inputs (e.g. "Review Title", "Review content") |
| Character countdown region next to title/content fields |
| Star rating selector inside the inline form |
| Container for the media upload field |
| Media upload box |
| Specific upload input area inside the box |
| Inner wrapper inside the media upload box |
| Icon displayed inside the media upload box |
| File input for pictures/videos |
| Container for custom form fields in the inline form |
| Wrapper around "displayed publicly like" name format controls |
| Wrapper around any dropdown (name format, sort) |
|
|
| Arrow icon beside dropdown selectors |
| Fieldset for the email address field |
| Bottom row containing Cancel / Submit buttons |
| Base button style |
| Secondary/outlined button style (e.g. Cancel) |
| Primary/solid button style (e.g. Submit) |
| "Cancel review" button in the inline form |
| "Submit review" button in the inline form |
Dynamic / multi-step form
CSS class / selector | What it controls in the Review Widget |
| Container for the dynamic, multi-step review form |
| Base form element for the dynamic flow |
| Close icon/button for the dynamic form |
| Single step/slide in the dynamic form |
| Step for picture/video upload |
| Inner wrapper inside each step |
| Row containing Back/Next buttons for a step |
| "Back" button for dynamic steps |
| "Next" button for dynamic steps |
| Star rating selector in the dynamic flow |
| Email field block in the dynamic flow |
| Final slide containing title + content fields |
| Custom form fields container in the dynamic flow |
| "Submit" button for the dynamic form |
4. Medals, media row, gallery, search
Medals
CSS class / selector | What it controls in the Review Widget |
| Row beneath the form for medals or gallery content |
| Wrapper around the medals block |
| Medals component container |
| Inner layout wrapper for one or more medals |
| Wrapper around a single medal |
| Clickable medal element |
| Medal image container |
| Medal value text (e.g. "100.0") |
Gallery
CSS class / selector | What it controls in the Review Widget |
| Wrapper for "Customer photos & videos" section |
| "Customer photos & videos" heading text |
| Main customer media gallery container |
| Clickable thumbnail link for a gallery image |
| Inner wrapper around each gallery thumbnail |
| Gallery thumbnail image itself |
Search
CSS class / selector | What it controls in the Review Widget |
| Row containing the review search field |
| Wrapper around the search input |
| Search input for filtering reviews by text |
5. Custom forms filters (above the reviews)
CSS class / selector | What it controls in the Review Widget |
| Container for custom form filters above the reviews |
| Single custom-form answer block within filters |
| Question label text inside a filter block (e.g. “test:”) |
| Wrapper around chip-style filter options for a question |
| Individual chip option used as a filter |
| Generic chip-style pill used for options and filter buttons |
| "Filters" button that opens/closes custom form filters |
6. Reviews list, content, transparency badges, actions
Review container + header
CSS class / selector | What it controls in the Review Widget |
| Main body of the widget containing reviews and pagination |
| Container for the list of individual reviews |
| Single review card including header, content, and actions |
| Top border/divider above each review |
| State class on each review indicating it has finished rendering |
| Top section of the review (product info, rating, author, date, location) |
| Area reserved for product info in the review header |
| Row that shows the star rating and date |
| Star rating row for an individual review |
| Review date text (e.g. "10/30/2024") |
| Row containing reviewer icon + name + buyer badge |
| Reviewer avatar/icon placeholder |
| Wrapper around reviewer name and badges |
| Reviewer display name (e.g. "Anonymous") |
| Wrapper around the “Verified buyer” badge |
| Buyer badge element itself (no text in HTML, styled as icon/label) |
| Row for additional information such as location and flag |
| Reviewer location text |
| Country flag image next to the location |
| Line-break / separator between header and content |
Review content & custom forms within reviews
CSS class / selector | What it controls in the Review Widget |
| Main content area of the review |
| Review title text (in |
| Review body text ( |
| Container for custom form answers within a review |
| Layout modifier for rendering custom form answers horizontally |
| Wrapper for a specific type of custom form answer (text/graphic) |
| Wrapper for text-style custom form answers |
| Wrapper for graphic-style custom form answers inside a review |
| Value text of a custom form answer (e.g. "1") |
Review media inside reviews
CSS class / selector | What it controls in the Review Widget |
| Container for pictures attached to a review |
| Link around a review image (often opens in a lightbox) |
| Review image thumbnail inside the review content |
Transparency badges
CSS class / selector | What it controls in the Review Widget |
| Container for transparency badge(s) under the review |
| Transparency badge element (e.g. “Review collected from another provider”) |
Review actions: social + votes
CSS class / selector | What it controls in the Review Widget |
| Bottom row of the review (sharing + helpful votes) |
| Container for social sharing buttons |
| Inner wrapper around social share icons |
| Base class for a share button |
| Facebook share button icon |
| Twitter share button icon |
| Pinterest share button icon |
| LinkedIn share button icon |
| Container for “helpful/not helpful” vote controls |
| Inner wrapper around thumb icons + counts |
| Base class for thumb vote buttons |
| "Thumbs up" (helpful) vote button |
| "Thumbs down" (not helpful) vote button |
| Base class for thumb vote counts |
| Helpful vote count |
| Not-helpful vote count |
7. Pagination and authenticity link
CSS class / selector | What it controls in the Review Widget |
| Pagination container under the reviews list |
| Individual page button (number or arrow) |
| Current/active page button |
| "Next page" button |
| "Last page" button |
| Wrapper for the authenticity link below the reviews |
| Styled link (e.g. "How reviews are collected?") |
| Wrapper around the loading spinner for pagination |
| Spinner shown while more reviews are loading |
Star Rating Badge
HTML structure
Example HTML structure of how the Star Rating Badge is loaded on the product page:
<div class="jdgm-widget jdgm-preview-badge jdgm-preview-badge--with-link jdgm--done-setup" data-id="8031779455283" data-template="manual-installation" data-widget-name="preview_badge" data-impressions-tracked="true" data-views-tracked="true">
<div style="display:none" class="jdgm-prev-badge" data-average-rating="5.00" data-number-of-reviews="3" data-number-of-questions="0">
<span class="jdgm-prev-badge__stars" data-score="5.00" tabindex="0" aria-label="5.00 stars" role="button">
<span class="jdgm-star jdgm--on"></span>
<span class="jdgm-star jdgm--on"></span>
<span class="jdgm-star jdgm--on"></span>
<span class="jdgm-star jdgm--on"></span>
<span class="jdgm-star jdgm--on"></span>
</span>
<span class="jdgm-prev-badge__text">3 reviews</span>
</div>
</div>
CSS reference
You can use the following CSS classes to customize the appearance of the Star Rating Badge. Each class corresponds to a specific visual element that you can target with your own stylesheet.
CSS class / selector | What it controls in the Star Rating Badge |
| Main container for the Star Rating Badge |
| Automatically added when the Star Rating Badge is displayed as a link |
| Inner wrapper that holds the stars + text |
| Wrapper for the row of star icons |
| Individual star icon inside the badge |
| "Filled"/active star state |
| "Empty"/inactive star state |
| Star rating text |
Reviews Carousel
CSS reference
You can use the following CSS classes to customize the appearance of the Reviews Carousel. Each class corresponds to a specific visual element that you can target with your own stylesheet.
1. Wrapper, title, and overall rating
CSS class / selector | What it controls in the Reviews Carousel |
| Outer wrapper around the entire Reviews Carousel block. Controls overall width and positioning on the page |
| Container holding the carousel title and overall store rating summary |
| Heading text at the top of the carousel (e.g. "Let customers speak for us") |
| Wrapper around the overall rating stars and "from X reviews" text |
| Overall store rating stars (e.g. 4.57 stars) shown above the carousel |
| "from 465 reviews" text next to/under the overall rating |
| Main widget container for the carousel itself |
| Theme modifier applied automatically for the default carousel style (state/theme indicator, not meant to be added manually) |
| State class added automatically once the carousel is fully initialized (used internally; not meant to be toggled by CSS) |
2. Carousel track and items
CSS class / selector | What it controls in the Reviews Carousel |
| Viewport area that holds the moving row of review cards |
| Inner wrapper that slides horizontally to show different reviews |
| Single review card inside the carousel |
| Modifier indicating this item is a shop review rather than a product review (applied automatically) |
3. Review content inside each carousel card
CSS class / selector | What it controls in the Reviews Carousel |
| Main box containing stars + title + body of the review |
| Row of star icons for the review rating inside the card |
| Individual star icon (used here and across Judge.me widgets) |
| Filled/active star state |
| Half-filled star state for partial ratings |
| Wrapper around the review title and body text within the card |
| Review title text in the carousel card |
| Review body text snippet in the carousel card |
| Utility class used to limit the number of visible text lines and show ellipsis when text overflows |
4. Reviewer name and date
CSS class / selector | What it controls in the Reviews Carousel |
| Row under the review content that holds the reviewer name and date |
| Reviewer name |
| Review date |
| Utility class that truncates overflowing text with an ellipsis (used for long names, dates, or product titles) |
5. Linked product area (image + title)
CSS class / selector | What it controls in the Reviews Carousel |
| Clickable area at the bottom of the card linking to the product page. Contains product image and/or title |
| Modifier added automatically when the review card includes a product image |
| Product thumbnail image shown in the carousel card |
| Product title text under/next to the product image |
6. Carousel arrows (navigation)
CSS class / selector | What it controls in the Reviews Carousel |
| Container that holds the left and right navigation arrows for the carousel |
| Left arrow icon/button used to scroll to previous items |
| Right arrow icon/button used to scroll to next items |
7. AI-generated review summary section (below the carousel)
CSS class / selector | What it controls in the Reviews Carousel |
| Wrapper for the AI-generated store review summary section below the carousel. |
| Header text (e.g. “What customers think about the store”). |
|
|
| Shortened version of the summary (used when collapsed). |
| Full version of the summary (used when expanded). |
| “Read more” / toggle link used to switch between short and full summary. |
| Line under the text that explains how the summary was created (e.g. “AI-generated from customer reviews.” with icon). |
8. AI summary keywords / tags
CSS class / selector | What it controls in the Reviews Carousel |
| Container for the list of keyword chips under the summary |
| Single keyword chip (e.g. “Coffee”, “Delivery”, “Machine”, “Quality”) |
| Sentiment modifier for positive keywords (used for color/icon variations) |
| Wrapper around the positive sentiment icon (affects icon styling next to the keyword) |