Style and Theme the Widget

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.

Theme properties

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.

theme: {
  primaryColor: "#3182ce",
  secondaryColor: "#2c5282",
  fontColor: "#1a202c",
  fontFamily: "inherit",
  backgroundColor: "#ffffff",
  borderColor: "#dddddd",
  borderRadius: "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.

Header configuration

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

Other presentation options

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).

CSS custom properties

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

--cim-widget-primary-color
--cim-widget-secondary-color
--cim-widget-font-color
--cim-widget-font-family
--cim-widget-background-color
--cim-widget-border-color
--cim-widget-border-radius

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

Custom CSS for pixel-perfect control

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

.cim-widget-container {
}
.cim-widget-message-container {
}
.cim-widget-suggestion-button {
}
.cim-widget-modal-title {
}

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.

Related resources

• Configure the Agentforce Commerce Client
• Choose a Customization Approach
• Component Override SDK