Customizing CPQ with themes
Summarize
Summary of Customizing CPQ with themes
Custom themes in ServiceNow CPQ enable you to personalize the layout’s look and feel to better align with your brand or user preferences. To use this feature, you must submit a CPQ Feature Enablement Request to activate themes for your tenant.
Show less
Once enabled, CPQ admin users can access the theme customization options directly from the blueprint page by selecting a layout and navigating to the Customize Theme tab.
Key Features
- Visual Editor: Offers a user-friendly interface with five sets of configurable options and an interactive preview. You can adjust colors (e.g., root text, primary, background, success, warning, error), font size, border radius and width, and spacing to tailor the layout.
- JSON Editor: Provides advanced control by allowing manual editing of the theme’s JSON structure. Both the visual and JSON editors are synchronized, reflecting changes made in either. You can override any theme element by specifying key-value pairs, focusing on customizable fields prefixed with
--lgk-(excluding the prefix in overrides). - Custom Fonts: Supports adding custom fonts via a hosted URL. You must supply the font name and source URL, which can be configured through either editor.
Practical Application for ServiceNow Customers
Enabling and customizing CPQ themes allows your organization to create a more cohesive and branded user experience in the CPQ interface. Adjusting colors, fonts, and layout spacing can improve usability and align the tool with your corporate identity. The combination of visual and JSON editors provides flexibility for both admins preferring a graphical interface and those comfortable with direct code editing.
By leveraging these customization capabilities, you can expect a tailored and professional CPQ interface that enhances end-user satisfaction and engagement.
Custom themes let you customize your layout. You can enable custom themes by submitting a feature enablement request.
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 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 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 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.