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

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

На малюнку нижче ви можете побачити схематичне зображення шапки на сайті в Хорошопі.

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

Секції займають певне положення в лінії та відповідають за вирівнювання компонентів усередині.

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

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

Налаштування стилю відображення ліній

Для кожної лінії шапки можна налаштувати її візуальний стиль: висоту, фон, колір елементів, відступи тощо. Всі доступні налаштування можна побачити на відповідній вкладці.

На скріншотах нижче можна побачити налаштування шапки одного з дизайнів з нашої галереї дизайнів. У ній можна знайти й інші варіанти компонування шапки.

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

Це найширша лінія шапки, в якій зазвичай розташовані великі елементи — логотип, графік роботи, блок контактів, кошик, поле пошуку тощо.

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

Верхня лінія

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

Нижня лінія

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

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

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

Тут ми наведемо приклад розташування елементів, яке відповідає шапці в прикладі. Деякі елементи виключені, вони не будуть відображатися.

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

Елементи, розміщені у подвійній секції, будуть вирівнюватися по лівому краю, а вставлені в різні частини подвійної секції розташовані в два рядки, один під одним.

Елементи в одинарній центральній секції будуть вирівнюватися по центру.

Переміщення і включення елементів

Якщо ви хочете змінити розташування окремого елемента в шапці, просто перетягніть його в потрібну секцію і збережіть зміни.

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

Стиль елемента інтерфейсу в шапці

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

Перелік всіх можливих елементів у шапці сайту

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

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

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