The Agentforce Commerce Client gives you three levels of customization. Start with the lightest one that meets your need: configuration is the cheapest to maintain, custom CSS is next, and component overrides are the most powerful but carry the most responsibility.
Work down this list and stop at the first level that solves your problem.
Change behavior, text, colors, or layout mode? Use configuration and theme properties. Setting theme, headerConfig, componentConfig, searchConfig, and related props covers most brand and behavior needs with no code.
Restyle existing elements beyond what theme properties allow? Use custom CSS targeting the cim-widget-* classes, with globalClassName as a specificity hook. This restyles what the widget already renders without changing its structure.
Replace what the widget renders for products or agent actions with your own markup? Use the Component Override SDK. Use overrides to supply custom elements for product tiles, carousels, product detail cards, comparison tables, progress steps, and custom agent-action blocks. This is a messaging-mode capability.
| Need | Configuration | Custom CSS | Component Overrides |
|---|---|---|---|
| Brand colors, fonts, borders | Yes | Yes | Yes |
| Header logo and title | Yes | Yes | Yes |
| Presentation mode (chat, dialog, modal) | Yes | Partial | No |
| Restyle an existing element | No | Yes | Yes |
| Restructure product cards or carousels | No | No | Yes |
| Render a custom agent-action block (orders, pickers, forms) | No | No | Yes |
Component overrides replace product and agent-action rendering, not the widget’s chrome. The header, search bar, and follow-up suggestions are intentionally not overridable. Style those with theme properties and custom CSS instead. See Component Override SDK for the exact list of overridable slots.
j
