---
title: "Resources | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/resources/"
---

# Resources

> Resources are supplementary data used to help users personalize designs. Unlike input data, these elements remain unchanged by the user. In contrast to settings, resources do not influence the editor's functionality.

Resources are organized into the following sections:

```json
{
    "resources": {
        "quantity": {},
        "productImages": []
   }
}
```

## Quantity control

The Quantity control can appear either as a pre-defined list or as a free-form numeric input field. To enable the list mode, set the `quantity.type` property to `"list"` within the [settings](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/settings.md). Then, specify its values through the `quantity.list` array.

```json
{
    "resources": {
        "quantity": {
            "list": [1, 2, 3, 4, 5]
        }
    }
}
```

Using this example, you can limit selections to between one and five items. If no custom values are provided, the default options — `[1, 5, 10, 20]` — will be displayed instead.

![List view of quantity.](images/quantity-custom-list.png)

## Product images

The paginator near the viewer can display thumbnails of design and product images, allowing the user to list and browse them in the viewer. To enable product images, add them through the configuration.

```json
{
    "resources": {
        "productImages": [
            {
                "url": "https://example.com/front.jpg",
                "title": "Front View"
            },
            {
                "url": "https://example.com/side.jpg",
                "title": "Side View"
            }
        ]
    }
}
```

Each item in `productImages` supports the following properties:

- `url`: The URL of the image. This property is mandatory.
- `title`: The image title displayed in the paginator.
- `sku`: The SKU of the product variant that this image belongs to. Use it to match images with variants accurately when the same image URL is shared across multiple variants, for example, in Shopify integrations.
- `type`: The item type: `"image"` or `"video"`.
- `videoUrl`: The URL of the video. Use it when `type` is `"video"`.

For example, if you have a two-sided product, this configuration will add two product images to the paginator.

![Thumbnails of design and product images.](images/paginator-thumbnails.png)

:::note
When you have defined product images, you can enable a viewerless mode to display only the images. To do so, set [`settings.designViewer.noViewerMode`](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/settings.md#designviewer) to `true`.
:::