---
schema_version: "1"
id: d7ec180aa197adf5734f89a96311ae8d80e7a859ac4a58ee6341e0f797ba60f9
title: Choose a Customization Approach
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/b2c-commerce/guides/agentforce-commerce-client/customization-decision-guide.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/customization-decision-guide.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 5646bdcad993fc9d994db2cfe2f9d4d7f5cdffc8a931069238a7fd364a1bfd6e
products:
  - Composable Storefront
  - Salesforce APIs
---
# Choose a Customization Approach

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.

## Decision guide

Work down this list and stop at the first level that solves your problem.

1. **Change behavior, text, colors, or layout mode?** Use [configuration](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configure-the-commerce-client.md) and [theme properties](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/style-and-theme-the-widget.md). Setting `theme`, `headerConfig`, `componentConfig`, `searchConfig`, and related props covers most brand and behavior needs with no code.

2. **Restyle existing elements beyond what theme properties allow?** Use [custom CSS](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/style-and-theme-the-widget.md) targeting the `cim-widget-*` classes, with `globalClassName` as a specificity hook. This restyles what the widget already renders without changing its structure.

3. **Replace what the widget renders for products or agent actions with your own markup?** Use the [Component Override SDK](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/component-override-sdk.md). 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.

## What each level can and can't do

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

## What overrides do not cover

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](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/component-override-sdk.md) for the exact list of overridable slots.

## Related resources

- [Configure the Agentforce Commerce Client](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configure-the-commerce-client.md)
- [Style and Theme the Widget](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/style-and-theme-the-widget.md)
- [Component Override SDK](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/component-override-sdk.md)