Как добавить кастомную секцию в Яндекс KIT
Показываем, как получить доступ к кастомным секциям, открыть редактор и добавить готовую секцию с HTML, CSS и JSON Schema.
Что понадобится
- Магазин на Яндекс KIT
- Доступ к кабинету владельца
- Готовый код секции: HTML, CSS и JSON Schema — его можно скопировать в каталоге KIT Apps
- Доступ к функции кастомных секций. Если пункта нет в редакторе, его запрашивают у поддержки Яндекс KIT
Пошаговая инструкция
Откройте чат поддержки
Зайдите в кабинет Яндекс KIT и нажмите на значок чата справа внизу.
Если в редакторе ещё нет кастомных секций, доступ к ним запрашивают именно через поддержку.
Напишите в поддержку и запросите доступ
Скопируйте текст ниже и отправьте его в чат Яндекс KIT.
После ответа поддержки функция кастомных секций должна появиться в редакторе сайта.
После получения доступа откройте редактор сайта
Когда доступ появится, откройте «Редактор сайта» и нажмите «Редактировать».
Если пункта кастомных секций пока нет, дождитесь ответа поддержки и откройте кабинет снова.
Перейдите в раздел «Секции» и нажмите «Добавить секцию»
Перейдите во вкладку «Секции» и нажмите «Добавить секцию».
Откроется список блоков, которые можно поставить на страницу.
Создайте новую секцию
В блоке «Кастомные секции» нажмите «Создать секцию», затем откройте редактор кода.
Этот блок появляется после того, как поддержка откроет доступ.
Вставьте HTML
Откройте вкладку HTML. Скопируйте HTML-код секции в KIT Apps и вставьте его в редактор.
Код секции копируется на её странице в каталоге KIT Apps — кнопка «Получить секцию».
Вставьте CSS
Перейдите во вкладку CSS. Скопируйте CSS-код секции в KIT Apps и вставьте его в редактор.
HTML и CSS — это разметка и оформление блока, они вставляются в разные вкладки.
Удалите скобки и вставьте JSON Schema
Откройте вкладку JSON Schema. В новом редакторе уже находятся фигурные скобки {}. Полностью удалите эти скобки, а затем вставьте вместо них JSON Schema, скопированный в KIT Apps.
JSON Schema задаёт поля настроек секции, которые появятся в панели редактора справа.
Важно: не вставляйте JSON Schema внутрь существующих скобок. Сначала удалите {} целиком и только после этого вставьте код — иначе возникнет ошибка.
Сохраните секцию и добавьте её на страницу
Сохраните изменения и выберите созданную секцию в списке «Кастомные секции».
Добавьте её на нужную страницу и настройте содержимое в панели справа.
Перед публикацией проверьте
- Как секция выглядит на компьютере и на телефоне
- Не выходит ли текст за границы блока
- Работают ли кнопки и ссылки
- Заполнены ли настройки секции в панели справа
- Не конфликтуют ли стили с остальной страницей
Частые вопросы
Коротко о доступе, коде секции и том, что проверить после установки.
Нужно ли обращаться в поддержку, чтобы создавать кастомные секции?
Да, если в редакторе нет блока «Кастомные секции». Доступ запрашивают в чате поддержки Яндекс KIT — готовый текст есть во втором шаге этой инструкции.
Какие части кода используются в кастомной секции?
Кастомная секция собирается из трёх частей: HTML — разметка блока, CSS — оформление, JSON Schema — поля настроек в редакторе. Их вставляют в соответствующие вкладки.
Можно ли изменить готовую секцию после установки?
После сохранения секцию добавляют на страницу и настраивают в панели справа: тексты, цвета и другие поля, которые заданы в JSON Schema. Как открыть код секции повторно, зависит от редактора Яндекс KIT.
Что делать, если секция выглядит неправильно?
Проверьте вид на компьютере и телефоне, не выходит ли текст за края, работают ли кнопки и ссылки, заполнены ли настройки и не конфликтуют ли стили с остальной страницей. Сравните результат с превью секции на KIT Apps.
Можно ли использовать одну секцию на нескольких страницах?
В этой инструкции секция создаётся в редакторе сайта и добавляется на страницу. Можно ли подключить ту же секцию к другим страницам, лучше проверить в редакторе Яндекс KIT или уточнить в поддержке.
