---
title: "PIM design selector | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/pim-design-selector/"
---

# PIM design selector

> This widget shows designs for products configured in the [PIM module](https://customerscanvas.com/docs/hub/admin-guide/pim.md) and allows you to select one of them.

```json
{
    "name": "design-selector",
    "type": "pim-design-selector",
    "params": {...}
}
```

## Getting design variants

The `designs` property shows design variants. You can obtain these designs through the [`pim-ajax`](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/pim-ajax.md) widget.

![The PIM design selector widget.](./images/pim-design-selector-designs-in-rightToolPanel.png)

:::note
If you use this widget in the `toolPanel` or `rightToolPanel`, embed it in the `group` widget. To learn more about this widget, read the [`group`](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/group.md) article.
:::

```json
{
    "name": "design-selector",
    "type": "pim-design-selector",
    "params": {
        "designs": "{{ $['pim-ajax'].designs }}"
    }
}
```

## Params

| Name | Type | Description | Default value |
|--|--|--|--|
| `designs`|[ProductInformationDesign](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-pim-design-selector.IDesignSelectorConfig/)[]|Contains design variants|empty array|
| `showItemsTitle`|boolean|If `true`, displays a title below a thumbnail|`false`|
| `itemsPerPage`|number|Defines the quantity of thumbnail per page|`24`|
| `onChange`|function|A function or array of functions that will be executed when an item is changed|null|
| `onItemDoubleClick`|function|A function or array of functions that will be executed when an item is double-clicked|null|
| `onItemClick`|function|A function or array of functions that will be executed when an item is clicked|null|