Редактор сайта в Яндекс KIT^β: как создать интернет-магазин без разработки

Кому подходит редактор сайта Яндекс KIT^β

Инструмент доступен индивидуальным предпринимателям и юридическим лицам. Он полезен:

• Начинающим предпринимателям, которые хотят запустить онлайн‑продажи
• Владельцам бизнеса, которые ищут простой способ создать интернет-магазин без разработки
• Селлерам, которые планируют продавать товары за пределами маркетплейсов
• Брендам и производителям, которые реализуют физические товары

В чём основные преимущества инструмента

• Доступность — запуск и использование возможностей редактора бесплатны.
• No-code платформа — создать интернет-магазин на Яндекс KIT^β можно без разработки.
• Тематические шаблоны — доступен выбор из готовых шаблонов дизайна и удобная настройка в редакторе. Изменения в дизайне отображаются в режиме реального времени.
• Адаптивность — редактор позволяет контролировать и корректировать отображение сайта на мобильных устройствах.
• Кастомизация — доступна гибкая настройка витрины: блоков (секций) и карточек товаров.
• Рич-контент — поддерживается расширенное наполнение карточек товаров с помощью мультимедиа.

Как начать работу в редакторе сайта

Войдите в личный кабинет Яндекс KIT^β. Перед работой в редакторе сайта рекомендуем загрузить товары в каталог и заполнить информацию о них, настроить коллекции для тематических подборок. Далее — добавить информацию о компании и логотип. Для удобной навигации пользователей также рекомендуем настроить меню сайта.

После подготовки откройте раздел «Редактор сайта» и выберите шаблон. В конструкторе Яндекс KIT^β доступно девять вариантов для разных категорий товаров.

Чтобы посмотреть шаблон, нажмите «Предпросмотр» — откроется демоверсия сайта на Яндекс KIT^β с загруженными товарами, креативами и рабочими элементами.

После выбора шаблона можно перейти к настройке сайта. В редакторе вы управляете внешним видом и структурой интернет-магазина: задаёте стиль витрины, настраиваете основные страницы и собираете их из секций.

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

Боковая панель редактора содержит три раздела:

1. «Тема». Включает общие настройки сайта: цвета, шрифты, отступы, сетку.
2. «Страницы». Главная, категории, карточки товаров, корзина. В этом разделе можно добавлять новые страницы и редактировать существующие.
3. «Секции». Раздел позволяет управлять блоками внутри страниц: шапкой, слайд-шоу, полкой товаров, подвалом и так далее.

Как настроить внешний вид сайта

В меню «Настройки внешнего вида» можно задать базовые параметры дизайна сайта: цвета, шрифты, оформление карточек товаров, элементов навигации, карточек коллекций и корзины. Эти настройки помогают выдержать единый визуальный стиль интернет-магазина и адаптировать витрину под бренд.

Цвета и работа с палитрами

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

Типографика и оформление текста

В разделе с типографикой можно выбрать шрифт или загрузить собственный, настроить выравнивание заголовков и изменить размер текста. Это помогает сохранить читаемость и сделать оформление сайта более цельным.

Карточка товара

В разделе «Карточка товара» настраивается внешний вид товаров в каталоге и на витрине. Можно включить смену изображения при наведении, настроить порядок элементов, размер и начертание цены и названия товара, отображение скидок и их цветовое оформление. Дополнительно можно изменить фон карточек, включить обводку и настроить отображение кнопок на странице каталога и в списках товаров.

В блоке «Фотографии» настраивается общий принцип отображения изображений на сайте: пропорции, затемнение и способ заполнения рамки. Например, фото может сохранять исходные пропорции или автоматически заполнять доступную область.

Эти настройки помогают привести изображения к единому виду, особенно если в каталоге используются фотографии разного формата.

Элементы навигации

В одноимённом разделе можно настроить внешний вид переключателей: выбрать тип иконок, задать цвет при наведении и включить прозрачный фон. Это помогает аккуратно встроить навигацию в общий дизайн сайта.

Карточки коллекций

В разделе «Карточки коллекций» настраиваются пропорции фотографий для тематических подборок товаров — например, «Новинки», «Хиты продаж» или «Скидки». Так коллекции будут выглядеть единообразно на витрине.

Корзина в настройках внешнего вида

В настройках внешнего вида вы можете задать, как пользователь будет добавлять товары в заказ. Например, включить уточнение характеристик товара при добавлении в корзину из карточек товаров.

Также можно выбрать, что будет показываться после добавления товара: ничего, уведомление или превью корзины. Это помогает настроить сценарий покупки так, чтобы пользователь понимал, что товар добавлен, и мог быстрее перейти к оформлению заказа.

Дополнительные возможности

В этом разделе можно включать и отключать отображение избранных, отсутствующих товаров и бейджей, а ещё — управлять показом скидок от Яндекс Пэй и оплатой в Сплит.

Как управлять страницами и содержимым магазина

Вкладка «Страницы» позволяет добавлять новые страницы, а также товары, категории и коллекции в магазин.

В редакторе сайта страницы и секции связаны между собой.

Страницы задают структуру интернет-магазина: главная, карточка товара, категория, коллекция, поиск, корзина и другие разделы.

Секции помогают собрать содержание каждой страницы из отдельных блоков: шапки, слайд-шоу, полки товаров, подвала и других элементов.

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

Страницы

В редакторе можно настроить внешний вид отдельных страниц:

• Создавать уникальные шапки для страницы товаров.
• Управлять форматом отображения. Двухколоночный подходит для эмоциональных товаров — одежды, косметики, а трёхколоночный — для электроники, товаров для дома.
• Задавать размер и стиль заголовков.
• Настраивать отображение цены. Можно использовать разные размеры шрифта и цвета для выделения акций.
• Указывать характеристики товара — цвет, размер, материал.
• Добавлять кнопки взаимодействия — «В корзину», «Добавить в избранное» — и бейджи.

Кроме того, в редакторе сайта в Яндекс KIT^β удобно работать с категориями и коллекциями:

• Категории задают структуру каталога. Например, в магазине fashion-ритейлера это могут быть «Одежда» и «Обувь», а у продавца бытовой техники и электроники — «Крупная бытовая техника», «Электроника» и другие разделы.
• Коллекции позволяют собирать товары в тематические подборки внутри каталога. Например, «Хиты продаж», «Скидки», «Новая коллекция». Они помогают покупателю быстрее сориентироваться в ассортименте, а бизнесу — расставить акценты на нужных товарах.

Секции

Секции — это блоки, из которых состоят страницы. С их помощью можно настраивать структуру и содержание отдельных частей сайта: шапки, слайд-шоу, полки товаров, подвала и других элементов.

Все секции в редакторе сайта делятся на родительские и дочерние.

Родительская секция задаёт общие настройки для дочерних элементов. Например, в ней можно создать единую шапку для сайта и применять её на всех страницах. Дочерняя наследует настройки, но позволяет вносить изменения — например, сделать шапку непрозрачной только на странице товара.

Дочернюю секцию можно превратить в родительскую и повторно использовать блоки на разных страницах.

В редакторе сайта доступны секции:

• Полка товаров. Витрина, в которой отображаются карточки с товарами из выбранных категорий или коллекций. Можно настраивать количество карточек на полке, менять отступы и выбирать формат отображения: плитка или карусель.
• Слайд-шоу. В этой секции можно загружать изображения и видео, настраивать формат баннера, задавать настройки автоматического слайдера и добавлять подписи к слайдам, чтобы привлекать внимание к акциям.
• Страница корзины. В этом разделе настраиваются варианты отображения товаров, текст и оформление кнопок, информация о доставке и оплате, рекомендации товаров.

Рич-контент

Рич‑контент — это мультимедийные элементы, которые дополняют карточки товаров и делают витрину заметнее. В редакторе сайта можно загружать дополнительные фото, видео и 360‑градусные обзоры, добавлять слайдеры с вариантами цвета или размера. А также создавать секции с описанием, инструкциями и примерами использования.

Подвал сайта

В подвале, или футере, сайта размещают контакты, ссылки на соцсети, знак копирайта и юридическую информацию, а также навигацию по сайту.

Всеми этими компонентами также можно управлять в редакторе интернет-магазина.

Выводы

С помощью редактора сайта на Яндекс KIT^β можно быстро, бесплатно и без специальных навыков создать полноценный интернет‑магазин, готовый к приёму первых заказов.

Ключевые возможности, которые даёт инструмент:

• Создание сайта на Яндекс KIT^β без программирования. В интерфейсе редактора есть инструменты, которые позволяют собрать интернет-магазин с помощью настройки готовых блоков и секций.
• Настройка дизайна. Гибкая система стилизации помогает задавать общие настройки темы, например цвета и шрифты, и точечно корректировать оформление отдельных элементов.
• Быстрая вёрстка ключевых страниц. Использование готовых шаблонов и предустановленных секций ускоряет настройку главной страницы, каталога, карточек товаров и корзины.
• Адаптивный дизайн. Встроенные инструменты позволяют создать мобильную версию сайта и проверить её.
• Управление структурой. Категории и коллекции помогают задавать структуру каталога и расставлять акценты.
• Работа с повторяющимися элементами. Родительские и дочерние секции позволяют централизованно управлять общими блоками, такими как шапка или подвал.