> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joinmarkt.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Section schema

> Reference for a section's schema.json, every setting type, presets, limits and templates.

Each section has a `schema.json` next to its design file. It declares the settings shown in Visual, the blocks a seller can add, and the presets offered in **Add section**.

```json src/sections/announcement/schema.json theme={null}
{
  "name": "Announcement",
  "category": "text",
  "description": "A short line above the header.",
  "settings": [
    { "type": "text", "id": "text", "label": "Text", "default": "Instant delivery on every order" },
    { "type": "url", "id": "link", "label": "Link" },
    { "type": "checkbox", "id": "dismissible", "label": "Can be closed", "default": false }
  ],
  "limit": 1,
  "templates": ["index", "page"],
  "presets": [{ "name": "Announcement" }]
}
```

## Section fields

**name** `string` *required*

Name shown in the editor.

**category** `string`

Group in **Add section**: `header`, `footer`, `hero`, `products`, `text`, `media`, `social`, `layout` or `main`.

**description** `string`

A short description of the section.

**settings** `Setting[]` *required*

The section's settings, in panel order. See [Setting types](#setting-types).

**blocks** `Block[]`

Block types the section accepts. See [Blocks and nesting](https://docs.joinmarkt.com/themes/blocks.md).

**max\_blocks** `number`

Most blocks of any type in one section.

**nested\_blocks** `boolean` (default: false)

Lets a block sit one level under another block, for example menu dropdowns.

**limit** `number`

Most instances of this section in one template.

**templates** `string[]`

Templates the section can be added to. `page` means every custom page. Omit it to allow every template.

**style\_defaults** `object`

Defaults for the shared style settings: `width`, `padding_top`, `padding_bottom`, `background`, `background_image`, `overlay`, `text_color`, `radius`, `animation`.

**presets** `Preset[]`

Starting points offered in **Add section**. A section without presets cannot be added from the editor. Use this for main sections such as the product page body.

## Presets

A preset sets the name shown in **Add section** and, optionally, starting settings, style and blocks.

```json theme={null}
"presets": [
  {
    "name": "Hero with two buttons",
    "settings": { "heading": "Instant delivery" },
    "style": { "padding_top": 120 },
    "blocks": [
      { "type": "button", "settings": { "label": "Shop now", "url": "/products" } },
      { "type": "button", "settings": { "label": "Reviews", "url": "/reviews" } }
    ]
  }
]
```

Every block type in a preset must be declared in `blocks`.

## Setting types

All value settings share these fields:

**type** `string` *required*

The setting type below.

**id** `string` *required*

Key in `settings`. Lowercase letters, digits and `_`, starting with a letter. Unique in the section.

**label** `string` *required*

Label in the settings panel.

**info** `string`

Help text under the control.

**default** `string | number | boolean`

Value used when nothing is stored.

### Text

| Type | Control | Value | Extra fields |
| - | - | - | - |
| `text` | One-line input | string | `placeholder` |
| `textarea` | Multi-line input | string | `placeholder` |
| `richtext` | Formatted text editor | HTML string | `placeholder` |
| `html` | HTML code field | HTML string | `placeholder` |
| `css` | CSS code field | string | `placeholder` |
| `url` | Link picker | string | `placeholder` |

```json theme={null}
{ "type": "text", "id": "heading", "label": "Heading", "default": "Welcome", "placeholder": "Your headline" }
```

> [!NOTE]
>
> In Liquid, output `richtext` and `html` values with `| raw`. Everything else is escaped.

### Media and style

| Type | Control | Value |
| - | - | - |
| `image` | Image picker | Image URL, empty for none |
| `video` | Video picker | Video URL, empty for none |
| `color` | Color picker | Hex color, empty for theme default |
| `font` | Font picker | Font id, for example `space-grotesk` |
| `icon` | Icon picker from the shared set | Icon name, empty for no icon |

```json theme={null}
{ "type": "color", "id": "accent", "label": "Accent", "default": "#3ddcf2" }
```

### Numbers and choices

| Type | Control | Value | Extra fields |
| - | - | - | - |
| `range` | Slider | number | `min`, `max` (required), `step`, `unit`; `default` is required and must be between `min` and `max` |
| `checkbox` | Switch | boolean | |
| `select` | Dropdown | string | `options` (required); `default` must be one of them |
| `radio` | Button group | string | `options` (required); `default` must be one of them |

```json theme={null}
{ "type": "range", "id": "columns", "label": "Columns", "min": 1, "max": 4, "step": 1, "default": 3 }
```

```json theme={null}
{
  "type": "select",
  "id": "align",
  "label": "Alignment",
  "options": [
    { "value": "start", "label": "Start" },
    { "value": "center", "label": "Center" }
  ],
  "default": "center"
}
```

### Store data pickers

| Type | Picks | Value |
| - | - | - |
| `category` | A store category | Category id, empty for all |
| `group` | A product group | Group id, empty for all |
| `product` | A product | Product id, empty for none |

```json theme={null}
{ "type": "product", "id": "product", "label": "Product" }
```

### Layout rows

`header` and `paragraph` add a heading or a line of text to the settings panel. They hold no value and have no `id`.

```json theme={null}
{ "type": "header", "content": "Buttons" }
```

```json theme={null}
{ "type": "paragraph", "content": "Leave a link empty to hide its button." }
```

## Values in templates

Template files store setting values by `id`. A missing value uses the schema default. A key that is not a setting, or a value of the wrong kind, is a warning: the storefront ignores it and uses the default. **Publish** offers **Remove unused values** to clean these up. See [Publish and updates](https://docs.joinmarkt.com/themes/publish-and-updates.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.