Customizing ServiceNow CPQ with themes
Summarize
Summary of Customizing ServiceNow CPQ with themes
ServiceNow CPQ enables customers to personalize the appearance and layout of their CPQ environment through custom themes. To utilize this feature, ServiceNow CPQ admin users must submit a Feature Enablement Request to activate theme customization for their tenant. Once enabled, users can access theme customization options directly from the blueprint page within the layout editor.
Show less
Key Features
- Enable Theme Option: Accessible under the Customize Theme tab on the blueprint page, this option activates the theme editor interface.
- Visual Editor: Provides an intuitive interface to modify key appearance settings such as text color, primary and secondary colors, background colors, font size, border radius, border width, and spacing. Changes are immediately reflected in an interactive preview.
- JSON Editor: Offers granular control by allowing users to edit theme properties via JSON key-value pairs. It synchronizes with the visual editor and can toggle the default ServiceNow CPQ theme for easy reference.
- Theme Overrides: Users can override specific layout elements by identifying customizable fields (prefixed with --lgk-) through layout inspection and modifying their values within the JSON editor.
- Custom Fonts: Support for custom fonts is available by specifying a hosted font URL and font name within either editor, enabling further branding customization.
Practical Application for ServiceNow Customers
By leveraging custom themes, ServiceNow CPQ customers can tailor the visual presentation of their CPQ interfaces to align with corporate branding and user experience goals. This flexibility enhances user engagement and clarity by allowing color schemes, font styles, and layout spacing to be customized. The dual-editor approach caters to both users preferring a visual interface and advanced users requiring precise JSON-based control. Enabling themes requires submitting a feature request to ServiceNow, ensuring controlled activation within the tenant.
Custom themes let you customize your layout. You can enable custom themes by submitting a feature enablement request.
ServiceNow CPQ admin users can edit a custom theme to customize the look and feel of their layout.
To access the custom theme options in the layout editor, submit a ServiceNow CPQ Feature Enablement Request to enable themes.
Getting started
From the blueprint page, select a layout, and then click the Customize Theme tab at the top of the page.
On the Customize Theme tab, click to turn on Enable Theme. (By default, this option is off.)
When this option is turned on, you see the full Theme Editor screen.
The visual editor
The visual editor includes five sets of options and an interactive preview. The standard ServiceNow CPQ theme is applied by default, but you can modify any fields to start customizing your theme.
The following options are available in the visual editor.
| Option | Description |
|---|---|
| Root Text Color | Default font color used in the layout |
| Primary Color | Color used most often for buttons and selections |
| Primary Background Color | Default color used for the background and containers |
| Secondary Background Color | Default color used for tier items such as expandable section backgrounds |
| Neutral Color | Secondary color used for fields such as hint text |
| Success Color | Background color for success message banners |
| Info Color | Background color for neutral message banners |
| Warning Color | Background color for warning message banners |
| Error Color | Color for error messaging and field validation |
| Font Size | Default font size; small, medium, large |
| Border Radius | Determines border shape for fields where 0 = Square and 16 = Round |
| Border Width | Determines overall size of the border for fields; none, normal, thick |
| Spacing | Determines overall padding for the layout; tight, normal, loose |
The JSON editor
The JSON editor provides additional control by using overrides for any element included in the theme.
By default, the values for the current theme are shown, but a user can manually enter new key value pairs to modify the theme. The structure of the theme JSON is already provided in the editor. Clicking in the editor lets the user type in the code block. Any changes made in the visual editor are represented in the JSON editor, and vice versa.
A toggle hides or shows the standard ServiceNow CPQ theme as a reference for fields you may want to revert without discarding the entire theme.
If you want to overwrite a layout element that is not included in the sample data, you can inspect the layout to determine the field to change. Fields that begin with --lgk- are customizable in a theme.
The following example demonstrates inspecting a toggle.
To overwrite an element, add the field name and the modified value in the properties section of the theme override. The format should not include the --lgk- but should just be “fieldname” :
“value”.
The following are example theme overrides.
Using a custom font
A theme can support a custom font through a hosted URL entered in either the visual editor or the JSON editor. This font file needs to be hosted so that it is accessible to the theme. For a custom font, you need to provide a name and the font source URL.