---
title: "Customize product configurator"
slug: "customize-product-configurator"
description: "Customize the product configurator: filter fields, customize the view, set image sizes, and more."
updated: 2025-02-03T21:42:53Z
published: 2025-02-03T21:42:53Z
canonical: "docs.zilliant.com/customize-product-configurator"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zilliant.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize product configurator

Learn how to customize the [product configurator](/docs/work-with-product-configurator) to suit your preferences:

- [Filter product configuration fields](/docs/customize-product-configurator#filter-product-configuration-fields)
- [Customize the configurator view](/docs/customize-product-configurator#customize-the-configurator-view)
- [Display all quote products in the product configurator](/docs/customize-product-configurator#display-all-quote-products)
- [Add the Technical View switch](/docs/customize-product-configurator#add-the-technical-view-switch)
- [Display configuration progress](/docs/customize-product-configurator#display-configuration-progress)
- [Configure image sizes](/docs/customize-product-configurator#configure-image-sizes)

---

## Filter product configuration fields

1. [Open the product configurator](/docs/work-with-product-configurator#open-the-product-configurator).
2. Select ![](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/CPQ-icon_settings.png?sv=2026-02-06&spr=https&st=2026-11-10T17%3A33%3A05Z&se=2026-11-10T18%3A33%3A05Z&sr=c&sp=r&sig=GTwM9AGWVpFmrQay%2FKpvJcc0T0PVhYDB9qmtHqmn%2BSU%3D).
3. In the **Filter By** section, select the options by which you want to filter the product configuration fields.
  - Under **Field Tags**, select field types by which you want to filter the product configuration fields. Available field types are: Mandatory, Cost, Price, Quote Relevant, and Order Relevant.
  - Under **Configuration**, select field value types by which you want to filter the product configuration fields. Available field value types are:
    - User Defined—Values defined by a user.
    - System Defined—Values defined by the system.
    - Default—Values defined in the knowledge base.
    - Empty Values—Fields with an empty value.

---

## Customize the configurator view

You can customize the navigation, adjust the view of field groups, modify the layout of the product configurator, and more.

To customize the configurator view, follow these steps:

1. [Open the product configurator](/docs/work-with-product-configurator#open-the-product-configurator).
2. Select ![](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/CPQ-icon_settings.png?sv=2026-02-06&spr=https&st=2026-11-10T17%3A33%3A05Z&se=2026-11-10T18%3A33%3A05Z&sr=c&sp=r&sig=GTwM9AGWVpFmrQay%2FKpvJcc0T0PVhYDB9qmtHqmn%2BSU%3D).
3. In the **View Settings** section, toggle the switches to customize the view.

Under **Navigation**:

Under **Groups**:

Under **Sub Groups**:

Under **Characteristics**:

Under **Layout**:
  - **Main Navigation**—Show the application left navigation area.
  - **Line Item ID**—Show the line item position number next to the product name in the configurator product list.
  - **Titles**—Show attribute group titles. If you turn this toggle off, the **Comments** and **Image** toggles automatically turn off.
  - **Comments**—Show short descriptions on the attribute group level.
  - **Image**—Show images on the attribute group level.
  - **Titles**—Show attribute subgroup titles. If you turn this toggle off, the **Comments** toggle automatically turn off.
  - **Comments**—Show short descriptions on the attribute subgroup level.
  - **Attribute Positions**—Show the position number next to the attribute label.
  - **Attribute Name**—Show the attribute name instead of its label.
  - **Comments**—Show short descriptions on the attribute level.
  - **Filter Tags**—Show colored bullets identifying the field type next to attribute labels.
  - **Single Column Mode**—Show characteristics as single column.

1. (Optional.) Next to the **View Settings** section name, select **Save as Default** to save your preferences as default settings for the product configurator view in your account.

---

## Display all quote products

The product configurator can simultaneously display all products added to the quote. To configure this functionality, follow these steps:

1. From the application left navigation area, select **Administration**.
2. From the top navigation bar, select **Master Data Management**.
3. Scroll or search to locate **Setting Boolean** and select it from the list.
4. Select **Return all sales items on the configurator**.
5. Set the **Setting Value Boolean** switch to **YES**.

---

## Add the Technical View switch

If you don't see the **Technical View** ![](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/CPQ-icon_technical-view-switch.png?sv=2026-02-06&spr=https&st=2026-11-10T17%3A33%3A05Z&se=2026-11-10T18%3A33%3A05Z&sr=c&sp=r&sig=GTwM9AGWVpFmrQay%2FKpvJcc0T0PVhYDB9qmtHqmn%2BSU%3D) switch in the product configurator, then add it to the user interface by following these steps:

1. In CPQ, in the top right, select your profile picture or the account icon.
2. In the dialog, select your profile picture or the account icon.
3. In the **Preferences** tab, set the **Hide Technical View Switch** switch to **NO**.

---

## Display configuration progress

To display the configuration progress of a quote and of a separate product in the product configurator, follow these steps:

1. From the application left navigation area, select **Administration**.
2. From the top navigation bar, select **Master Data Management**.
3. Scroll or search to locate **Setting Boolean** and select it from the list.
4. Select a parameter, then set the **Setting Value Boolean** switch to **YES**:
  - **Manual refresh of quote's status and progress on the configurator**—Add the **Refresh** button to manually update the configuration progress.
  - **Setting Enable To Calculate Configuration Progress Percentage**—Display the progress of the quote configuration in percentage.
  - **Setting Enable To Calculate Configuration Progress Status**—Display the status of the quote configuration progress.
  - **Setting Enable To Calculate Line Item Configuration Progress Percentage**—Display the progress bar for a separate product configuration.
  - **Setting Enable To Calculate Line Item Configuration Progress Status**—Change the color of the progress bar depending on the configuration progress of a separate product.
    - Red—Base configuration incomplete.
    - Green—Base configuration complete.

The following image shows the configuration progress of a quote and of a product in the product configurator: ![Quote-and-product-configuration-progress](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/Quote-and-product-configuration-progress.png?sv=2026-02-06&spr=https&st=2026-11-10T17%3A33%3A05Z&se=2026-11-10T18%3A33%3A05Z&sr=c&sp=r&sig=GTwM9AGWVpFmrQay%2FKpvJcc0T0PVhYDB9qmtHqmn%2BSU%3D)

---

## Configure image sizes

You can configure the size of images displayed in the product configurator on various levels:

- [System level](/docs/customize-product-configurator#system-level)
- [Knowledge base level](/docs/customize-product-configurator#knowledge-base-level-non-sales-solution-configurator-cases)
- [Attribute level](/docs/customize-product-configurator#attribute-level)
- [Custom layout level](/docs/customize-product-configurator#custom-layout-level)
- [Custom layout attribute level](/docs/customize-product-configurator#custom-layout-attribute-level)

          Note

          

Settings on the levels lower in this list take priority over levels above. For example, the size defined on the attribute level overrides the size on the system and knowledge base level.

If you don't set the image size manually, the application applies the default size.

### System level

The image size defined on the system level applies to all images in the product configurator. To define the image size on this level, follow these steps:

1. From the application left navigation area, select **Administration**.
2. From the top navigation bar, select **Customization**.
3. On the **Configurator** tab, in the **Thumbnail** section, define the image size:
  - **Dimensions in Selection (px): W x H**—Defines the size for images in the main area of the product configurator. That is the area where you select product configurations.
  - **Dimensions in Possible Values (px): W x H**—Defines the size for images in the panel that opens when you select an attribute, attribute group, or attribute subgroup name in the configurator main area.
4. Select **Save Changes**.
5. Create a knowledge base snapshot to apply the changes.

### Knowledge base level (non Sales Solution Configurator cases)

The image size defined on the knowledge base level applies to images of all attributes in that knowledge base. To define the image size on this level, follow these steps:

1. From the application left navigation area, select **Administration**.
2. From the top navigation bar, select **All Products**, then select a product.
3. On the **Knowledge Base** tab, select a line item.
4. On the **Preference** tab, in the **Thumbnail** section, define the image size:
  - **Dimensions in Selection (px): W x H**—Defines the size for images in the main area of the product configurator. That is the area where you select product configurations.
  - **Dimensions in Possible Values (px): W x H**—Defines the size for images in the panel that opens when you select an attribute, attribute group, or attribute subgroup name in the configurator main area.
5. Select **Save**.
6. Create a knowledge base snapshot to apply the changes.

### Attribute level

The image size defined on the attribute level applies to the image of a specific attribute. To define the image size on this level, follow these steps:

1. From the application left navigation area, select **Model**.
2. From the top navigation bar, select **Attributes Management**, then select a record.
3. On the **Properties** tab, go to the **UI Appearance** section.
4. Set the **Use Thumbnail** switch to **YES**.
5. Define the image size:
  - **Dimensions in Selection (px): W x H**—Defines the size for images in the main area of the product configurator. That is the area where you select product configurations.
  - **Dimensions in Possible Values (px): W x H**—Defines the size for images in the panel that opens when you select an attribute, attribute group, or attribute subgroup name in the configurator main area.
6. Select **Save**.
7. Create a knowledge base snapshot to apply the changes.

### Custom layout level

The image size defined on the custom layout level applies to images of all attributes in that custom layout. To define the image size on this level, follow these steps:

1. From the application left navigation area, select **Model**.
2. From the top navigation bar, select **Custom Layouts**.
3. From the list, select **Card Box**.
4. On the **Overview** tab, in the **Thumbnail** section, define the image size:
  - **Dimensions in Selection (px): W x H**—Defines the size for images in the main area of the product configurator. That is the area where you select product configurations.
  - **Dimensions in Possible Values (px): W x H**—Defines the size for images in the panel that opens when you select an attribute, attribute group, or attribute subgroup name in the configurator main area.
5. Select **Save**.
6. Create a knowledge base snapshot to apply the changes.

### Custom layout attribute level

The image size defined on the custom layout attribute level applies to the image of a specific attribute in the custom layout. To define the image size on this level, follow these steps:

1. From the application left navigation area, select **Model**.
2. From the top navigation bar, select **Custom Layouts**.
3. From the list, select **Card Box**.
4. On the **Dynamic Attributes** tab, select a record.
5. In the **Thumbnail** section, define the image size:
  - **Dimensions in Selection (px): W x H**—Defines the size for images in the main area of the product configurator. That is the area where you select product configurations.
  - **Dimensions in Possible Values (px): W x H**—Defines the size for images in the leftmost panel that opens when you select an attribute, attribute group, or attribute subgroup name in the configurator main area.
6. Select **Update**.
7. Create a knowledge base snapshot to apply the changes.