UI branding in SAP CPQ defines the look of the user interface, such as colors, images, and visual styles. While users can view the same products and pricing as others, their user interface can vary depending on the brand they belong to. Different user interfaces can be displayed to anonymous Web site visitors, internal users, and partners.
Changing the SAP CPQ Style
Changing the default look of SAP CPQ can be done through the available CSS file or creating new ones.
Rather than creating a new template and customizing JavaScript, it may be more cost-effective to customize existing styling using CSS instead of creating new web pages. Sometimes, CSS can be a better alternative for editing background images and logos. By focusing on style adjustments through CSS, you can achieve the desired appearance without the complexities of modifying JavaScript.
The file MyResponsiveStyles.css is a skeleton CSS file containing a bare CSS structural framework. To customize a brand's UI, download a CSS file, update it, and upload again. Changes to the file are merged with the system CSS defined in the default UI. Your effective style sheets will be a combination of these two CSS definitions. Pay attention when you alter the behavior of system CSS classes. Use browser development tools to minimize the collateral impact of any UI re-styling. Ideally, there should be no impact. If you're creating new files, make sure that the extension is .css.
