Custom field order

• Last updated on December 22, 2025
• •
• 3 minutes to read

For flexible customization, the editor supports configurable element ordering. You can define the sequence of elements—both default and custom—via the 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
imageSelectorFilter	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 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 imageSelectorFilter and texts to follow immediately after placeholders:

settings: {
  order: {
    placeholders: 3,  // Moves 'placeholders' to position 3, shifting 'toggles' to 4.
    texts: 4          // Moves 'texts' to position 4, shifting 'toggles' to 5.
  }
}

Resulting order:

{
  header: 0,
  designVariants: 1,
  imageSelectorFilter: 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 imageSelectorFilter:

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

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 (BO).
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.

<au-simple-editor>
  <div slot="price-info">Price Info</div>
</au-simple-editor>

Then, specify its position in the order.

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).

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.