# Design Editors

Design editors define the styling options merchants can adjust in the Instant Site Editor. Each editor maps to a specific design widget — color pickers, font selectors, background controls, and more.

### Overview <a href="#overview" id="overview"></a>

All design editors are created using factory functions from `@lightspeed/crane-api`:

```typescript
import { design } from '@lightspeed/crane-api';
```

| Type                            | Factory                | Purpose                                                    |
| ------------------------------- | ---------------------- | ---------------------------------------------------------- |
| [`TEXT`](#text)                 | `design.text()`        | Text styling (font, size, color, bold, italic, visibility) |
| [`BUTTON`](#button)             | `design.button()`      | Button appearance, size, shape, color, font                |
| [`IMAGE`](#image)               | `design.image()`       | Image overlay (color, gradient, or none)                   |
| [`TOGGLE`](#toggle)             | `design.toggle()`      | Boolean design toggle                                      |
| [`SELECTBOX`](#selectbox)       | `design.selectbox()`   | Design dropdown selection                                  |
| [`BACKGROUND`](#background)     | `design.background()`  | Background color or gradient                               |
| [`COLOR_PICKER`](#color-picker) | `design.colorPicker()` | Standalone color selection                                 |
| [`LOGO`](#logo)                 | `design.logo()`        | Logo styling (font, spacing, frame, capitalization)        |
| [`DIVIDER`](#divider)           | `design.divider()`     | Visual separator in the editor                             |
| [`INFO`](#info)                 | `design.info()`        | Informational text in the editor                           |
| [`ACCORDION`](#accordion)       | `design.accordion()`   | Collapsible group of design editors                        |

### Color Values <a href="#color-values" id="color-values"></a>

Several design editors accept color values. Colors can be:

* **Hex colors**: `'#RGB'`, `'#RRGGBB'`, or `'#RRGGBBAA'` format
* **Global colors**: Reference the store's global color palette:
  * `'global.color.title'`
  * `'global.color.body'`
  * `'global.color.button'`
  * `'global.color.link'`
  * `'global.color.background'`

#### Color Configuration Options <a href="#color-configuration-options" id="color-configuration-options"></a>

Several editors support these optional properties for controlling color selection:

| Property           | Type       | Description                                              |
| ------------------ | ---------- | -------------------------------------------------------- |
| `colors`           | `string[]` | Restricts the color picker to a specific set of colors   |
| `enableAlphaColor` | `boolean`  | Enables transparency (alpha channel) in the color picker |
| `enableAutoColor`  | `boolean`  | Enables the "auto" color option (uses global color)      |

### Global Text Sizes <a href="#global-text-sizes" id="global-text-sizes"></a>

Text size defaults can be a specific integer (pixels) or a reference to a global text size:

* `'global.textSize.title'`
* `'global.textSize.subtitle'`
* `'global.textSize.body'`

### TEXT <a href="#text" id="text"></a>

Text styling for headings, paragraphs, and other text content.

#### Properties <a href="#properties" id="properties"></a>

| Property            | Type        | Required | Description                               |
| ------------------- | ----------- | -------- | ----------------------------------------- |
| `label`             | `string`    | Yes      | Translation key for the editor label      |
| `colors`            | `string[]`  | No       | Restrict available colors                 |
| `sizes`             | `integer[]` | No       | Restrict available font sizes (each >= 1) |
| `enableAlphaColor`  | `boolean`   | No       | Enable transparency in color picker       |
| `enableAutoColor`   | `boolean`   | No       | Enable auto color option                  |
| `hideVisibleToggle` | `boolean`   | No       | Hide the visibility toggle in the editor  |
| `hideSize`          | `boolean`   | No       | Hide the size selector in the editor      |
| `defaults`          | `object`    | No       | Default values                            |

#### Defaults <a href="#defaults" id="defaults"></a>

| Property  | Type                | Required | Description                                          |
| --------- | ------------------- | -------- | ---------------------------------------------------- |
| `font`    | `string`            | No       | Font family                                          |
| `size`    | `integer \| string` | No       | Font size in pixels, or a global text size reference |
| `bold`    | `boolean`           | No       | Bold text                                            |
| `italic`  | `boolean`           | No       | Italic text                                          |
| `color`   | `string`            | No       | Hex color or global color reference                  |
| `visible` | `boolean`           | No       | Whether the element is visible                       |

#### Factory <a href="#factory" id="factory"></a>

```typescript
design.text({
  label: '$label.design.title_style',
  defaults: {
    font: 'global.fontFamily.heading',
    size: 'global.textSize.title',
    bold: true,
    italic: false,
    color: 'global.color.title',
    visible: true,
  },
})
```

### BUTTON <a href="#button" id="button"></a>

Button styling including appearance, size, shape, color, and font.

#### Properties <a href="#properties-1" id="properties-1"></a>

| Property            | Type       | Required | Description                          |
| ------------------- | ---------- | -------- | ------------------------------------ |
| `label`             | `string`   | Yes      | Translation key for the editor label |
| `colors`            | `string[]` | No       | Restrict available colors            |
| `enableAutoColor`   | `boolean`  | No       | Enable auto color option             |
| `enableAlphaColor`  | `boolean`  | No       | Enable transparency in color picker  |
| `hideVisibleToggle` | `boolean`  | No       | Hide the visibility toggle           |
| `hideSize`          | `boolean`  | No       | Hide the size selector               |
| `defaults`          | `object`   | No       | Default values                       |

#### Defaults <a href="#defaults-1" id="defaults-1"></a>

| Property     | Type      | Required | Description                                  |
| ------------ | --------- | -------- | -------------------------------------------- |
| `appearance` | `string`  | No       | `"SOLID"`, `"OUTLINE"`, or `"TEXT"`          |
| `size`       | `string`  | No       | `"SMALL"`, `"MEDIUM"`, or `"LARGE"`          |
| `shape`      | `string`  | No       | `"ROUND_CORNER"`, `"RECTANGLE"`, or `"PILL"` |
| `font`       | `string`  | No       | Font family                                  |
| `color`      | `string`  | No       | Hex color or global color reference          |
| `visible`    | `boolean` | No       | Whether the button is visible                |

#### Factory <a href="#factory-1" id="factory-1"></a>

```typescript
design.button({
  label: '$label.design.button_style',
  defaults: {
    appearance: 'SOLID',
    size: 'MEDIUM',
    shape: 'ROUND_CORNER',
    color: 'global.color.button',
    visible: true,
  },
})
```

### IMAGE <a href="#image" id="image"></a>

Image design controls for overlay effects.

#### Properties <a href="#properties-2" id="properties-2"></a>

| Property            | Type       | Required | Description                                          |
| ------------------- | ---------- | -------- | ---------------------------------------------------- |
| `label`             | `string`   | Yes      | Translation key for the editor label                 |
| `static`            | `boolean`  | No       | Must match the content IMAGE editor's `static` value |
| `colors`            | `string[]` | No       | Restrict available colors (hex only)                 |
| `enableAlphaColor`  | `boolean`  | No       | Enable transparency in color picker                  |
| `hideVisibleToggle` | `boolean`  | No       | Hide the visibility toggle                           |
| `defaults`          | `object`   | No       | Default values                                       |

#### Defaults <a href="#defaults-2" id="defaults-2"></a>

| Property  | Type                 | Required | Description                          |
| --------- | -------------------- | -------- | ------------------------------------ |
| `overlay` | `string`             | No       | `"COLOR"`, `"GRADIENT"`, or `"NONE"` |
| `color`   | `string \| string[]` | No       | Overlay color(s) — see rules below   |
| `visible` | `boolean`            | No       | Whether the image is visible         |

#### Overlay Color Rules <a href="#overlay-color-rules" id="overlay-color-rules"></a>

| Overlay             | Color Requirement                                            |
| ------------------- | ------------------------------------------------------------ |
| `"COLOR"`           | `color` is required and must be a single color value         |
| `"GRADIENT"`        | `color` is required and must be an array of exactly 2 colors |
| `"NONE"` or not set | `color` must not be defined                                  |

#### Factory <a href="#factory-2" id="factory-2"></a>

```typescript
design.image({
  label: '$label.design.hero_image',
  defaults: { overlay: 'COLOR', color: '#00000066' },
})
```

{% hint style="warning" %}
**Validation**

* The `static` flag must match between content and design `IMAGE` editors for the same field. Mismatch produces: *"Both content and design editor need to have same value for attribute static."*
* Invalid color/overlay combinations produce specific errors. For example, providing a single color when overlay is `GRADIENT` produces: *"color must be an array when overlay is GRADIENT."*
  {% endhint %}

### TOGGLE <a href="#toggle" id="toggle"></a>

Boolean design toggle for enabling or disabling design features.

#### Properties <a href="#properties-3" id="properties-3"></a>

| Property   | Type     | Required | Description                          |
| ---------- | -------- | -------- | ------------------------------------ |
| `label`    | `string` | Yes      | Translation key for the editor label |
| `defaults` | `object` | No       | Default values                       |

#### Defaults <a href="#defaults-3" id="defaults-3"></a>

| Property  | Type      | Required | Description          |
| --------- | --------- | -------- | -------------------- |
| `enabled` | `boolean` | No       | Default toggle state |

#### Factory <a href="#factory-3" id="factory-3"></a>

```typescript
design.toggle({
  label: '$label.design.enable_animation',
  defaults: { enabled: true },
})
```

### SELECTBOX <a href="#selectbox" id="selectbox"></a>

Dropdown selection for design options.

#### Properties <a href="#properties-4" id="properties-4"></a>

| Property      | Type     | Required | Description                          |
| ------------- | -------- | -------- | ------------------------------------ |
| `label`       | `string` | Yes      | Translation key for the editor label |
| `description` | `string` | No       | Translation key for description text |
| `options`     | `array`  | No       | Array of selectable options          |
| `defaults`    | `object` | No       | Default values                       |

Each option:

| Property | Type     | Required | Description                      |
| -------- | -------- | -------- | -------------------------------- |
| `value`  | `string` | No       | Option value                     |
| `label`  | `string` | No       | Translation key for option label |

#### Defaults <a href="#defaults-4" id="defaults-4"></a>

| Property | Type     | Required | Description            |
| -------- | -------- | -------- | ---------------------- |
| `value`  | `string` | No       | Default selected value |

#### Factory <a href="#factory-4" id="factory-4"></a>

```typescript
design.selectbox({
  label: '$label.design.layout_style',
  description: '$label.design.layout_style_desc',
  options: [
    { value: 'compact', label: '$label.options.compact' },
    { value: 'spacious', label: '$label.options.spacious' },
  ],
  defaults: { value: 'compact' },
})
```

### BACKGROUND <a href="#background" id="background"></a>

Background color or gradient controls.

#### Properties <a href="#properties-5" id="properties-5"></a>

| Property           | Type       | Required | Description                          |
| ------------------ | ---------- | -------- | ------------------------------------ |
| `label`            | `string`   | Yes      | Translation key for the editor label |
| `colors`           | `string[]` | No       | Restrict available colors            |
| `enableAlphaColor` | `boolean`  | No       | Enable transparency in color picker  |
| `enableAutoColor`  | `boolean`  | No       | Enable auto color option             |
| `defaults`         | `object`   | No       | Default values                       |

#### Defaults <a href="#defaults-5" id="defaults-5"></a>

| Property | Type                 | Required | Description                           |
| -------- | -------------------- | -------- | ------------------------------------- |
| `style`  | `string`             | No       | `"COLOR"` or `"GRADIENT"`             |
| `color`  | `string \| string[]` | No       | Background color(s) — see rules below |

#### Background Color Rules <a href="#background-color-rules" id="background-color-rules"></a>

| Style        | Color Requirement                                            |
| ------------ | ------------------------------------------------------------ |
| `"COLOR"`    | `color` is required and must be a single color value         |
| `"GRADIENT"` | `color` is required and must be an array of exactly 2 colors |

#### Factory <a href="#factory-5" id="factory-5"></a>

```typescript
// Solid color
design.background({
  label: '$label.design.section_background',
  defaults: { style: 'COLOR', color: '#FFFFFF' },
})

// Gradient
design.background({
  label: '$label.design.section_background',
  defaults: { style: 'GRADIENT', color: ['#FF0000', '#0000FF'] },
})
```

{% hint style="warning" %}
**Validation**

Invalid color/style combinations produce errors:

* *"color is required when style is GRADIENT"*
* *"color must be an array when style is GRADIENT"*
* *"color array must have exactly 2 items when style is GRADIENT"*
* *"color must be a single value when style is COLOR"*
  {% endhint %}

### COLOR\_PICKER <a href="#color-picker" id="color-picker"></a>

Standalone color picker for custom color settings that don't fit into other editor types.

#### Properties <a href="#properties-6" id="properties-6"></a>

| Property           | Type       | Required | Description                                                                                                                                            |
| ------------------ | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `label`            | `string`   | Yes      | Translation key for the editor label                                                                                                                   |
| `description`      | `string`   | No       | Translation key for optional helper copy the site editor shows with this color picker (placement and styling are defined by the editor, not the theme) |
| `colors`           | `string[]` | No       | Restrict available colors                                                                                                                              |
| `enableAlphaColor` | `boolean`  | No       | Enable transparency in color picker                                                                                                                    |
| `enableAutoColor`  | `boolean`  | No       | Enable auto color option                                                                                                                               |
| `defaults`         | `object`   | No       | Default values                                                                                                                                         |

#### Defaults <a href="#defaults-6" id="defaults-6"></a>

| Property | Type     | Required | Description                         |
| -------- | -------- | -------- | ----------------------------------- |
| `color`  | `string` | No       | Hex color or global color reference |

#### Factory <a href="#factory-6" id="factory-6"></a>

{% hint style="success" %}
Use **`design.colorPicker()`** from `@lightspeed/crane-api` so section design config stays aligned with validation and types.
{% endhint %}

```typescript
design.colorPicker({
  label: '$label.design.accent_color',
  description: '$label.design.accent_color_help',
  defaults: { color: '#FF5733' },
})
```

### LOGO <a href="#logo" id="logo"></a>

Logo styling controls, including text formatting, spacing, frame, and capitalization. This editor is specific to logo elements.

#### Properties <a href="#properties-7" id="properties-7"></a>

| Property   | Type        | Required | Description                               |
| ---------- | ----------- | -------- | ----------------------------------------- |
| `label`    | `string`    | Yes      | Translation key for the editor label      |
| `colors`   | `string[]`  | No       | Restrict available colors                 |
| `sizes`    | `integer[]` | No       | Restrict available font sizes (each >= 1) |
| `defaults` | `object`    | No       | Default values                            |

#### Defaults <a href="#defaults-7" id="defaults-7"></a>

| Property         | Type                | Required | Description                                          |
| ---------------- | ------------------- | -------- | ---------------------------------------------------- |
| `font`           | `string`            | No       | Font family                                          |
| `size`           | `integer \| string` | No       | Font size in pixels, or a global text size reference |
| `bold`           | `boolean`           | No       | Bold text                                            |
| `italic`         | `boolean`           | No       | Italic text                                          |
| `color`          | `string`            | No       | Hex color or global color reference                  |
| `visible`        | `boolean`           | No       | Whether the logo is visible                          |
| `spacing`        | `integer`           | No       | Letter spacing (1–9)                                 |
| `frame`          | `object`            | No       | Logo frame configuration                             |
| `capitalization` | `string`            | No       | `"none"`, `"all"`, or `"small"`                      |

The `frame` object:

| Property  | Type      | Required | Description                         |
| --------- | --------- | -------- | ----------------------------------- |
| `visible` | `boolean` | Yes      | Whether the frame is visible        |
| `width`   | `integer` | No       | Frame width (1–49)                  |
| `color`   | `string`  | No       | Hex color or global color reference |

#### Factory <a href="#factory-7" id="factory-7"></a>

```typescript
design.logo({
  label: '$label.design.logo_style',
  defaults: {
    font: 'global.fontFamily.heading',
    size: 24,
    bold: true,
    color: 'global.color.title',
    visible: true,
    spacing: 2,
    capitalization: 'none',
    frame: { visible: false },
  },
})
```

{% hint style="info" %}
**Mandatory for Headers**

The `LOGO` design editor is mandatory for sections with type `HEADER`. It must be defined with the key `logo`. See [Sections](/site-themes/develop-site-themes/sections.md)
{% endhint %}

### DIVIDER <a href="#divider" id="divider"></a>

Visual separator in the design editor UI. Does not affect storefront rendering.

#### Properties <a href="#properties-8" id="properties-8"></a>

| Property   | Type     | Required | Description                           |
| ---------- | -------- | -------- | ------------------------------------- |
| `label`    | `string` | Yes      | Translation key for the divider label |
| `defaults` | `object` | No       | Default values (empty, type only)     |

#### Factory <a href="#factory-8" id="factory-8"></a>

```typescript
design.divider({
  label: '$label.design.advanced_options',
})
```

### INFO

Informational text displayed in the design editor UI. Like DIVIDER, this does not affect storefront rendering — it provides guidance or contextual help to merchants within the design panel.

#### Properties

| Property      | Type     | Required | Description                              |
| ------------- | -------- | -------- | ---------------------------------------- |
| `label`       | `string` | Yes      | Translation key for the info title       |
| `description` | `string` | Yes      | Translation key for the info description |
| `button`      | `object` | No       | Optional link button in the editor       |

The `button` object:

| Property | Type     | Required | Description                     |
| -------- | -------- | -------- | ------------------------------- |
| `label`  | `string` | Yes      | Translation key for button text |
| `link`   | `string` | Yes      | URL (must be a valid URL)       |

#### Defaults

| Property       | Type     | Required | Description                              |
| -------------- | -------- | -------- | ---------------------------------------- |
| `description`  | `string` | No       | Default info text (translation key)      |
| `button`       | `object` | No       | Default button configuration (optional)  |
| `button.label` | `string` | No       | Default button text (translation key)    |
| `button.link`  | `string` | No       | Default button URL (must be a valid URL) |

#### Factory

```typescript
design.info({
  label: '$label.design.help_info',
  description: '$label.design.help_description',
  button: {
    label: '$label.design.learn_more',
    link: 'https://docs.example.com',
  },
})
```

### ACCORDION

Groups multiple design editors into collapsible accordion sections in the Instant Site Editor. Each accordion item has a label and contains a set of nested design editors. This is purely an organizational tool for the editor UI — it does not affect storefront rendering directly. The nested editors within the accordion are what control the actual styling. This is useful for organizing complex design panels with many settings into logical, expandable categories.

#### Properties

| Property   | Type      | Required | Description                                                                                                                         |
| ---------- | --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `items`    | `object`  | Yes      | Map of accordion items keyed by unique item identifier                                                                              |
| `sortable` | `boolean` | No       | If `true`, merchants can reorder items within this accordion group; when enabled, each item must define its own `positionFieldName` |

Each accordion item:

| Property            | Type     | Required    | Description                                                                                                                                  |
| ------------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`             | `string` | Yes         | Translation key for the accordion item header                                                                                                |
| `positionFieldName` | `string` | Conditional | Key of the editor within this item that stores the sort position for that item (required when the accordion's `sortable` property is `true`) |
| `editors`           | `object` | Yes         | Map of design editors within this accordion item                                                                                             |

Within an accordion item, the `editors` object can contain standard design editors such as `TEXT`, `BUTTON`, `IMAGE`, `TOGGLE`, `SELECTBOX`, `BACKGROUND`, `COLOR_PICKER`, `LOGO`, and `DIVIDER` (for example, `design.selectbox()`, `design.toggle()`, `design.divider()`, `design.text()`, etc.), but it cannot contain another `ACCORDION` or an `INFO` editor.

{% hint style="info" %}
Nested Editor Access Use the `useAccordionElementDesign` composable to access nested editor values from within your Vue component. See [UI Composables](/site-themes/develop-site-themes/sections/ui-composables.md) for details.
{% endhint %}

#### Factory

```typescript
design.accordion({
  sortable: true,
  items: {
    page_settings: {
      label: '$label.accordion.page_settings',
      positionFieldName: 'sortPosition',
      editors: {
        sortPosition: design.selectbox({
          label: '$label.sort_position.label',
          options: [
            { value: '1', label: '$label.sort_position.first' },
            { value: '2', label: '$label.sort_position.second' },
          ],
          defaults: { value: '1' },
        }),
        layout: design.selectbox({
          label: '$label.layout_style.label',
          options: [
            { value: 'GRID', label: '$label.layout_style.grid' },
            { value: 'LIST', label: '$label.layout_style.list' },
          ],
          defaults: { value: 'GRID' },
        }),
        showFilters: design.toggle({
          label: '$label.show_filters.label',
          defaults: { enabled: true },
        }),
      },
    },
    card_settings: {
      label: '$label.accordion.card_settings',
      positionFieldName: 'sortPosition',
      editors: {
        sortPosition: design.selectbox({
          label: '$label.sort_position.label',
          options: [
            { value: '1', label: '$label.sort_position.first' },
            { value: '2', label: '$label.sort_position.second' },
          ],
          defaults: { value: '1' },
        }),
        cardSize: design.selectbox({
          label: '$label.card_size.label',
          options: [
            { value: 'SMALL', label: '$label.card_size.small' },
            { value: 'LARGE', label: '$label.card_size.large' },
          ],
          defaults: { value: 'LARGE' },
        }),
        showBorder: design.toggle({
          label: '$label.show_border.label',
          defaults: { enabled: false },
        }),
      },
    },
  },
})
```

### Showcase Default Factories <a href="#showcase-default-factories" id="showcase-default-factories"></a>

When defining [showcase](/site-themes/develop-site-themes/sections/showcases.md) configurations, the `design.default.*()` factories create standalone default values:

```typescript
import { design } from '@lightspeed/crane-api';

design.default.text({ font: 'Arial', size: 18, bold: false, color: '#333333', visible: true });
design.default.button({ appearance: 'SOLID', size: 'MEDIUM', shape: 'PILL', color: '#000000', visible: true });
design.default.background({ style: 'COLOR', color: '#F5F5F5' });
design.default.image({ overlay: 'NONE' });
design.default.colorPicker({ color: '#FF0000' });
design.default.logo({ font: 'Arial', size: 20, color: '#000000', visible: true });
design.default.toggle({ enabled: true });
design.default.selectbox({ value: 'default' });
design.default.info({ description: '$label.showcase.info_text' });
design.default.accordion({
  items: {
    page_settings: {
      editors: {
        layout: design.default.selectbox({ value: 'GRID' }),
      },
    },
    card_settings: {
      editors: {
        showBorder: design.default.toggle({ enabled: false }),
      },
    },
  },
});
```

See [Showcases](/site-themes/develop-site-themes/sections/showcases.md) for usage in showcase files.

### Complete Example <a href="#complete-example" id="complete-example"></a>

```typescript
// settings/design.ts
import { design } from '@lightspeed/crane-api';

export default {
  title_style: design.text({
    label: '$label.design.title_style',
    defaults: {
      font: 'global.fontFamily.heading',
      size: 'global.textSize.title',
      bold: true,
      italic: false,
      color: 'global.color.title',
      visible: true,
    },
  }),
  description_style: design.text({
    label: '$label.design.description_style',
    defaults: {
      font: 'global.fontFamily.body',
      size: 'global.textSize.body',
      bold: false,
      color: 'global.color.body',
      visible: true,
    },
  }),
  button_style: design.button({
    label: '$label.design.button_style',
    defaults: {
      appearance: 'SOLID',
      size: 'MEDIUM',
      shape: 'ROUND_CORNER',
      color: 'global.color.button',
      visible: true,
    },
  }),
  section_background: design.background({
    label: '$label.design.background',
    defaults: { style: 'COLOR', color: '#FFFFFF' },
  }),
  hero_image: design.image({
    label: '$label.design.hero_image',
    defaults: { overlay: 'NONE' },
  }),
  help_info: design.info({
    label: '$label.design.help_info',
    description: '$label.design.help_description',
    button: {
      label: '$label.design.learn_more',
      link: 'https://docs.example.com',
    },
  }),
  styling: design.accordion({
    items: {
      page_settings: {
        label: '$label.accordion.page_settings',
        editors: {
          layout: design.selectbox({
            label: '$label.layout_style.label',
            options: [
              { value: 'GRID', label: '$label.layout_style.grid' },
              { value: 'LIST', label: '$label.layout_style.list' },
            ],
            defaults: { value: 'GRID' },
          }),
          showFilters: design.toggle({
            label: '$label.show_filters.label',
            defaults: { enabled: true },
          }),
        },
      },
    },
  }),
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ecwid.com/site-themes/develop-site-themes/sections/settings/design-editors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.