CPQ enables you to implement CSS adjustments on different CPQ pages based on your organization's needs using the CSS Override field in Config System Properties. You can use CSS Override to add custom styles to pages like Catalog, Configuration, and Cart, by overriding the default style. For example, you can add logos, images on CPQ pages. You can define CSS Override to specific flows or globally to all flows. When you configure CSS override for a specific flow, the CSS is applied only on that flow. However, when you apply CSS override globally, CPQ also overrides flow-specific CSS adjustments along with CPQ default style. For more information, see About Custom Setting Order of Precedence.

Pre-requisites

Follow the steps below before you configure CSS Override.

  1. Create a CSS file with the adjustments you want to implement on CPQ pages.
  2. Upload the file as a static resource in your org. For more information on static resources, see Using Static Resources in Salesforce.

To configure CSS Override globally

  1. Go to Setup > Develop > Custom Settings > Config System Properties > Manage.
  2. Find System Properties and click Edit.
  3. Enter the name of the CSS file that you uploaded as static resources in the CSS Override field. This enables you to use the styles defined in the CSS file as opposed to default styles.
  4. Click Save.

To configure CSS Override specifically for a flow

  1. Create a new flow-specific Config System Properties data set or open an existing flow-specific data set. For more information, see Configuring Custom Settings for Different Flows.
  2. Enter the name of the CSS file that you uploaded as static resources in the CSS Override field. This enables you to use the styles defined in the CSS file as opposed to default styles.
  3. Click Save.


Example

You can use the CSS Override field to hide the Line Item Actions such as Price Ramp, available in the menu () next to each line item on the Cart page. You can define such CSS Override to hide line item action globally or based on a flow. The sample code below is an example of CSS code that you can use to hide the line item menu actions from the Cart page.

/*To hide price ramp*/
#lla-price-ramp {
	display: none;
}

/*To hide related-lines*/
#lla-related-lines {
	display: none;
}

/*To hide multiple adjustments*/
#lla-adjustments {
	display: none;
}

/*To hide usage tier*/
#lla-usage-tier {
	display: none;
}

/*To hide incentives*/
#lla-incentives {
	display: none;
}

/*To hide water fall*/
#lla-price-waterfall {
	display: none;
}
CODE