Перейти к основному содержимому

Шапка, футер и обрамление сайта

Обрамление — это всё, что обрамляет вашу витрину: полоса объявлений, шапка (логотип, навигация, поиск, аккаунт, корзина), приветственная полоса B2B, которая автоматически появляется для авторизованных корпоративных покупателей, и футер. В Vertex каждый элемент этого обрамления с поддержкой B2B из коробки: переключатели, значки и REP-пилюли автоматически появляются при авторизации корпоративного покупателя и изящно переходят в отполированный B2C-макет, когда покупатель не авторизован.

Vertex desktop header — logo, nav, search, account, cart

Две раскладки шапки, применяются автоматически

Вам не нужно выбирать между «шапкой B2B» и «шапкой B2C». Vertex отображает одну шапку — и наслаивает янтарную приветственную полосу B2B над ней в момент, когда корпоративный покупатель авторизуется. Гости получают чистую белую шапку; авторизованные покупатели получают ту же шапку плюс значки своей компании, пилюлю NET-условий, индикатор освобождения от налога и переключатель адреса доставки.

Полоса объявлений​

Файл секции: sections/announcement-bar.liquid

Верхняя полоса в стиле APEX над основной шапкой — текст слева, опциональная левая иконка (грузовик / молния / замок), номер телефона, иконки соцсетей и закрывающий × справа. Из коробки поставляются две цветовые схемы: тёмная и янтарная.

Настройки​

НастройкаТипПримечания
TextRich textКороткое сообщение о ценности — «Бесплатная доставка для заказов от $500», «NET-30 доступен для квалифицированных покупателей». Поддерживает встроенные ссылки.
Left iconSelecttruck · lightning · lock · none. Сочетает SVG-глиф с текстом.
Phone numberTextПилюля телефона справа. Нажмите для звонка на мобильном (tel: ссылка).
Instagram URLURLИконка бренда соцсети. Отображается только если заполнено.
LinkedIn URLURLИконка LinkedIn.
X (Twitter) URLURLИконка X.
YouTube URLURLИконка YouTube.
Color schemeSelectdark (по умолчанию) или amber.

Блоки ссылок​

Добавьте блоки Link, чтобы поместить небольшие текстовые ссылки в полосу объявлений — Спецпредложения, Стать дилером, Ресурсы. Каждый блок принимает label и url.

Закрываемая​

Кнопка × справа закрывает полосу объявлений для текущего посетителя. Состояние сохраняется в localStorage через assets/announcement-dismiss.js, поэтому полоса остаётся скрытой, пока посетитель не очистит данные сайта.

Когда использовать янтарную схему

Янтарная схема соответствует акцентному цвету приветственной полосы B2B. Используйте её, когда ваше объявление — это B2B-ценностное предложение (условия NET-30, регистрация дилера, RFQ). Используйте тёмную схему для общего маркетинга.

Основная шапка​

Файл секции: sections/header.liquid

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

Настройки​

НастройкаТипПримечания
LogoImageРекомендуется: SVG или 2x PNG. Ограничено максимальной высотой, заданной числовой настройкой Logo max height.
Brand text overrideTextОпциональный текст, используемый когда нет логотипа (например, «Vertex Supply»). Отображается в гарнитуре заголовков.
Primary menuLink listОсновная навигация. Каждый родительский пункт меню получает раскрывающийся список, управляемый его дочерними пунктами.
Submenu styleSelectauto · mega · dropdown. Auto выбирает мега, когда у родительского пункта 8+ детей или обнаружен макет сетки; иначе отображает плоский раскрывающийся список.
Secondary menuLink listУтилитарная навигация справа (Спецпредложения · Гайды · Услуги · FAQ). Автоматически определяется по обработчику списка ссылок secondary-menu, если вы не выберете её.
Search placeholderTextПереводимый. По умолчанию «Search by product, SKU, or part number».
Show locale switcherCheckboxПо умолчанию вкл. Скрывает/показывает пилюлю языка в десктопной шапке и мобильном меню.
Show currency switcherCheckboxПо умолчанию вкл. Скрывает/показывает пилюлю валюты. Даже B2B-покупатели одного рынка видят её информационно, чтобы всегда знать, в какой валюте платят.
Sticky on scrollCheckboxЗакрепляет шапку в области просмотра при прокрутке.

Что отображается справа от меню​

В порядке слева направо: поле предиктивного поиска, пилюля языка, пилюля валюты, пилюля торгового представителя (автоматически показывается для B2B), Аккаунт, счётчик корзины.

Пилюля торгового представителя извлекает данные из метаполей компании vertex.rep_name, vertex.rep_email, vertex.rep_phone. См. Руководство по настройке B2B для деталей заполнения.

Мега-меню vs. простой раскрывающийся список​

Стиль подменю определяется для каждого родительского пункта меню настройкой menu_style. Два формата:

  • Мега-меню — многоколоночные сеточные панели с опциональными иконками и специальной сеткой брендов. Используйте для Магазин по категориям, Магазин по брендам, Отрасли — родительских пунктов с 8+ детьми или визуальными подкатегориями.
  • Простой раскрывающийся список — плоский список. Используйте для О нас, Ресурсы, Аккаунт — родительских пунктов с несколькими страницами.

В режиме auto Vertex выбирает мега, если у родителя ≥ 8 детей; иначе простой раскрывающийся список.

Приветственная полоса B2B​

Файл секции: sections/b2b-greeting-bar.liquid

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

Когда появляется​

Все три условия должны быть истинны:

  1. customer.b2b? — покупатель является B2B-покупателем (компании), а не B2C-аккаунтом
  2. customer.current_company — он прикреплён хотя бы к одной компании
  3. settings.storefront_mode != 'b2c' — тема не закреплена в режиме «Только B2C»

Если хотя бы одно не выполнено (гость, режим «Только B2C», нет прикреплённой компании) — приветственная полоса не отображается вообще.

Что показывает​

  • Имя компании — «Signed in as {company.name}»
  • Значок NET-условий — NET-30 / NET-60 / NET-90 из метаполя условий оплаты компании
  • Значок освобождения от налога — из нативного налогового статуса компании Shopify
  • Пилюля языка — REP-стиль аватар + ISO-код + шеврон
  • Пилюля валюты — REP-стиль аватар + ISO-код + шеврон
  • Переключатель адреса доставки — статическая метка, когда у покупателя одна локация; полный раскрывающийся список, когда у него несколько
Адаптивное поведение

На экранах ≤ 1169px приветственная полоса сворачивается, и её содержимое перемещается в раздел аккаунта мобильного меню. Янтарная полоса появляется только на ≥ 1170px (десктоп), чтобы не бороться с поисковой строкой за вертикальное пространство на мобильных.

→ См. Только B2B-секции для полной поверхности функции.

Футер​

Файл секции: sections/footer.liquid

Футер сайта — меню, соцсети, email, иконки оплаты, рассылка, юридические ссылки.

Настройки​

НастройкаТипПримечания
Footer menuLink listМногоколоночная навигация футера. Каждый родительский пункт отображается как заголовок колонки.
Instagram URLURLОтображается только если заполнено.
Facebook URLURLОтображается только если заполнено.
LinkedIn URLURLОтображается только если заполнено.
X (Twitter) URLURLОтображается только если заполнено.
YouTube URLURLОтображается только если заполнено.
EmailTextПо умолчанию пустой. Когда заполнено, отображается как ссылка mailto: в колонке контактов.
Show payment iconsCheckboxПо умолчанию вкл. Использует shop.enabled_payment_types, поэтому вам не нужно поддерживать список самостоятельно.
Newsletter headingTextНапример, «Join the trade list».
Newsletter introRichtextКороткий успокаивающий текст — «Monthly drops, no spam».
Legal menuLink listPrivacy · Terms · Refund · Cookies. Автоматически откатывается на ваши URL /policies/*, если оставить меню пустым.

Форма рассылки​

Блок рассылки использует нативную форму подписки покупателей Shopify, поэтому подписчики записываются в ваш список покупателей Shopify (с флагом маркетинга newsletter). Сторонняя интеграция не требуется.

Иконки оплаты отражают то, что включено

Вы не выбираете иконки оплаты вручную — Vertex читает shop.enabled_payment_types и отображает только те иконки, которые вы включили в настройках оплаты Shopify. Включите Apple Pay в Settings → Payments → она появится в футере. Отключите её → она исчезнет.

Предиктивный поиск​

Файл секции: sections/predictive-search.liquid (отображается через header.liquid)

Выпадает из поля поиска по мере ввода покупателем. Показывает четыре панели:

  1. Товары — миниатюра изображения, название, поставщик, цена. Распознаёт артикулы производителя через метаполе vertex.mpn (поэтому поиск 1N4148 найдёт диод по артикулу).
  2. Коллекции — название + изображение.
  3. Страницы — название + URL.
  4. Предлагаемые запросы — нативные предложения поиска Shopify.

Распознавание MPN​

Если вы заполните метаполе vertex.mpn (одна строка текста) у товара, предиктивный поиск будет сопоставлять запросы с этим полем в дополнение к стандартному названию товара / SKU / поставщику. Критично для технических каталогов, где покупатели ищут по артикулу, а не по названию товара.

→ См. Руководство по настройке метаполей для деталей заполнения.

Адаптивное поведение​

У шапки жёсткая точка разрыва на 1170px — выбрана так, чтобы iPad Pro в портретной ориентации (1024px) оставался в потоке гамбургера, но большинство ноутбуков попадали в десктопный макет.

Окно просмотраМакет
< 1170pxМеню-гамбургер → выдвижное меню. Меню содержит: основное меню, вспомогательное меню, переключатель адреса доставки, пилюли локали + валюты (2-колоночная сетка), карточка торгового представителя (во всю ширину внизу), язык + вход.
≥ 1170pxПолная десктопная навигация. Панели мега-меню / выпадающие, поле предиктивного поиска, REP-пилюли, пилюля торгового представителя, аккаунт, корзина.

Кастомные раскрывающиеся панели (без нативного <select>)​

Vertex использует ноль нативных элементов <select> где-либо. Переключатели языка, валюты и адреса доставки используют общую систему <details> + <summary> + кастомная панель с:

  • Состояниями наведения
  • Выделением текущего выбора + иконкой галочки
  • Анимацией появления
  • Взаимным исключением (открытие одного закрывает другие)
  • Закрытием по клику снаружи
  • Закрытием по Escape
  • Полной навигацией с клавиатуры (стрелки + Enter)

Реализация находится в assets/global.js (ищите хелпер closeAllDetails()). Перестилизация этих выпадающих списков — это вопрос переопределения селекторов details[data-vertex-dropdown] — без JS.

Что дальше​