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

# Custom field order

> For flexible customization, the editor supports configurable element ordering. You can define the sequence of elements—both default and custom—via the [`order`](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/settings.md#order) configuration. This guide explains how to set up element order without delving into internal interfaces or logic.

## Default element order

The editor uses the following default order for elements:

| Element               | Default Position |
|-----------------------|------------------|
| `header`              | 0                |
| `designVariants`      | 1                |
| `imageSelectorFilters`| 2                |
| `toggles`             | 3                |
| `texts`               | 4                |
| `placeholders`        | 5                |
| `options`             | 6                |
| `quantity`            | 7                |
| `approvalCheckbox`    | 8                |
| `downloadButton`      | 9                |
| `finishButton`        | 10               |

## Customizing element order

### Overriding the default order

To change the order of default elements, specify their new positions in the [`settings.order`](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/settings.md#order) object. You can override positions for all elements or only for specific ones. Use **integer or float values** for precise placement.

Only the elements you specify in `settings.order` will be repositioned. All other elements will automatically adjust their positions relative to the changes.

#### Basic reordering

If you want `placeholders` to appear after `imageSelectorFilters` and `texts` to follow immediately after `placeholders`:

```js
settings: {
  order: {
    placeholders: 3, // Moves 'placeholders' after 'imageSelectorFilters'.
    texts: 4         // Moves 'texts' after 'placeholders'.
  }
}
```

Resulting order:

```js
{
  header: 0,
  designVariants: 1,
  imageSelectorFilters: 2,
  placeholders: 3,
  texts: 4,
  toggles: 5,
  options: 6,
  quantity: 7,
  approvalCheckbox: 8,
  downloadButton: 9,
  finishButton: 10
}
```

#### Using float values

When reordering multiple elements, calculating the exact position can be complex. For example, if you want to move `quantity`, `options`, and `placeholders` but ensure `placeholders` stays after `imageSelectorFilters`:

```js
settings: {
  order: {
    quantity: 1.1,     // Moves 'quantity' after 'designVariants'.
    options: 1.2,      // Moves 'options' after 'quantity'.
    placeholders: 2.5  // Places 'placeholders' after 'imageSelectorFilters'.
  }
}
```

Float values (e.g., `1.1`, `2.5`) allow precise placement between default integer positions, avoiding the need to manually recalculate shifts for all elements.

#### Ordering elements within groups

You can configure the order of elements within specific groups, such as `designVariants`, `imageSelectorFilters`, `toggles`, `texts`, `placeholders`, and `options`. Since these groups can contain multiple elements, you may need to define their internal order.

To define group-specific configuration:

| Group                  | Configuration Method                                         |
|------------------------|--------------------------------------------------------------|
| `imageSelectorFilters` | Configure the order in `settings.imageSelector.filters`.     |
| `toggles`, `options`   | Set the order in the **Back Office**.                        |
| `texts`, `placeholders`| Define the order in the **Layers** (say, in Template Editor).|
| `designVariants`       | **Order cannot be configured** for this group.               |

## Adding custom slots

You can also insert custom slots using the `order.slots` object. First, declare the slot in the DOM.

```html
<au-simple-editor>
  <div price-info>Price Info</div>
</au-simple-editor>
```

Then, specify its position in the `order`.

```js
settings: {
  order: {
    slots: {
      "price-info": 7.5  // Places the slot between 'quantity' and 'approvalCheckbox'.
    }
  }
}
```

## Custom order for specific elements

The `customOrder` object allows you to define the sequence of individual elements (not categories) and slots by name. Specify the `order` (position) and `items` (element names).

```js
settings: {
  order: {
    customOrder: {
      order: 1,  // Places the group after 'designVariants'.
      items: ["Hair color", "Hair type", "Skin color", "Body type"]
    }
  }
}
```

The `order` property is optional. If omitted, the `items` will be placed in the specified sequence starting from the position of the first valid element in the list. For example, if **Hair color** (an `imageSelectorFilters` element) exists, the entire sequence will be inserted into the `imageSelectorFilters` group, and the remaining elements will shift accordingly.