# Select Product widget for the product catalog

> [HTML Version](product-item-widget.html)

The **Select Product** widget is used to work with items of the **Product Catalog** app from the [Product Catalog](product-catalog.md) workspace. This widget helps to select a product of interest to the client, for example, on the page of a lead or a deal. You can:

- View product data.

- Fill configurable product attributes with values.

You can place the widget on the forms of apps and tasks in business processes.

## Set up the widget

Let’s review the order of settings for using the **Select Product** widget on the **Leads** app forms:

1. After selecting a product in the widget and saving the lead page, a service app item is created in the **Product** **Catalog** workspace that stores the data of the selected product. To do this, you need to add the **PC** **Product **service property with the **App (one)** type to the context of the **Leads** app.

In the property settings, select the [Products](product-catalog.md#products) contract from the **Product Catalog** workspace. The sources of the contract are service apps, in which products are allocated and saved in groups. The created property is specified in the settings of the **Select Product** widget.

2. Add the **Select Product** widget to the create, edit, and view forms of the **Leads** app. To do this, in the [interface designer](interface_designer.md), drag the widget from the sidebar to the modeling canvas.

3. In the window that opens, select the **PC Product** property created in the first step.

**(product-item-widget-1.png)**

4. Limit access to the product on the lead page to view only. Then the employee will be able to change the product and its attributes only on the edit form of the lead.

5. To do this, go to the **System** tab on the **Leads** app view form in the **Select Product** widget settings and set the **Read only** field to **Yes**.

**(product-item-widget-2.png)**

6. The widget is added to the app form as a field that has no name. Use the **Text** widget to set the desired field name.

**(product-item-widget-3.png)**

7. By default, the field for selecting a [Products](360012584940.md#product) directory item from the **CRM** workspace is placed on the lead form. Remove this field as it is not used if employees work with products from the **Product** **Catalog** workspace.

8. Save the settings of the **Leads** app forms and publish the changes.

For more information about user actions with the **Select Product** widget, see [Select a product on the app item page](/en/help/crm/select-catalog-product.html).