---
sourceDocument: Australia Sales Customer Relationship Management
sourceDocumentLink: https://www.servicenow.com/docs/r/australia/order-management

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Sales Customer Relationship Management

ft:clusterId :

    - omgmt

bundleId :

    - omgmt

workflow :

    - Customer and Industry


---

# Customizing ServiceNow CPQ with themes

# Customizing ServiceNow CPQ with themes {#ariaid-title1}

Release version: Australia  
Updated March 12, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Customizing ServiceNow CPQ with themes

ServiceNow CPQ allows administrators to personalize the user interface by customizing themes, which control the layout's look and feel.
To access theme customization, customers must first request feature enablement for themes through a ServiceNow CPQ Feature Enablement Request.
Once enabled, users can modify themes from the blueprint page using the layout editor.
Show full answer Show less  

## Getting Started

After enabling the theme feature, the **Customize Theme** tab appears on the layout editor. Activating the **Enable Theme** option reveals the Theme Editor, where customers can tailor the appearance of their CPQ layouts.

## Theme Editor Options

The Theme Editor offers two main editing modes:

* **Visual Editor:** Provides user-friendly controls for adjusting colors, font sizes, border styles, and spacing. Key configurable properties include:
  * **Root Text Color:** Default font color
  * **Primary Color:** Main color for buttons and selections
  * **Background Colors:** For primary containers and secondary items like expandable sections
  * **Neutral, Success, Info, Warning, Error Colors:** Used for different message banners and field validations
  * **Font Size, Border Radius, Border Width, Spacing:** Control typography and layout padding
* **JSON Editor:** Offers advanced customization by allowing manual editing of theme properties through JSON key-value pairs. Changes in the visual editor and JSON editor remain synchronized. This editor also enables overriding specific layout elements not covered by the visual editor.

## Customizing Specific Elements

To target specific layout elements for customization, inspect the layout to find customizable fields (prefixed with `--lgk-`). When overriding properties in JSON, use the field name without the prefix and assign the desired value.

## Using Custom Fonts

The theme supports adding custom fonts by specifying a font name and providing a hosted font URL in either the visual or JSON editor. The font file must be accessible via the provided URL to be applied successfully.  
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 {#customizing-cpq-with-themes__section_vy4_4b5_fhc}

From the blueprint page, select a layout, and then click the Customize Theme tab at the top of the page.  
Note:  
This tab appears only if the theme feature is enabled for your tenant.

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 {#customizing-cpq-with-themes__section_od2_xb5_fhc}

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.
{#customizing-cpq-with-themes__table_i1v_2c5_fhc__entry__2}

| 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 |
[Table 1. Visual editor options]

{#customizing-cpq-with-themes__table_i1v_2c5_fhc}

## The JSON editor {#customizing-cpq-with-themes__section_umb_fc5_fhc}

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 {#customizing-cpq-with-themes__section_trl_qc5_fhc}

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.