---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://yandex.ru/support/kit/ru/site-editor/custom-sections/json-shema.md
  - href: https://yandex.ru/support/kit/ru/site-editor/custom-sections/json-shema.md
    type: text/markdown
    title: Markdown version
  - href: https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010




# JSON Schema

**JSON Schema** — это стандарт для описания структуры JSON-данных. Позволяет валидировать, документировать и генерировать JSON-объекты.

Для созданных секций используйте JSON Schema, опишите настройки, которые можно будет задавать при добавлении/редактировании через конструктор.

## Базовая структура

```json
{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    }
  }
}
```

## Основные поля

### Однострочный текст

Добавляет однострочное текстовое поле. Позволяет администраторам магазина изменять небольшой текстовый контент без редактирования кода.

JSON Schema:

```json showLineNumbers
{
  "type": "string",
  "title": "Название поля",
  "default": "Значение по умолчанию"
}  
```

{% cut "Внешний вид" %}

![](../../_images/tabsections-1.png =500x)

{% endcut %}

### Многострочный текст

Добавляет многострочное текстовое поле. Позволяет администраторам магазина изменять текстовый контент без редактирования кода.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/TextArea",
  "title": "Описание",
  "default": "Оплата частями в Сплит"
}  
```

{% cut "Внешний вид" %}

![](../../_images/tabsections-2.png =500x)

{% endcut %}

### Выпадающий список

Добавляет поле c выпадающим списком доступных вариантов. Кроме стандартных атрибутов `select` используются дополнительные:


#|
|| **Атрибут** | **Описание** | **Обязательный** ||
|| **enum** | Массив доступных значений. | Да ||
|| **options** | Словарь соответствия значений и заголовков. | Нет ||
|#

JSON Schema:

```json showLineNumbers
{
  "type": "string",
  "default": "primary",
  "title": "Внешний вид шапки",
  "enum": ["none", "transparent"],
  "options": {
    "none": "Непрозрачная",
    "transparent": "Прозрачная"
  }
}  
```

{% cut "Внешний вид" %}

![](../../_images/tabsections-3.png =500x)

{% endcut %}

### Число

Добавляет поле с ползунком для числового ввода. Кроме стандартных атрибутов `range` используются дополнительные:


#|
|| **Атрибут** | **Описание** | **Обязательный** ||
|| **min** | Минимальное значение. | Да ||
|| **max **| Максимальное значение. | Да ||
|| **step** | Размер шага между соседними значениями. По умолчанию `1`. | Нет ||
|| **unit** | Единица измерения. Например, можно указать px для размера шрифта. | Нет ||
|#

JSON Schema:

```json showLineNumbers
{
  "type": "number",
  "unit": "шт.",
  "step": 2,
  "title": "Количество отображаемых фотографий",
  "default": 4,
  "maximum": 12,
  "minimum": 2
} 
```

{% cut "Внешний вид" %}

![](../../_images/tabsections-4.png =500x)

![](../../_images/tabsections-5.png =500x)

{% endcut %}

### Переключатель

Добавляет поле для переключения Boolean значений.

JSON Schema:

```json showLineNumbers
{
  "type": "boolean",
  "title": "Закреплять шапку при скролле"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-6.png =500x)

![](../../_images/tabsections-7.png =500x)

{% endcut %}

 

## Специальные настройки

### Изображение

Добавляет поле для выбора файла с картинкой. Выбранные изображения автоматически нарезаются под требуемые размеры.

Используется для выбора логотипов, иконок, обложек и прочего.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/ImageModel",
  "title": "Ссылка"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-8.png =500x)

{% endcut %}

### Видео

Добавляет поле для выбора и загрузки видео, которое после автоматически оптимизируется.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/VideoModel",
  "title": "Видео"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-8.png =500x)

{% endcut %}

### Ссылка

Добавляет поле для выбора ссылки. Поддерживается ввод внешних URL-адресов или выбор предсозданных страниц.

Можно использовать для выбора URL-адреса который будет использоваться для перехода по кнопке.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/LinkSource",
  "title": "Ссылка"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-9.png =500x)

{% endcut %}

### Rich-текст

Добавляет многострочное текстовое поле для rich-контента.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/MarkdownContent",
  "title": "Текст"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-10.png =500x)

{% endcut %}

### Меню

Добавляет поле для выбора предсозданного меню сайта.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/MenuId",
  "title": "Меню"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-11.png =500x)

{% endcut %}


### Цвет

Добавляет поле для выбора цвета.

Используйте для выбора цвета различных элементов секций, например, как цвет вспомогательное текста.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/ThemeColor",
  "title": "Цвет",
  "default": "#6b098B"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-12.png =500x)

{% endcut %}

### Коллекция товаров

Добавляет поле для выбора предсозданной коллекции товаров.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/ProductsSource",
  "title": "Товары"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-13.png =500x)

{% endcut %}

### Цветовая схема

Добавляет поле для выбора предсозданной палитры сайта.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/Palette",
  "title": "Палитра цветов"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-14.png =500x)

{% endcut %}

### Горизонтальный отступ секции

Добавляет поле для выбора горизонтального отступа секций.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/SectionHPadding",
  "title": "Отступ по краям на десктопе"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-15.png =500x)

![](../../_images/tabsections-16.png =500x)

{% endcut %}

### Горизонтальный отступ на телефоне

Добавляет поле для выбора горизонтального отступа секций на телефоне.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/SectionHPaddingTouch",
  "title": "Отступ по краям на телефоне"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-17.png =500x)

![](../../_images/tabsections-18.png =500x)

{% endcut %}

### Вертикальный отступ секции

Добавляет поле для выбора вертикального отступа секций.

JSON Schema:

```json showLineNumbers
{
  "$ref": "#/definitions/SectionVPadding",
  "title": "Отступ над секцией"
}  
```

{% cut " Внешний вид " %}

![](../../_images/tabsections-19.png =500x)

{% endcut %}

### Товар

Добавляет поле для выбора конкретного товара (выбор карточки не поддерживается). При выборе возвращает три значения:

`variantId` — ID товара;
`cardId` — ID карточки товара;
`name` — название товара.

JSON Schema:

```json showLineNumbers
{
"$ref": "#/definitions/ProductVariant",
"title": "Товар"
}
```

## Модули

В Яндекс KITᵝ нет настройки для массивов. Для создания независимых и/или повторяющихся внутри секций блоков настроек используется специальное свойство `modules`.

Модули в Яндекс KITᵝ — это инструмент для создания динамических, повторяющихся блоков контента с собственными настройками. Они дают контент-менеджерам возможность редактировать содержимое страниц самостоятельно, без помощи разработчиков, при этом дизайн и структура данных остаются едиными.

### Базовая структура модулей

JSON Schema:

```json showLineNumbers
{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "modules": {
      "type": "array",
      "title": "Кастомный модуль",
      "items": {
        "type": "object",
        "required": [
          "description",
          "title"
        ],
        "properties": {
          "title": {
            "type": "string",
            "title": "Заголовок"
          },
          "description": {
            "$ref": "#/definitions/TextArea",
            "title": "Описание"
          }
        }
      }
    }
  }
}
```

{% cut "Пример шаблона" %}

```handlebars showLineNumbers
{{#each settings.modules as |module|}}
    <ya-kit-v-stack gap="100" class="item">
        <ya-kit-text size="md">
            {{module.title}}
        </ya-kit-text>
        <ya-kit-text>
            {{module.description}}
        </ya-kit-text>
    </article>
{{else}}
    <ya-kit-text>Модули не добавлены!</ya-kit-text>
{{/each}}
```

{% endcut %}

{% cut "Внешний вид" %}

**Внешний вид в списке секций:**

![](../../_images/tabsections-20.png =500x)

&nbsp;

**Форма с настройками модуля:**

![](../../_images/tabsections-21.png =500x)

{% endcut %}

<!-- source: ru/_includes/support.md -->


## Обратиться в службу поддержки


[Написать в чат](https://yandex.ru/chat/#/user/6c041b05-07a4-99cc-79be-8670b7aff93d){.button}

[Написать письмо](https://yandex.ru/support/kit/ru/feedback.md){.button}

[Яндекс KITᵝ в Telegram](https://t.me/kityandex_support_bot){.button}

[Яндекс KITᵝ в МАКС](https://max.ru/yandex_kit_bot){.button}
<!-- endsource: ru/_includes/support.md -->