Customizing the widget
Last updated: April 17, 2026
The review widget inherits your theme’s fonts and exposes a comprehensive set of colour and visibility controls via the Widget Editor in the BetterReviews admin.
What inherits from your theme automatically
- Body font family — same font as your product description (unless you override it)
What’s deliberately not inherited
The widget uses a fixed internal spacing scale — hardcoded to a 16px rem base with its own scale variable, not your theme’s root font size. This is intentional: some themes set html { font-size: 10px } which would shrink everything on the widget to an unusable size. By holding our own scale steady, the widget stays legible regardless of what your theme does.
The widget editor
Open Display → Widget editor in the BetterReviews admin.
Screenshot of the Widget Editor — manual capture, drop in here.
You can customise:
Colour mode
- Auto (default), Light, Dark — forces the widget into the chosen mode regardless of theme context
Colours (granular palette)
- Accent — Write a Review button background, primary accent
- Star fill — star colour (separate from accent; can be independently set)
- Widget background, Text, Border, Card background
- Verified badge, Merchant-reply background, Muted background, Muted text
Typography
- Corner style — Sharp / Slightly rounded / Rounded / Extra rounded
- Font scale — slider from 0.8× to 1.3×
Sections and visibility
- Photo gallery — show / hide the 6-thumb gallery grid
- Photo thumbnails on review cards — independent setting from the gallery; hides photos inline on individual review cards
- Customer Pulse — the “mentioned most” tag pills section
- Rating distribution bars
- Value driver pills
- Verified badge on review cards
- Helpful / Not helpful vote buttons
- Merchant replies
- Sticky toolbar — filter bar sticks to top while scrolling
Default sort and enabled sorts
Pick the default sort (shown first) and tick which sort options appear in the dropdown: Most Relevant, Most Helpful, Newest, Highest Rated, Lowest Rated, Most Detailed, Featured, Most Informative, Critical First, Best Media, Marketing Potential.
Empty state
- Empty-state title — what shows when no reviews exist
- Empty-state CTA text — the “Be the first!” button copy
Custom CSS
Drop in arbitrary CSS for power-user overrides.
Sticky offset
If your theme has a fixed header, set a pixel offset so the sticky toolbar sits below it.
Previewing changes
The editor includes a live preview that updates as you change values. Same idea as the conversation editor preview. Your changes don’t apply to the live widget until you click Save.
Screenshot of the Widget Editor preview pane — manual capture, drop in here.
Photo display: marketing-ready only
Settings → Branding → Widget photos has a toggle: Only feature marketing-ready photos.
When ON, the storefront widget hides customer photos that BetterReviews has flagged as not marketing-grade — typically too dark, blurry, or where the product isn’t visible. The remaining photos are shown normally. Imported reviews from Loox, Judge.me, and Okendo always show their photos regardless — those platforms don’t share photos with us in a way we can analyze.
When OFF (the default), all non-hidden customer photos appear on the widget exactly as before.
Changes propagate to your storefront within ~10 minutes — we re-bake the cached metafields on every product after you save.
Screenshot of the toggle in Settings → Branding — manual capture, drop in here.
Settings apply store-wide
Widget settings apply to every product page. There’s no per-product customization today. If you need different widget styles on different products, let us know what the use case is.
Translating widget copy
The theme extension ships with a default English locale at locales/en.default.json. Shopify’s storefront localization picks up locales/<lang>.json files alongside it — drop in a translated copy and the widget renders the new strings on storefronts in that locale.
Group-aware copy keys (only render when the product is in a review group):
| Key | Default copy |
|---|---|
based_on_group_reviews | Based on {{ count }} reviews across {{ product_count }} product variants |
based_on_group_reviews_named | Based on {{ count }} reviews across {{ product_count }} product variants in the {{ name }} collection |
reviewed_product | Reviewed: {{ product }} |
based_on_group_reviews_named fires when the merchant has set a display_name on the group; based_on_group_reviews is the fallback. reviewed_product is rendered as a small “Reviewed: other variant name” badge on each review row whose source product differs from the PDP being viewed.
What isn’t customizable
A few things stay consistent across all stores:
- The overall structure — metrics row, pulse, gallery, review list, Write a Review button. Order and general layout aren’t swappable.
- “Write a Review” CTA wording — tuned for conversion and not exposed.
- Star-rating precision — half-stars render automatically based on the average rating.
- Spacing scale — intentionally fixed to prevent theme overrides from breaking the widget.