---
schema_version: "1"
id: c67214e1e10617436c2b85afd3e9af693bd137eb55f8690597fc1c7160297c28
title: cpqCartFlexTable Customization Example
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_cpqcartflextable_customization_example.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_cpqcartflextable_customization_example.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: c944df414bfb693c50ecbbe536c70fe879d04803b42297c0134236fa23fe5150
description: The cpqCartFlexTable card is the parent component for all Industries CPQ in LWC cart components. This card renders the cart root products and their line items. In this example, a customer wants to change the styling of the product name and to add an additional input field with the product name.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# cpqCartFlexTable Customization Example

The cpqCartFlexTable card is the parent component for all Industries CPQ in LWC cart components. This card renders the cart root products and their line items. In this example, a customer wants to change the styling of the product name and to add an additional input field with the product name.

This card has several input elements that are associated with their corresponding API fields. For example, to display the product name, a rich text editor is associated with the {Name} getCartItems API field. Similarly, to display product quantity, a Numeric Input Field associated to the {Quantity.value} field of the getCartItems API response.

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/images/icon_important.png)

Important

To customize the UI for cart root products, create a new version of the cpqCartFlexTable flex card and customize this version. This prevents your customizations from being overwritten in later upgrades.

1. In the OmniStudio FlexCards app, open the cpqCartFlexTable card and click **New Version**. Leave the **Is child** checkbox selected.
    
    Leave the **Is child** checkbox selected.
2. In the new version, click the element that is associated with the {Name} API field..
    
    ![Select the element](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/cpq_lwc_custom_cpqcartflextable_name_field.png)
3. In the setup panel, click the **Style** tab on the right.
4. In the Style panel, customize the styling of the field with the styling options available in the Style panel or with custom CSS.
    
    ![Customize the styling](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/cpq_lwc_custom_cpqcartflextable_style_options.png)
5. To use custom CSS, click **Add Custom CSS** from the menu ![Downward triangle icon for menu list](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/icon_menu_arrow.png) in the upper right, and add the class name to the container or custom class field in the styling panel.
    
    ![Add class name to the conatiner](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/cpq_lwc_custom_cpqcartflextable_css.png)
6. To add a new field in the cpqCartFlexTable card, drag the field from the Build tab, and drop it to a position.
    
    ![Add new field from the build tag](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/cpq_lwc_custom_cpqcartflextable_add_field.png)
7. Associate the added field to the merge field to show on the card.

Related Information:

- [Examples of LWC Customizations for Industries CPQ](https://help.salesforce.com/s/articleView?id=ind.comms_examples_of_lwc_customizations_for_industries_cpq.htm&language=en_US)
- [Trailhead: FlexCard Designer](https://trailhead.salesforce.com/content/learn/modules/omnistudio-flexcards/explore-the-flexcard-designer)