Главная/Документация/Сайт/banner

banner

Баннеры

Баннеры — это раздел административного кабинета, в котором можно создавать информационные и рекламные сообщения для витрины магазина.

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

Для каждого баннера можно настроить содержимое, изображение, оформление, расположение на странице и период показа.

Редактирование баннера
Настройка баннера магазина

Баннер отображается поверх содержимого витрины и не требует изменения шаблона или Custom CSS.

Расположение баннера

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

Доступно девять вариантов:

  1. Сверху слева
  2. Сверху
  3. Сверху справа
  4. Слева
  5. Центр
  6. Справа
  7. Снизу слева
  8. Снизу
  9. Снизу справа

Положение можно выбрать кнопками или изменить прямо в живом предпросмотре, перетащив баннер в нужную область.

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

Перед публикацией рекомендуется проверить положение баннера не только на компьютере, но и на мобильном устройстве.

Содержимое

В блоке Содержимое настраивается информация, которая будет отображаться внутри баннера.

Заголовок

Основной заголовок баннера.

Например:

Глобальное обновление

или:

Скидки до конца недели

Текст

Дополнительное описание.

Например:

Глобальное обновление на сервере

или:

До воскресенья действует скидка 20% на все наборы

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

Текст кнопки

Текст кнопки внутри баннера.

Например:

Подробнее

Перейти

Залетаем

Ссылка кнопки

Ссылка, которая откроется после нажатия на кнопку.

Пример:

https://example.ru/products

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

  • к определённому товару;
  • в категорию магазина;
  • на страницу акции;
  • в Discord;
  • в Telegram;
  • на другую страницу проекта.

Перед публикацией обязательно проверьте ссылку кнопки. Неверная ссылка может привести пользователя на несуществующую страницу.

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

К баннеру можно добавить изображение.

После загрузки изображение отображается в настройках баннера.

Для уже загруженного изображения доступны действия:

  • Заменить — загрузить другое изображение;
  • Удалить — убрать изображение из баннера.
Изображение баннера
Настройка изображения баннера

Изображение необязательно. Баннер можно использовать только с текстом и кнопкой.

Оформление

В блоке Оформление выбирается визуальный стиль баннера.

Доступны готовые варианты:

  • Информация
  • Успех
  • Внимание
  • Важное
  • Свои цвета

Готовые стили позволяют быстро подобрать оформление под назначение уведомления.

Например:

  • Информация — обычное информационное сообщение;
  • Успех — положительное событие или успешное действие;
  • Внимание — уведомление, на которое желательно обратить внимание;
  • Важное — критически важное сообщение.

Свои цвета

Если стандартные варианты не подходят под оформление проекта, выберите Свои цвета.

После этого можно самостоятельно указать:

  1. Цвет фона

    Основной цвет баннера.

  2. Цвет текста

    Цвет заголовка, текста и элементов баннера.

Пример:

Цвет фона: #178A57
Цвет текста: #FFFFFF

При выборе собственных цветов следите за контрастом. Текст должен хорошо читаться на фоне баннера.

Показ на сайте

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

Начало показа

Дата и время, начиная с которых баннер должен отображаться.

Если поле оставить пустым, баннер начнёт действовать сразу после включения.

Окончание показа

Дата и время, после которых баннер перестанет отображаться.

Если поле оставить пустым, ограничение по дате окончания не применяется.

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

Это удобно, если вы заранее создаёте баннер для:

  • начала акции;
  • вайпа;
  • обновления сервера;
  • технических работ;
  • праздничного события.

Частота показа

Параметр Частота показа определяет, как часто баннер будет показываться посетителю.

Например, можно использовать режим постоянного отображения, если сообщение должно оставаться на экране всё время.

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

Разрешить посетителю закрывать баннер

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

Если настройка включена, посетитель сможет закрыть баннер.

Если выключена — баннер останется на экране в соответствии с настройками его показа.

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

Для действительно важных уведомлений эту возможность можно отключить.

Живой предпросмотр

В правой части редактора расположен Живой предпросмотр.

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

  • расположение баннера;
  • его размер;
  • выбранные цвета;
  • текст;
  • кнопку;
  • изображение;
  • то, насколько баннер перекрывает остальные элементы сайта.
Живой предпросмотр баннера
Предварительный просмотр баннера на витрине

Баннер в предпросмотре можно перемещать между доступными зонами страницы.

Живой предпросмотр позволяет подобрать положение баннера ещё до его публикации на сайте.

Включение баннера

В нижней части редактора находится переключатель Баннер включён.

Если переключатель включён — баннер может отображаться пользователям с учётом остальных настроек показа.

Если выключен — баннер сохраняется в системе, но не отображается на витрине.

Это удобно, если баннер нужно подготовить заранее.

Как создать баннер

  1. Откройте раздел Баннеры.
  2. Создайте новый баннер.
  3. Выберите его расположение.
  4. Добавьте заголовок и текст.
  5. При необходимости настройте кнопку и ссылку.
  6. Загрузите изображение.
  7. Выберите готовое оформление или задайте свои цвета.
  8. Настройте даты показа.
  9. Выберите частоту показа.
  10. Определите, сможет ли пользователь закрыть баннер.
  11. Проверьте результат через Живой предпросмотр.
  12. Включите баннер.
  13. Нажмите Сохранить.

Примеры использования

Уведомление об обновлении

Заголовок: Обновление сервера

Текст:
Установлено глобальное обновление. Ознакомьтесь со списком изменений.

Кнопка:
Подробнее

Баннер акции

Заголовок: Скидка 20%

Текст:
До конца недели действует скидка на все наборы.

Кнопка:
Перейти к товарам

Технические работы

Заголовок: Технические работы

Текст:
Сегодня с 03:00 до 04:00 возможны временные перебои в работе магазина.

Для такого сообщения можно использовать оформление Внимание или Важное.

Рекомендации

  1. Не размещайте слишком много баннеров одновременно.
  2. Используйте короткие заголовки.
  3. Не перегружайте баннер большим количеством текста.
  4. Добавляйте кнопку только тогда, когда пользователю действительно нужно куда-то перейти.
  5. Подбирайте оформление в зависимости от важности сообщения.
  6. Используйте даты показа для временных акций и событий.
  7. Проверяйте баннер в живом предпросмотре.
  8. Обязательно проверяйте отображение на мобильных устройствах.

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

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