Style and Theme the Widget | Agentforce Commerce Client | Composable Storefront

The Agentforce Commerce Client is non-opinionated: it ships with no CSS framework and applies no global resets. Every element carries a cim-widget- class prefix, so widget styles never leak into your page and your storefront styles never affect the widget. You style the widget in three escalating layers: theme properties, header configuration, and custom CSS.

The theme object is the primary way to make the widget feel brand-native. A handful of properties cascade across every surface (buttons, messages, typography, borders, and corners), so a few lines of configuration reshape the widget’s look with no custom CSS.

Property	Applies to	Default
`primaryColor`	Buttons, icons, and user message backgrounds	`#3182ce`
`secondaryColor`	AI response message backgrounds	`#2c5282`
`fontColor`	All text	`#1a202c`
`fontFamily`	Typography	`inherit`
`backgroundColor`	Widget canvas and container	`#ffffff`
`borderColor`	Outer borders (dialog and embedded modes)	`#dddddd`
`borderRadius`	Corner rounding	`0.25rem`

A partial theme overrides only the values you set; every unset property falls back to its default.

Because fontFamily defaults to inherit, the widget automatically adopts whatever typeface your storefront uses. If your site rebrands to a new font, the widget follows with no configuration change. Stick to universally supported font values so the widget renders consistently even when a custom font hasn’t loaded.

The headerConfig object independently styles the widget header (logo, title text, and header chrome).

Field	Type	Notes
`logoUrl`	`string`	Logo image in the header.
`headerText`	`string`	Header title text.
`headerBackgroundColor`	`string`	Header bar background. Defaults to `transparent`.
`headerTextColor`	`string`	Header title color. Defaults to `inherit`.
`headerTextFontSize`	`string`	Header title size. Defaults to `1.25rem`.
`headerTextFontWeight`	`number`	Header title weight. Defaults to `bold`.
`headerTextFontFamily`	`string`	Header title typeface. Defaults to `inherit`.
`headerTextTextAlign`	`"left" \| "center" \| "right"`	Header title alignment. Defaults to `left`.

A few more properties adjust presentation.

suggestionButtonConfig adds an opt-in icon to the prompt and in-conversation suggestion buttons. Set icon to "sparkle", "plus", or "paper-plane", and iconPosition to "left" (default) or "right". No icon shows unless you set one.
searchConfig customizes the search bar: placeholder, buttonLabel, buttonAriaLabel, buttonIconUrl, buttonType ("icon", "text", or "icon-text"), and enableCancelSearch. Set the search bar’s placeholder and button label here through placeholder and buttonLabel.
promptsConfig controls the prompts extension: promptsDisplay ("input", "buttons", or "both", default "both"), staticQuestions (fixed questions rendered as buttons; trimmed and deduplicated, empties dropped), and disableAskElseButton (default false).

The widget emits theme and header values as CSS custom properties, so you can also read or override them in your own stylesheet:

Header properties follow the same convention with a --cim-widget-header- prefix (for example, --cim-widget-header-background-color).

When theme properties aren’t enough, target the widget’s classes directly. Every cim-widget-* class is a stable selector, for example:

For an extra specificity hook, set the globalClassName property. The widget adds that class to all of its elements, giving you a scoped selector to raise specificity without editing the widget’s source.

Per-platform notes. The cim-widget- classes are the same regardless of storefront framework, so custom CSS targets them the same way everywhere. Deliver that CSS through your storefront’s normal styling pipeline:

SFRA: add the rules to a cartridge stylesheet.
Composable Storefront (PWA Kit): add the rules alongside your Chakra styles, scoped to the cim-widget- classes.
Storefront Next: add the rules to your app’s stylesheet; the cim-widget- prefix keeps them isolated from your utility classes.

Because the widget attaches no shadow root, your storefront CSS reaches these elements normally.