Customization

This page covers the standalone widget's look: the trigger bar and the chat panel. The product block has its own styling section on Product block.

Appearance attributes

All appearance settings are attributes on the <just-ai-agent> element:

An invalid value is never an error: the widget silently falls back to the default.

The Shadow DOM model

The widget renders in its own Shadow DOM. Your theme's CSS cannot reach inside it, and the widget's component styles stay inside it: what it writes into your page is limited to a few small data-just-ai tags — font faces, a transient mobile scroll lock, and the Global CSS and JS overrides below. The supported hooks from the outside are the CSS custom properties below.

One stylesheet does cross the boundary, in the other direction: the Global CSS override, a per-shop stylesheet configured in the dashboard to fix theme conflicts around the widget. The widget injects it into your page's <head> as a single <style data-just-ai="custom"> tag at boot, and removes it when the shop has none. The styling reference covers where it sits in the cascade.

Its script twin is the Global JS override: a per-shop script configured the same way, injected as a single <script data-just-ai="custom-js"> tag and executed once per page load. It replaces the small theme snippets that used to be hand-edited into theme.liquid.

CSS custom properties

Two public properties, set on the just-ai-agent selector from your own CSS:

just-ai-agent {
  --ai-z-index: 100; /* render the widget below your own drawers and modals */
  --ai-bottom-position: 80px; /* clear a sticky add-to-cart bar */
}

Everything else inside the widget is internal and may change without notice. Use the attributes for theming.

Going further

• Attributes reference: the full attribute list, beyond appearance.
• Styling reference: every CSS hook, including the product block's.