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