Skip to main content

Advanced chat styling

The built-in appearance settings — colors, radii, shadows, dividers, spacing — cover most branding needs. For anything beyond that, there's one Custom CSS field on the Customize page in the admin app. Whatever goes in there gets injected into a <style> block on every storefront page; there's no per-page or per-block version of it.

CSS custom properties you can override​

The widget sets its own appearance through CSS custom properties on :root, and on its own containers too, so they still work inside themes that use Shadow DOM. Override any of these directly instead of fighting specificity:

Values below are examples, not required defaults.

:root {
  --user-bg-color: #2E9AB3;
  --user-text-color: #FFFFFF;
  --bot-bg-color: #FFFFFF;
  --bot-text-color: #1A1E23;
  --chat-bubble-radius: 10px;
  --input-button-radius: 10px;
  --outer-radius: 20px;
  --container-padding: 20px;
  --chat-input-spacing: 20px;
  --divider-spacing: 15px;
  --divider-thickness: 1px;
  --divider-color: rgba(0,0,0,0.1);
  --container-border-color: #2E9AB3;
  --container-border-width: 2px;
  --container-border-radius: 20px;
  --container-background-color: #FAFAFA;
  --shadow-offset-x: 8px;
  --shadow-offset-y: 8px;
  --shadow-blur: 24px;
  --shadow-opacity: 0.1;
  --profile-image-size: 40px;
  --bubble-size: 60px;
  --chat-container-width: 980px;
  --chat-container-padding: 20px;
  --chat-container-margin: 20px;
  --chat-max-height-desktop: 45vh;
  --chat-max-height-mobile: 50vh;
}

Most of these already have a matching field on the Customize page — reach for Custom CSS mainly for things the settings UI doesn't expose.

Real selectors worth knowing​

SelectorWhat it is
#main-chat-containerThe main chat panel
.AIchatbotClass on the main chat panel
[data-style-template="classic"] / .classic-stylePresent when Classic is the active style template
[data-style-template="bubbly"] / .bubbly-stylePresent when Bubbly Glow is active
[data-style-template="floaty"]Present when Floaty is active
#ai-ambient-wrapperOuter wrapper for the Floaty and Bubbly Glow ambient glow blobs
.chat-anchor-bubble-wrapperFixed-position wrapper around the floating launcher bubble
.chat-anchor-bubbleThe circular launcher bubble itself
.desktop-headingThe chat header heading
.chat-login-buttonThe guest login prompt button
.show-border / .show-shadowApplied to #main-chat-container when those settings are on

A small example — tighten the bubble's shadow and give the header a custom underline, without touching any other setting:

.chat-anchor-bubble {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.desktop-heading {
  border-bottom: 2px solid var(--user-bg-color);
}

A few things to keep in mind​

The AI's replies appear in a bubble that uses your Bot background color exactly, with a hairline border at 10% of the text color.

On phones (749px and narrower), a started conversation opens full screen and the chat panel is moved out of its theme section while it is open, so Custom CSS that assumes the chat sits inside a theme section will not apply during that time. Target the widget's own IDs and classes instead.

The floating bubble is always position: fixed, anchored bottom-left or bottom-right depending on the Bubble position setting (see Chat positioning & layout). You can restyle it with Custom CSS, but moving it off a fixed corner isn't supported and will likely break on mobile.

Custom CSS is global — one field, applied to the widget on every page and every block on the store, since it lives in the same metafield as the rest of your settings. Keep selectors scoped to the widget's own classes and IDs above, rather than broad tag selectors, so nothing leaks into the rest of your theme. And if you add your own animations or override text colors, respect prefers-reduced-motion and keep contrast readable — the widget doesn't enforce either of those for you on custom CSS.

Next steps​