--- schema_version: "1" id: 1bf72d7e049dd7d609d54eb18bcb4696939641618384ec21a814132d155f9bec title: Customer Service Center Customizable Areas collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/b2c-commerce/guides/customer-service-center/b2c-csc-customizable-areas.md canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/b2c-csc-customizable-areas.html source_site: developer.salesforce.com content_type: documentation content_hash: 6fe6768089555ded29334e2162bbf7075723604e706afa176750d0bcf0247be8 products: - Composable Storefront - Salesforce APIs --- # Customer Service Center Customizable Areas Areas contain the specific tab layout and are referenced in the tabs. ```json "areas": { "customer_info": { "layout": [ { "layout": [ { "id": "form", "layout": [ { "attribute": "email" } ] } ] } ], "widgets": { "form": { "type": "attribute_form" } } } } ``` Customize a CSC customizable area. The customizable areas can be modified and localized. 1. Click App Launcher ![App Launcher](https://developer.salesforce.com/media/shared/appLauncher.png) and then select **Administration** > **Site Development** > **Customer Service Center Settings**. 2. Select the **Customizable Area** from the list. 3. Modify the configuration and click **Save**. - To return the configuration to the default, delete the existing configuration and click **Save**. - Customer Service Center recognizes MetaData Regex configurations for customizable forms. Also, overwrite a regex in a particular form configuration. **note:** Customizable areas aren't localized into languages supported by Business Manager. Details on customizing each area are included in the remaining sections of this guide. ## Basket View Use basket view to configure the entire basket view. - Widget `basket_shipments` Shows the shipments including the items grid and the drop area for multi shipments if enabled. ```json "basket_shipments" : { "type" : "basket_shipments" } ``` **note:** Use the DefaultShipment data provider to configure the default shipment as a gift and add a gift message. Use DefaultShipment in any of the customization pages, as long as a basket is available. - Widget `order_totals` Displays all basket (future order) prices. ```json "order_totals" : { "type" : "order_totals" } ``` - Widget `basket_coupons` Captures coupons and source codes and display application status. Configuration: | Name | Type | Description | | ------ | ---------------------------------- | -------------------------------------------------------------------------- | | `type` | `enum (coupon, source_code, both)` | Controls whether the widget track coupons only, source codes only or both. | ```json "basket_coupons" : { "type" : "basket_coupons", "config": { "type" : "both"} } "basket_coupons" : { "type" : "basket_coupons", "config": { "type" : "coupon"} } "basket_coupons" : { "type" : "basket_coupons", "config": { "type" : "source_code"} } ``` ## Basket Billing Address The basket shipping and billing address can contain a form to enter a new address. ## Basket Billing Address View The basket billing address view is a customizable area. This view shows the billing address of a basket as well as the appearance of each list-entry in the billing from the customer's address book. ![Basket billing address view showing a billing address and address book entries in the Customer Service Center](https://developer.salesforce.com/media/b2c-commerce/b2c_customer_service_center_billing_address_without_anything.png) ## Basket Payment Instrument The basket payment instrument lets you show a payment form that contains all values needed for a particular payment. The form appears after selecting a particular payment method and adds a payment to the order. - Widget `payment_method` Provides a selection grid for a payment method. - Widget `payment_totals` Shows the payment totals of a basket or an order to have an overview of subtotals and totals (which varies with payment promotions). ```json "order_totals" : { "type" : "order_totals" } ``` ## Basket Shipping Address The basket shipping address contains a form to add an address. ## Customer Address Create The customer address is a customizable area that creates a form. ## Customer Address Edit The customer address edit form is a customizable area. ## Customer Create The customer create form is a customizable area ## Customer Edit The customer edit form is a customizable area. ## Customer Summary A customizable area that shows the customer details in the customer's view. ## Order Billing Address View A customizable view that shows that the billing addresses are formatted correctly. ## Order Payment Instrument The order payment instrument is a customizable area that shows a payment form that contains all values needed for a particular payment. The form appears after selecting a particular payment method and adds a payment to the order. - Widget `payment_method` Provides a selection grid for a payment method. - Widget `payment_totals` Shows the payment totals of a basket or an order to have an overview of subtotals and totals (which varies if there are payment promotions). ```json "order_totals" : { "type" : "order_totals" } ``` ## Order Shipping Address View A customizable view for verifying that shipping addresses are correctly formatted. ## Order Summary A customizable area atop of the items view to show arbitrary content. ## Price Adjustment This customizable area is used for adding product, shipping, or order price adjustments of a basket. Beyond the standard form widgets, a `price_adjustment_value` widget can be added for entering the particular value. - Widget `price_adjustment_value` Shows the price adjustment value element that can be switch between amount off, percentage off and price change. ## Product Detail The Product Detail page is entirely customizable. In addition to the common widgets, other widgets are supported and can be placed anywhere in the area. - Widget `gallery` Configuration | Name | Type | Description | | ------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | mapping | Business Manager's view types to client viewtypes map | Maps the Business Manager's view types to client view types. Important are the view types for "large" and "small". The viewtype "large" specifies all available images while viewtype "small" is responsible for the navigation images. The following example maps the Business Manager's view type "small" to the client's "small" view type, "large" to the client's "large" and "hi-res" to the client's "high" view type. It is possible to have multiple business manager view types per target view type. | ```json { "mapping": [ { "small": "small", "large": "large", "high": "hi-res" }, { "small": "swatch", "large": "swatch" } ] } ``` - Widget `product_variation` Displays and allows the modification of the product's variation attributes. - Widget `product_availability` Displays stock level of a product. In case a product is out of stock (pre- or back-ordered), this component shows the expected in-stock date. - Widget `product_option` Displays and allows the modification of product options. - Widget `product_unit_price` Shows the unit price of a product. - Widget `product_total_price` Shows the total price of a product. This widget includes all options and considers the selected quantity. - Widget `product_quantity` Displays and allows modification of the quantity of a product item. - Widget `product_title` Shows the product's title. This widget consists of the product name, the product brand, and the product ID. ## Product Search Customize the product search results, for example, with attributes such as size, color, a secondary product title. This information helps agents more easily identify the correct item without having to open a product detail page. The customizable area appears below the area where the tile content, which includes the image, product title, SKU, price, and availability. You select configurable attributes in Business Manager.