Vertex — премиальная Shopify-тема для B2B и оптовой торговли
Vertex — это премиальная тема Shopify Online Store 2.0, специально созданная для дистрибьюторов промышленных товаров, MRO (обслуживание, ремонт и эксплуатация), оптовых, торговых и дилерских продавцов, которым нужно, чтобы нативные функции B2B Shopify действительно выглядели как B2B-витрина — без единого стороннего приложения, ежемесячной подписки или внешнего скрипта.
Каждый нативный B2B-объект Shopify — таблицы объёмных цен, контроль правил количества, условия оплаты NET-30 / NET-60 / NET-90, аккаунты с освобождением от налога, переключение между компаниями для нескольких локаций, каталоги B2B, запросы котировок — отображается с тем уровнем отделки, которого ожидают ваши контрактные покупатели. Команды снабжения, менеджеры по эксплуатации и дилерские аккаунты получают витрину, которая отражает ясность каталога в стиле McMaster-Carr, Grainger и Fastenal, оставаясь полностью совместимой с OS 2.0.
Готова к B2C из коробки
Vertex не только для B2B. Каждая B2B-функция изящно скрывается, когда нет авторизованной компании, а единственный переключатель режима витрины (Гибридный / Только B2B / Только B2C) позволяет вам решить, насколько широко раскрывать B2B-элементы. Та же тема с первого дня работает как отполированная B2C-витрина для промышленных товаров — без второй лицензии, без параллельной кодовой базы.
Для кого предназначена Vertex
- Дистрибьюторы п ромышленных товаров — крепёж, скобяные изделия, инструмент, абразивы, жидкости
- Поставщики MRO — расходные материалы для обслуживания, ремонта и эксплуатации
- Оптовые продавцы — каталоги только для торговых клиентов с многоуровневыми ценами
- Дистрибьюторы автозапчастей — каталоги с подбором по совместимости с поисковиками Make / Model / Year
- Поставщики офисных, IT и электронных товаров — поисковики по бренду / категории / ёмкости
- Поставщики печатных и репрографических материалов — поисковики по бренду / модели / цвету принтера
- B2C-продавцы промышленных товаров — продажа малому бизнесу и конечным покупателям
Если ваши покупатели ищут по артикулам производителя, ожидают объёмных скидок, размещают заказы на 50 строк из электронной таблицы, нуждаются в условиях NET-30 или хотят видеть документацию (паспорта товаров, MSDS, сертификаты) прямо на странице товара — Vertex создан для них.
Полный каталог функций
Этот раздел является исчерпывающим списком каждой функции в Vertex v1.0.0. Каждый пункт содержит ссылку на соответствующее руководство.
Нативный B2B (без приложений, без подписок)
| Функция | Что делает |
|---|---|
| Таблицы объёмных цен | Серверный рендеринг многоуровневых цен из quantity_price_breaks Shopify. Покупатели видят цену за единицу для каждого ценового уровня на странице товара, в корзине и на странице массового заказа. |
| Контроль правил количества | MOQ (минимальное количество заказа), максимальное количество заказа и шаг упаковки проверяются на стороне клиента (защита UI) и на стороне сервера (нативно в Shopify). |
| Цены только после входа | Один переключатель в настройках темы скрывает все цены для гостей и заменяет их на «Войдите, чтобы увидеть цены». Покупатели видят цены только после авторизации. |
| Условия NET-30 / NET-60 / NET-90 | Автоматически определяются из метаполя условий оплаты компании. Отображаются в виде значка в янтарной приветственной полосе и при оформлении заказа. |
| Значки освобождения от налога | Автоматически определяются из нативного налогового статуса компании Shopify. Отображаются на странице товара, в корзине и в приветственной полосе. |
| Переключение между компаниями для нескольких локаций | Покупатели, прикреплённые к нескольким компаниям, могут переключаться между ними через специальный раскрывающийся список в мобильном меню. |
| Переключатель адреса доставки | Переключение в один клик между авторизованными адресами доставки покупателя. Отображается в виде стилизованного раскрывающегося списка в янтарной приветственной полосе B2B (десктоп) и в разделе аккаунта мобильного меню. |
| Ограничение каталога B2B | Покупатели видят только товары и цены, назначенные каталогу их компании через нативную функцию каталогов B2B Shopify. Vertex учитывает это сквозным образом. |
| Страница быстрого заказа с вставкой в корзину | Специальный шаблон /pages/bulk-order. Покупатели вставляют строки SKU,количество из электронной таблицы; страница проверяет каждую строку по каталогу и добавляет всю корзину в один клик. Недействительные SKU отмечаются прямо в строке. |
| Быстрый повторный заказ | Кнопка «Повторить заказ» на прошлых заказах. Повторяет весь заказ целиком ИЛИ по строкам из панели аккаунта покупателя. |
| Страница запроса котировки (RFQ) | Специальный шаблон /pages/rfq с использованием нативной формы обратной связи Shopify. Отправляет письмо продавцу; приложение управления котировками не требуется. |
| Пилюля контакта торгового представителя | Информация о торговом представителе по каждой компании извлекается из метаполей vertex.rep_name, vertex.rep_email, vertex.rep_phone. Отображается в виде липкой пилюли в десктопной шапке (≥1170px) и как карточка во всю ширину внизу мобильного меню (<1170px). |
| Приветственная полоса B2B | Янтарная полоса над шапкой, отображающая имя компании покупателя, значок NET-условий, значок освобождения от налога, переключатели языка / валюты / адреса доставки при авторизации. Автоматически скрывается для гостей и в режиме «Только B2C». |
| Промо-полоса B2B-функций | Полоса на главной странице, выделяющая только B2B-функции (объёмные цены, массовый заказ, RFQ, NET-30) — видна гостям как маркетинговый текст. |
| Панель аккаунта покупателя с поддержкой B2B | Шаблон /account определяет B2B-покупателей и отображает информацию о компании, условия оплаты, быстрый повторный заказ и карточку контакта торгового представителя. |
→ Полное руководство по настройке B2B
Страница товара (PDP) — создана для технических каталогов
| Функция | Что делает |
|---|---|
| Таблицы технических характеристик из метаполей | Специальный метаобъект tech_spec_row + метаполя vertex.* отображают аккуратный блок характеристик на странице товара. Охватывают размеры, вес, материал, сертификаты, напряжение, ёмкость и т. д. |
| Документы и загрузки | Ссылки на PDF по каждому товару автоматически отображаются в блоке «Документы»: техническая спецификация, MSDS, брошюра, технический лист, руководство по установке, гарантийный талон. Автоматически скрывается у товара, к которому документы не прикреплены. |
| Раскрытие истории цен | Опциональное метаполе vertex.price_history (список записей дата+цена) отображает сворачиваемый блок «История цен» на странице товара. |
| Метка «Отправляется из» | Метаполе vertex.ships_from по каждому товару (или общая для темы по умолчанию) отображается под названием — полезно для дистрибьюторов с региональными складами. |
| Счётчик остатков (индикатор низкого остатка) | Счётчик остатков по каждому варианту на странице товара, настраиваемый порог. Создаёт ощущение срочности, не раскрывая точный остаток конкурентам. |
| Уведомление о поступлении | Форма email-подписки на отсутствующих вариантах. Нативная, без дополнительного приложения. |
| Кнопка «Предзаказ» для добавления в корзину | Варианты, помеченные как доступные для предзаказа, отображают кнопку «Предзаказ» вместо «Нет в наличии». Использует нативный учёт остатков Shopify. |
| Параллельное сравнение товаров | Липкая полоса сравнения отслеживает до 4 товаров; специальный шаблон /pages/compare отображает полную таблицу сравнения по характеристикам. Только в рамках сессии — это не список желаний. Полностью соответствует политике Shopify Theme Store. |
| Модальное окно быстрого просмотра | Кнопка «Быстрый просмотр» на карточках товаров открывает модальное окно с галереей товара, выбором варианта, полем количества и добавлением в корзину — без выхода со списка. |
| Вкладки товара | Специальный блок секции для страницы товара, который разделяет содержимое товара на вкладки (Описание / Характеристики / Спецификация / Доставка / Видео). |
| Недавно просмотренные | Товары, отслеживаемые в localStorage (до 12 на покупателя); отображаются внизу страницы товара. Очищаются, когда покупатель очищает данные браузера. |
| Похожие товары | Рекомендации из той же коллекции или с тем же тегом под страницей товара. |
| Смена изображения на карточках товаров при наведении | Когда у товара 2+ изображений, при наведении на карточку в списке изображение сменяется на второе. |
Шапка, навигация, локализация
| Функция | Что делает |
|---|---|
| Полоса объявлений | Верхняя полоса в стиле APEX со слотами для ссылок, иконками соцсетей, телефоном и закрывающим × справа (сохраняется в localStorage). Две раскладки: тёмная или янтарная. |
| Две раскладки шапки (применяются автоматически) | Гость: белая основная шапка с логотипом + предиктивным поиском + пилюлями языка / валюты + кнопкой Вход/Регистрация + Корзиной. Авторизованный B2B: то же самое + янтарная приветственная полоса над ней со значками компании и переключателями. |
| Мега-меню | Многоколоночные раскрывающиеся панели с опциональными иконками и специальной сеткой «Магазин по брендам» (сетка с тонкими разделителями). |
| Альтернатива в виде простого выпадающего меню | Когда продавец предпочитает плоский список для каждого родительского пункта меню. Автоматически определяется или принудительно задаётся через настройку. |
| Вспомогательная навигация справа | Спецпредложения / Гайды / Услуги / FAQ — автоматически определяется по обработчику, если существует список ссылок secondary-menu. |
| Оверлей предиктивного поиска | Товары / коллекции / страницы / предлагаемые запросы с миниатюрами изображений. Распознаёт артикулы производителя через метаполе vertex.mpn. |
| Липкая шапка при прокрутке | Переключатель администратора — закрепляет шапку в области просмотра. |
| Переключатели в стиле REP-пилюли | Язык + валюта отображаются в виде небольших пилюль с круглой аватаркой-флагом и 2-строчным текстовым блоком (надстрочный текст + ISO-код) и шевроном. В мобильном меню те же пилюли занимают всю ширину в 2-колоночной сетке для управления одной рукой. |
| Кастомные раскрывающиеся панели | Нигде нет нативного <select>. Язык, валюта и адрес доставки используют общую систему <details> + кастомная панель с состояниями наведения, выделением текущего выбора, иконкой галочки, анимацией появления, взаимным исключением, закрытием по клику снаружи и по Escape. |
| Мульти-валюта через Shopify Markets | Пилюля валюты отображается даже для B2B-покупателей, закреплённых на одном рынке — информационно, чтобы они всегда видели, в какой валюте платят. |
| 5 поставляемых языков | Английский (по умолчанию), французский, итальянский, немецкий, испанский — полные строки UI + строки схемы в locales/. |
| Полная поддержка RTL | <html dir> автоматически переключается для арабского, иврита, фарси, урду, идиш, курдского, дхивехи, пушту. Можно принудительно установить через настройку темы «Локализация». |
| Точка разрыва для планшетов | При <1170px (мобильный + планшет) управление берёт на себя меню-гамбургер. При ≥1170px показывается полная десктопная навигация. |
→ Руководство по режимам витрины · Руководство по Markets и мульти-валюте
Маркетинговые секции (30+ в палитре главной страницы)
| Секция | Назначение |
|---|---|
| Hero | Многослайдовый ротатор с автопереключением, навигацией по точкам, редакционной композицией. По умолчанию поставляется с 1 слайдом для максимально быстрого LCP. |
| Featured collection | Сетка товаров; принимает блоки @app для соответствия политике Theme Store. |
| Collection list | Сетка категорий с наложением изображений. |
| Image with text | Редакционная пара (текст + изображение, 50/50 или асимметрично). |
| Multicolumn | Сетка из 2–4 колонок (иконки + текст + опциональная ссылка). |
| Rich text | Центрированный вводный блок / блок «О нас». |
| CTA banner | Призыв к действию перед футером с эффектом наложения на футер; копирайт зависит от состояния покупателя (гость или B2B). |
| Newsletter | Подписка по email с кнопкой подписки. |
| FAQ | Аккордеон на основе disclosure; автоматически генерирует JSON-LD FAQPage для расширенных сниппетов. |
| Logo list | Бегущая строка с логотипами брендов с затухающими линиями сетки. |
| Testimonials | Карточки с рейтингом и шапкой с наложением аватаров. |
| Stats bar | Тёмная полоса KPI (например, «40 000+ SKU · NET-30 · отгрузка 24 ч · ISO 9001»). |
| Industries grid | Редакционная сетка карточек (например, HVAC, производство, эксплуатация). |
| Resource hub | Список загрузок — технические спецификации, MSDS, брошюры. |
| Press coverage | Полоса логотипов + цитаты. |
| Timeline | Хронология для страницы «О нас» (год + веха). |
| Services grid | Плитки с наложением изображений для предложений услуг. |
| Countdown timer | Дни / часы / минуты / секунды — для акций. |
| Featured bundles | Кураторские карточки наборов с значками скидок. |
| Make/Model/Year finder | Каскадные раскрывающиеся списки (пресет Throttle) — или Бренд/Ёмкость (OfficeIT), или Бренд принтера/Модель/Цвет (Inkline). |
| Promo banner | Закрываемый верхний баннер с сохранением в localStorage. |
| Promo popup | Автоматическое открытие + по намерению выхода + localStorage; настраиваемая частота. |
| Quick-order pad | Встроенная панель добавления в корзину путём вставки (версия полной страницы массового заказа, готовая для главной). |
| Recently viewed (homepage) | Тот же виджет, что и на странице товара, отображается на главной странице как полоса. |
| Related products | Полоса дополнительных продаж на странице товара. |
| Sticky cart bar | Липкая полоса добавления в корзину только для мобильных. |
| Dual brands + quickorder | Объединённая секция 50/50, сочетающая логотипы брендов + панель быстрого заказа. |
| Dual resources + FAQ | Объединённая секция 50/50, сочетающая загрузки + FAQ. |
→ Руководства по настройке секций
4 демо-витрины в одной теме
| Пресет | Отрасль | Акцент | Поисковик |
|---|---|---|---|
| Vertex | Промышленность / MRO-снабжение | Янтарный #fbbf24 | — |
| Throttle | Автозапчасти | Красно-оранжевый #ec5f24 | Make / Model / Year |
| OfficeIT | Офис, IT и электроника | Синий | Бренд / Категория / Ёмкость |
Каждый пресет включает свою главную страницу, шаблон коллекции, шаблон товара и сгенерированные изображения для hero. Переключайте пресеты из настройщика — вся витрина перекрашивается и перерисовывается.
→ Руководство по демо-пресетам
Поставляемые шаблоны (Online Store 2.0)
Обязательные шаблоны Shopify (все присутствуют): index.json, product.json, collection.json + list-collections.json, cart.json, search.json, blog.json + article.json, page.json, 404.json, password.json, gift_card.liquid.
Набор шаблонов аккаунта покупателя: customers/account.json (с поддержкой B2B), activate_account.json, addresses.json, login.json, order.json (с повторным заказом по строкам + всего заказа), register.json, reset_password.json.
Кастомные шаблоны страниц — применяются к любой новой странице: page.about.json, page.contact.json (2 колонки), page.faq.json, page.rfq.json, page.bulk-order.json, page.compare.json, page.services.json, page.special-offers.json.
Производительность
- Vanilla ES modules — без сборщик а, без фреймворка, без jQuery, ноль сторонних скриптов во время выполнения
- CSS по секциям —
section-{name}.cssзагружается только секцией, которая им владеет. Без глобального мега-бандла. - Встроенные дизайн-токены в
layout/theme.liquidустраняют один блокирующий рендеринг CSS-запрос - WebP hero-изображения в нескольких ширинах через
<picture><source srcset> font-display: optionalдля шрифтов тела и заголовков, чтобы LCP оставался быстрым- Серверный рендеринг цен — JS никогда не пересчитывает цены, только улучшает
- Предзагрузка базовых шрифтов тела и заголовков, предсоединение с
fonts.shopifycdn.com - Подход с фоновым изображением hero + пресет с 1 слайдом по умолчанию = восстановленный LCP на мобильных
- Зафиксированный Lighthouse: Производительность 65–100 мобильные, 90+ десктоп
Доступность (WCAG 2.1 AA)
- Везде доступно с клавиатуры (кастомные выпадающие используют нативные
<details>/<summary>; навигация стрелками в мега-меню) - Видимый фокус на каждом интерактивном элементе (стилевое кольцо focus-visible)
- Минимальный контраст 4.5:1 повсеместно; палитра протестирована
- Минимум 24 px для сенсорных целей на мобильных
- Подписанные поля + ARIA-роли (
role="menu",menuitemradio,aria-checked,aria-current) - Ссылка «Перейти к содержимому»
- Автоматическое переключение RTL с опциональным ручным переопределением
SEO и социальные сети
- Полный граф JSON-LD schema — Organization, WebSite + SearchAction, BreadcrumbList (страница товара), Product (с GTIN, shippingDetails, returns), BlogPosting, ContactPage + LocalBusiness, FAQPage, ItemList (коллекция)
- Open Graph + meta Twitter card на каждой странице (
og:image,og:locale,og:image:alt,twitter:image,twitter:site) rel="next"/rel="prev"на пагинации коллекций и блогаfetchpriority="high"на изображении первой карточки коллекции (выигрыш LCP)- Сайт-широкий
noindexна 12 типах служебных страниц (аккаунт, поиск и т. д.) - hreflang автоматически выводится для всех 5 опубликованных локалей
- Favicon поставляется как SVG-фоллбэк + PNG-слот, переопределяемый в настройках
- Поля Google Merchant Center — GTIN, детали доставки, возврат
Приватность и соответствие
- Нет кастомного баннера cookies — используется нативный баннер Customer Privacy Shopify (лучший балл Lighthouse Best Practices, меньше кода для поддержки, без юридических сюрпризов)
- Соответствие политике Theme Store — без сторонней аналитики, без партнёрских ссылок, без авторских отметок дизайнера внутри файлов темы
Чего ПОКА нет в коробке
Чтобы установить правильные ожидания:
- Загрузка PO (PDF заказов на покупку в качестве оплаты) — зависит от Shopify, раскрывающего соответствующий нативный API без стороннего приложения. Запланировано на v1.1.
- Workflow согласования (многоэтапное внутреннее согласование перед оформлением) — то же ограничение. Запланировано на v1.1.
- Список желаний — намеренно не поставляется. Сравнение товаров действует только в рамках сессии согласно политике Theme Store; постоянные списки желаний требуют приложения.
- Live-чат — рекомендуем нативный Chat Shopify или любое стороннее приложение по вашему выбору.
Быстрый старт
- Установите Vertex из Shopify Theme Store (Online Store ▸ Themes ▸ Add theme)
- Включите нати вный B2B (Settings ▸ Customer accounts ▸ Enable B2B). Без этого B2B-элементы автоматически скрываются — тема всё равно работает как отполированная B2C-тема.
- Заполните пространство имён метаполей
vertex— технические спецификации, MPN, контакты торгового представителя, отправляется из. См. Руководство по настройке метаполей. - Выберите стартовую палитру — Customize ▸ Theme settings ▸ Colors ▸ Starter color palette. Выберите: Custom, Vertex amber, Throttle red, OfficeIT blue или Inkline teal.
- Настройте в Themes ▸ Customize и опубликуйте.
→ Полное пошаговое руководство по установке
Что дальше
- Установка → — пошаговая установка + включение B2B
- Справочник настроек темы → — каждая настройка в Theme Settings, с объяснениями
- Руководства по настройке секций → — как настроить каждую секцию
- Руководства по функциям → — настройка B2B, метаполя, режимы витрины, Markets, демо-пресеты, аккаунт покупателя, RFQ
- FAQ + устранение неполадок → — ответы на основные вопросы
- Список изменений → — что нового в каждом релизе
- Поддержка → — как с нами связаться