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, ShopGuide exposes a single Custom CSS field in the admin app's global settings. Whatever you write there is injected into a <style> block on every storefront page — there is no per-page or per-block custom CSS.

CSS Custom Properties You Can Override​

The widget sets its appearance through CSS custom properties on :root (and on the widget's own containers, so they also work inside Shopify themes that use Shadow DOM). You can override any of these from your Custom CSS field 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;
}

In practice, most of these already have a matching field in the Appearance page (see Chat appearance & branding) — reach for Custom CSS only for things the settings UI doesn't expose.

Real Selectors to Target​

If you need to style beyond what the custom properties cover, these are the widget's actual DOM anchors:

SelectorWhat it is
#main-chat-containerThe main chat panel
.AIchatbotClass on the main chat panel
[data-style-template="classic"] / .classic-stylePresent when the Classic style template is active
[data-style-template="bubbly"] / .bubbly-stylePresent when the Bubbly Glow template is active
[data-style-template="floaty"]Present when the Floaty template is active
#ai-ambient-wrapperOuter wrapper used by the Floaty and Bubbly Glow templates (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 the border/shadow settings are on

Example — tighten the bubble 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);
}

Notes and Constraints​

  • The floating bubble is always position: fixed, anchored bottom-left or bottom-right depending on the Bubble position setting — see Chat positioning & layout. Custom CSS can restyle it, but repositioning it away from a fixed corner is unsupported and will likely break on mobile.
  • Custom CSS is global — it applies to the widget on every page, for every block on the store, since it comes from the same metafield the rest of global settings live in.
  • Keep selectors specific to the widget's own classes/IDs above rather than broad tag selectors, to avoid leaking styles into the rest of your theme.
  • Respect prefers-reduced-motion and maintain sufficient color contrast if you add your own animations or override text colors — the widget itself doesn't enforce this for custom CSS.

Next Steps​

Advanced styling lets you create a truly branded chat experience. Keep changes scoped to the widget's own selectors and test on both mobile and desktop after every change.