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

Структура шапки — линии и секции

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

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

Секции занимают определенное положение в линии и отвечают за выравнивание компонентов внутри.

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

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

Настройка стиля отображения линий

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

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

Основная линия

Это самая широкая линия шапки, в которой обычно расположены крупные элементы — логотип, график работы, блок контактов, корзина, поле поиска и т.д.

Настраивается в Редактор дизайна → Шапка сайта → вкладка Основная линия шапки.

Верхняя линия

Настраивается в Редактор дизайна → Шапка сайта → вкладка Верхняя линия.

Нижняя линия

Настраивается в Редактор дизайна → Шапка сайта → вкладка Нижняя линия.

Настройка элементов интерфейса в структуре шапки

Включать и выключать элементы интерфейса в шапке, а также изменять их расположение в шапке можно в Редактор дизайна → Шапка сайта во вкладке Структура шапки.

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

Особенности центральных секций основной линии

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

Элементы в одинарной центральной секции будут выравниваться по центру.

Перемещение и включение элементов

Если вы хотите изменить расположение отдельного элемента в шапке, просто перетащите его в нужную секцию и сохраните изменения.

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

Стиль элемента интерфейса в шапке

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

Перечень всех возможных элементов в шапке сайта

Больше примеров различной компоновки шапки, визуального оформления линий и расположения элементов вы можете увидеть в нашей Галерее дизайнов.

Все доступные элементы шапки сайта:

Навигационное меню — навигация по служебным информационным страницам магазина
Социальные сети — блок ссылок на ваши аккаунты в соцсетях, добавить аккаунт можно в Общие настройки → Соцсети
Переключатель языка — смена языка сайта
Переключатель валюты — доступен, если на сайте настроены разные валюты, добавить валюту можно в Товары → Курсы валют
Сравнение товаров — переход на страницу сравнения товаров
Избранное — переход на страницу с товарами, добавленными в избранное
Личный кабинет — меню личного кабинета покупателя
Логотип — добавить логотип можно в Общие настройки → Логотипы
Меню категорий каталога — меню навигации по страницам каталога с товарами
Слоган — короткий текст в шапке магазина, добавить слоган можно в Общие настройки → Информация о магазине
Контактная информация — блок контактов, которые заполнены в
Режим работы — график работы магазина, заполняется в
Корзина — переход к корзине с товарами