You can manage the look and feel of SAP CPQ through the standard setup options from the main menu.
SAP CPQ can be customized to match any company's specific processes and branding. This includes changes to the user interface (UI) branding and Cascading Style Sheets (CSS). In Product Configurator, use the Layout tab to lay out product options.
UI changes can be made to match a company's identity. This can include overall layout changes, the addition of a company logo, color scheme modifications, font changes, and more.
CSS changes to the SAP CPQ interface will involve the styling of web pages generated by the platform, enabling a company to match the look and feel of its brand. It can include color changes, typography, layout adjustments, and more.
Note that these changes require technical knowledge and must be done by a person experienced in web development. Furthermore, changes should also be tested in a test environment before deploying to ensure no adverse effects on the tool's functionality.
SAP CPQ pages are based on responsive web design. Responsive web design means that a website or its pages adapt content to a variety of screen sizes to provide a standard system layout for all users. SAP CPQ will dynamically arrange screen elements for any window size and may load content in a popup.
Begin by using the Layout tab in product setup. Use its drag-and-drop functionality to lay out attributes on the screen.
Additional flags are available for every attribute setup in your product configuration. Under Product Attribute configuration, flag "Spans across entire row in configuration" was used to extend the label across the width of the entire window.
This flag like others are used for different workarounds. For example, you can activate it for an empty label attribute and use the attribute to delimit two groups of other attributes. With some exceptions, elements such as labels and hints can be modified in an implementation, which should be performed in an administration page.
Use above mentioned guidelines to lay out elements in your implementation and use administrative fields where possible. For example, specify the tab where you want to display a quote custom field and assign its order within that tab.