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 in the admin app's global settings. 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:

:root {
  --user-bg-color: #2C9AB4;
  --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: #2C9AB4;
  --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: 35vh;
  --chat-max-height-mobile: 50vh;
}

Most of these already have a matching field on the Appearance 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 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​