Matching your store's colors and fonts

Last updated: April 17, 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

The fastest way to get close is the Match my store button in the Conversation Editor. We read the colors from your live Shopify theme settings — primary, secondary, text, background — and pre-fill the corresponding chat variables with them.

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

You can always tweak from there. Match-my-store 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.