Matching your store's colors and fonts

Last updated: May 9, 2026

The chat works best when it feels like part of your store, not a separate overlay. This page covers how to dial in the colors, font, and layout so it blends in.

Starting from your Shopify theme

When you install BetterReviews, we automatically read the colors from your live Shopify theme settings — primary, secondary, text, background — and pre-fill the chat editor with them. Open the Conversation Editor and the palette is already there; you can adjust from any of the fields directly.

Screenshot of the Conversation Editor color section with “Match my store” button — manual capture, drop in here.

If you switch themes or rework your store’s colors later, click Match my store to re-pull the palette and overwrite what’s currently set. We tell you which theme we detected and confirm before applying, so a misdetection never silently overwrites your saved colors. If your theme doesn’t expose an accent (some custom themes don’t), we say so up front and let you pick one — we won’t silently substitute body text as your accent and produce a near-black chat.

If we couldn’t read your theme at install time (theme blocks the settings file or none of the strategies match), the editor surfaces a small banner inviting you to click Match my store to retry. The hardcoded defaults stay in place until then.

Your Corner style and Font family choices also flow through to the email button — set them once in the chat editor and the review request email picks them up too. (Email button radius is capped at 12px so it renders correctly across email clients.)

You can always tweak from there. The auto-match gives you a sensible starting point; you’re not locked into whatever your theme happens to have.

The color variables

The chat exposes ten color fields:

  • Accent / Buttons — primary accent used for button backgrounds, the submit button, and the star fill when filled as you type
  • Background — the overall chat background colour
  • Text — the default text colour used outside message bubbles
  • Borders — dividers and separators between sections
  • Bot message background — the bubble colour for messages from BetterReviews
  • Bot message text — text colour inside bot bubbles
  • Your message background — the bubble colour for the customer’s messages
  • Your message text — text colour inside customer bubbles
  • Container — the inner card colour behind the message stack
  • Star rating — the fill colour for stars when the customer sets a rating

Each field is a standard color picker — paste a hex code, use the eyedropper, or pick visually.

Font

Pick one font family for the entire chat, from four options: System default, Serif (Georgia), Sans-serif, and Monospace. The chat reads best as conversational text, so legibility matters more than personality.

Screenshot of the font picker — manual capture, drop in here.

We don’t load external web fonts (like Google Fonts) — they slow down the chat and the four stacks cover nearly every brand look.

What font to choose

As a rule of thumb: if your store uses a serif body font, pick Serif. If it’s a sans-serif, pick Sans-serif. Monospace is rarely a good choice for reviews — save it for stores with a deliberate “technical” aesthetic.

Corner style

Choose between Sharp, Slightly rounded, Rounded, and Extra rounded corners. This affects message bubbles, buttons, and the chat container.

Live preview

The right side of the Conversation Editor is a live preview of the chat. Every colour or font change updates it within a second — no save, no refresh. You can see how your choices feel against actual bot and customer messages before committing.

The preview uses a dummy conversation with placeholder messages, so it looks realistic but nothing you see is from a real customer.

What isn’t configurable

A few things stay consistent across all stores:

  • Spacing and padding — tuned for mobile legibility
  • The header layout — logo-left, store name, product name. Always that order.
  • The input bar position — always fixed to the bottom

If you really need something outside the available controls, let us know — we want to hear about use cases that hit the limits.