Перейти к содержимому
Помощь
Разделы и блоки конструктора

Как настроить шапку магазина (логотип, меню, поиск, корзина, фиксированная и прозрачная шапка)?

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

4 минуты чтения

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

Где это найти

Откройте конструктор и нажмите на шапку в предпросмотре или выберите Шапка на вкладке Секции. Чтобы добавить шапку, нажмите Добавить новую секцию и выберите Шапка в группе Макет. На странице может быть одна шапка, на любой странице. Каждая страница хранит свою копию, поэтому после завершения используйте Применить ко всем страницам, см. Секции и блоки.

В шапке всегда одни и те же пять блоков: Логотип, Меню, Поиск, Корзина и Локализация. Их нельзя добавлять, удалять или переставлять. Вы размещаете их с помощью их собственных настроек Позиция и Ряд.

Настройки шапки

  • Фиксированная шапка: При прокрутке вверх скрывает шапку, когда покупатель прокручивает вниз, и возвращает ее при прокрутке вверх. Всегда держит ее вверху. Фиксированный с уменьшенным логотипом держит ее вверху и делает меньше (меньше отступов, меньше логотип), как только покупатель начинает прокручивать. Никогда позволяет ей уезжать вместе со страницей.
  • Ширина: Страница оставляет содержимое в пределах ширины страницы, Полный растягивает его от края до края.
  • Цветовая схема: цвета фона, текста и ссылок шапки.
  • Прозрачная шапка: убирает фон шапки, чтобы сквозь нее было видно изображение главного баннера. См. ниже.
  • Отступы (сверху, слева, справа, снизу) и вкладка Пользовательский CSS.

Прозрачная шапка

Это работает, только если Главный баннер является первой видимой секцией сразу под шапкой, потому что шапка берет цветовую схему баннера для своего текста и иконок. Она убирает фон, границу и тень и слегка размывает то, что находится позади. Когда покупатель прокручивает ниже баннера, шапка возвращает свои цвета. Панель поиска и список стран сохраняют собственные цвета шапки. Настройки главного баннера описаны в статье Секция главного баннера.

Логотип

  • Логотип: выберите изображение логотипа. Без изображения название магазина показывается текстом.
  • Позиция: слева, по центру или справа. Ширина и Высота: размер области логотипа в пикселях.
  • Отступы на ПК: пространство вокруг логотипа, только на компьютерах.

При щелчке логотип открывает главную страницу. Чтобы это отключить, включите Запретить переход на главную по клику на логотип, см. Настройки запретов.

Меню

Выберите одно из ваших меню в поле Меню. Остальные настройки появятся после выбора меню. Меню создаются так, как описано в статье Как создать меню навигации и добавить их в шапку и подвал?.

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

Поиск, корзина и локализация

  • Поиск: иконка поиска, которая открывает поле поиска. Задайте Позиция (слева или справа) и Ряд.
  • Корзина: иконка корзины со счетчиком товаров. Тип корзины: Выдвижная панель (боковая панель), Выпадающий список (мини-корзина под иконкой) или Страница (открывает страницу корзины). Цветовая схема задает цвета выдвижной панели или выпадающего списка. У выдвижной панели и выпадающего списка есть также переключатель Полоса бесплатной доставки, см. Как работает полоса бесплатной доставки?.
  • Локализация: кнопка со списком ваших рынков, чтобы покупатели могли сменить страну. Включите Выбор страны, чтобы показать ее. Показать флаги показывает на кнопке флаг текущей страны, иначе иконку глобуса. Задайте Позиция и Ряд.

Полезно знать

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

Всё ещё нужна помощь?

Напишите нам, и мы вам ответим.

Свяжитесь с нами