Шапка магазина: что закрепить и что убрать

Шапка — самый дорогой квадратный сантиметр магазина. Она видна на каждой странице, к ней тянутся глаза в первую секунду, и именно через неё проходят почти все ключевые действия: найти товар, открыть каталог, заглянуть в корзину, войти в кабинет. При этом шапку чаще всего перегружают: туда сползаются акции, соцсети, блог, «о компании» и десяток иконок, а поиск ужимается до крохотной лупы. Итог — рассеянное внимание и просевшая конверсия.

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

Зачем вообще пересматривать шапку

Шапку редко проектируют осознанно: обычно она наследуется от шаблона или обрастает элементами по мере «а давайте ещё добавим». В результате в ней оказывается всё сразу, а важное теряется среди второстепенного. Пересмотр шапки — это не про красоту, а про то, чтобы убрать трение на пути к покупке: сократить число кликов до поиска, каталога и корзины и снять визуальный шум.

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

Что делает шапка на самом деле

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

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

Обязательный минимум элементов

Есть набор, без которого шапка магазина не работает. Он невелик и в большинстве проектов одинаков.

• Логотип со ссылкой на главную — точка опоры и «домой».
• Каталог — вход в разделы, часто через мега-меню.
• Поиск — заметная строка, а не спрятанная лупа.
• Корзина со счётчиком товаров и суммой.
• Личный кабинет — вход/регистрация, для B2B — ещё и статус клиента.
• Контакт — телефон и город, если заказы идут и по телефону.

Этого набора хватает подавляющему большинству магазинов. Всё сверх него нужно защищать аргументом «это правда используется часто», иначе оно только отвлекает.

Что стоит закрепить

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

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

Что можно и нужно убрать

Разгрузка шапки почти всегда повышает её эффективность. Вот типичные кандидаты на вынос в подвал или второстепенное меню:

• Соцсети. В шапке они уводят из магазина; их место — в подвале.
• «О компании», «Вакансии», «Блог». Важные, но редкие разделы — им хватит меню и подвала.
• Длинные списки преимуществ и слоганы. Это контент главной, а не навигация.
• Дублирующиеся кнопки. Две «корзины» или два «войти» только путают.
• Баннеры акций внутри хедера. Их лучше выносить в отдельную тонкую строку-промо, которую можно закрыть.

Sticky-хедер: как не переборщить

Закреплённая шапка помогает, пока она компактна. Ошибка — приклеить полноразмерный хедер с двумя строками меню: на ноутбуке он съедает заметную часть экрана, на смартфоне — критичную. Правильный sticky меняет высоту: при прокрутке вниз хедер сжимается, при возврате наверх — разворачивается.

Ещё один нюанс — поведение при скролле вверх. Частый удачный паттерн: хедер прячется при прокрутке вниз (не мешает читать) и мгновенно появляется при малейшем движении вверх (пользователь потянулся к поиску или корзине). Это ощущается «умным» и не отнимает место.

Поиск и каталог в шапке

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

Каталог обычно раскрывается мега-меню — деревом разделов инфоблока. Здесь важна техника: дерево категорий нельзя строить на тяжёлом запросе, выполняемом на каждой странице. В 1С-Битрикс структуру разделов кэшируют и по возможности отдают в составе композитного кэша. О том, как устроен композит и кэширование, мы подробно писали в материале про хостинг и инфраструктуру BitrixVM.

Корзина, кабинет и авторизация

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

Личный кабинет для розницы — это «войти/регистрация», а для B2B — ещё и статус: имя клиента, компания, иногда доступный лимит или баланс. Эти блоки динамические и завязаны на авторизацию, поэтому их выносят из статического кэша. Автоматизация оптовых сценариев — согласований, лимитов, повторных заказов — часто уходит на сторону учётной системы; такие связки мы делаем в рамках автоматизации продаж и склада на 1С.

Город, телефон и регион

Для магазина с телефонными заказами и доставкой по стране в шапке живёт связка «город — телефон». Город определяет регион пользователя, а от него зависят телефон, цены, склад и сроки доставки. Показывать нужно текущий город с возможностью сменить, а не жёстко зашитый один регион.

Здесь легко ошибиться: если регион не заложен в архитектуру, шапка будет показывать московский телефон клиенту из другого города и наличие «не с того склада». Это подрывает доверие мгновенно. Логику региона и автоматическую подстановку контактов и остатков стоит закладывать заранее — как часть автоматизации на 1С, где сайт и учётная система работают как единое целое.

Шапка и скорость: техника Битрикс

Шапка присутствует на каждой странице, поэтому её производительность критична. Главный враг скорости — некэшируемая динамика в хедере: корзина, авторизация, город, персональные счётчики. Если их выполнять «в лоб» на каждой странице, они мешают композитному кэшу и замедляют весь сайт.

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

Связка «композитный сайт + вынесенная динамика» — стандартный подход для быстрой витрины на 1С-Битрикс. Если сайт тормозит именно из-за хедера и корзины, это как раз то, что чинится аудитом и оптимизацией.

Мобильная шапка

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

1. Оставьте поиск и корзину на виду. Это основные точки входа в покупку — прятать их в «бургер» нельзя.
2. Соберите навигацию в панель. Каталог, разделы, кабинет и контакты уводятся в выезжающее меню.
3. Сделайте тап-зоны крупными. Иконки и кнопки должны быть удобны для пальца, а не «в притык».
4. Проверьте sticky на мобильном. Закреплённый хедер должен быть тонким, иначе он отнимает пол-экрана.

Частые ошибки

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

Чек-лист внедрения

1. Минимум определён. В шапке есть логотип, каталог, поиск, корзина, кабинет и контакт — и ничего лишнего.
2. Лишнее убрано. Соцсети, блог, «о компании» и акции вынесены в подвал или промо-строку.
3. Sticky компактный. При прокрутке хедер ужимается; на мобильном он тонкий.
4. Поиск заметен. Это строка с плейсхолдером и автодополнением, а не спрятанная иконка.
5. Корзина информативна. Есть счётчик, сумма и превью; путь к оформлению короткий.
6. Регион работает. Город, телефон и наличие соответствуют пользователю.
7. Кэш в порядке. Статика шапки кэшируется, динамика вынесена, меню не бьёт по скорости.
8. Мобильная версия отдельная. Поиск и корзина на виду, остальное — в панели, тап-зоны крупные.

Вывод

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

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