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.

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.

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.