4 демо-витрины Vertex — Vertex, Throttle, OfficeIT, Inkline
Одна лицензия темы Vertex. Четыре готовых к продакшену вида витрины. Каждый пресет настроен под конкретную B2B / B2C индустриальную нишу — разные акцентные цвета, разные композиции главной страницы, разные finder'ы, разные lifestyle-изображения, разные копирайтинговые крючки. Переключение между ними — один клик в кастомайзере (постоянно) или один параметр URL (временный предпросмотр).
Если вы продаёте в нескольких нишах — или решаете, с какой ниши начать перед запуском, — это руководство выбирает правильную стартовую точку для вашей витрины.
Вам не нужно покупать Vertex четыре раза. 4 пресета поставляются в одном файле темы. Вы также можете их смиксовать — взять главную страницу OfficeIT, но акцентный цвет Throttle, или переопределить любой пресет с помощью пикера Custom palette. Это стартовые точки, а не зафиксированные шаблоны.
Почему 4 пресета?
Shopify Theme Store поощряет темы, демонстрирующие диапазон возможностей. Покупатель, сканирующий каталог тем, хочет видеть свою индустрию с первого взгляда, а не общую демо-страницу «B2B-темы», которую ему придётся мысленно адаптировать под свой кейс.
Vertex решает это, поставляя четыре полностью заполненных демо-витрины под одной лицензией темы. Каждый пресет:
- Настроен под индустрию — цвет, копирайт, композиция героя и порядок разделов главной страницы подобраны под путь конкретного покупателя
- Учитывает finder — для автозапчастей предлагается finder Make/Model/Year для fitment; для расходников печати — finder Printer Brand/Model/Color; в индустриальном пресете finder отсутствует (он опирается на фасетную навигацию по коллекциям)
- Полный по изображениям — ~9 hero / lifestyle / industry-grid изображений на пресет, все сгенерированы под эстетику этой ниши. Никакого несоответствия со стоковыми фото.
- Независимо стилизуется — каждый пресет имеет свой файл CSS-переопределений (
assets/demo-{preset}.css), который меняет акцентные цвета, акценты finder'а и любые типографические решения для конкретного пресета
Результат: вы можете запустить Vertex как индустриальную витрину MRO, каталог автозапчастей, дистрибьютора офисных принадлежностей или поставщика для печатных мастерских без заказа какого-либо пользовательского дизайна.
Четыре пресета подробно
Пресет 1 — Vertex (по умолчанию)
| Индустрия | Промышленные поставки, MRO, hardware, крепёж, ручной инструмент, жидкости, абразивы |
| Акцентный цвет | Янтарный #fbbf24 |
| Finder | Нет — полагается на фасетные фильтры + predictive search |
| Hero главной страницы | Bold-типографика + lifestyle-образы мастерской / склада |
| B2B-крючки | «Volume pricing», «NET-30 available», «ISO 9001 certified», «24-hr dispatch» |
| Лучше всего для | Общих промышленных дистрибьюторов, поставщиков MRO, продавцов крепежа / hardware, каталогов инструментов, поставщиков JanSan |
Это вариант по умолчанию. Когда вы устанавливаете Vertex из Shopify Theme Store, загружается именно это. Янтарный акцент соответствует тёплому индустриальному визуальному языку McMaster-Carr / Grainger / Fastenal, который покупатели из отделов закупок сразу узнают.
Пресет 2 — Throttle (автозапчасти)
| Индустрия | Автозапчасти, performance, aftermarket, OEM-замена, мотоциклы, водный транспорт, powersports |
| Акцентный цвет | Красно-оранжевый #ec5f24 |
| Finder | Каскад Make / Model / Year fitment (3 выпадающих списка) |
| Hero главной страницы | Сообщение fitment-first («Find parts for your vehicle») с finder'ом выше коллекций товаров |
| B2B-крючки | «Trade pricing», «Warehouse dispatch», «OEM cross-reference», «Dealer accounts» |
| Лучше всего для | Дистрибьюторов автозапчастей, performance-магазинов, запчастей для мотоциклов / водной техники / RV, ATV / UTV / powersports |
Определяющей особенностью пресета Throttle является fitment finder — 3-шаговый каскадный выпадающий список (Make ▸ Model ▸ Year), отображаемый на hero главной страницы, в боковой панели стран ицы коллекции и опционально как закреплённая полоса. Покупатели один раз выбирают свой автомобиль; последующие просмотры товаров фильтруются только под совместимые с fitment запчасти.
Красно-оранжевый акцент соответствует визуальному языку performance / automotive / energy — RockAuto + Summit Racing в одной теме.
Пресет 3 — OfficeIT (офис, IT, электроника)
| Индустрия | Канцтовары, IT-оборудование, электроника, копировальная бумага, мониторы, клавиатуры, ноутбуки, массовые расходники |
| Акцентный цвет | Синий (корпоративный, IT-уровня) |
| Finder | Каскад Brand / Category / Capacity (3 выпадающих списка) — например, «HP ▸ Toner ▸ 5000 pages» |
| Hero главной страницы | Сообщение о массовых заказах, B2B-крючки для аккаунтов, CTA NET-30 / биллинга по счетам |
| B2B-крючки | «Bulk discounts», «Net-30 for business», «Free shipping over $X», «Dedicated account manager» |
| Лучше всего для | Дистрибьюторов канцтоваров, IT-реселлеров, оптовиков электроники, поставщиков школ / государственных учреждений, корпоративных закупщиков |
OfficeIT ведёт массовыми B2B-заказами для офисов — путь покупателя «мне нужно укомплектовать офис на 50 столов», а не «мне нужна одна мышь». Копирайт hero и CTA акцентируют bulk-order, RFQ и NET-30; главная страница показывает quick-pad массовых заказов выше стандартной представленной коллекции.
Синий акцент соответствует визуальному языку корпоративный IT / Quill / Staples Business Advantage, которого покупатели ожидают от этой категории.
Что внутри каждого пресета
Каждый пресет поставляется со своими копиями этих ассетов:
| Ассет | Вариант для каждого пресета |
|---|---|
| Шаблон главной страницы | templates/index.json (Vertex по умолчанию) + templates/index.throttle.json, index.officeit.json, index.printsupply.json |
| Шаблон коллекции | templates/collection.json + варианты для каждого пресета, где отличается порядок разделов (например, Throttle размещает finder над фильтрами) |
| Шаблон товара | templates/product.json + варианты для каждого пресета (например, Inkline добавляет вкладку «compatible printers») |
| CSS-переопределение | assets/demo-{preset}.css — переопределяет --color-accent, --color-on-accent, акцент finder, точки градиентов |
| Hero-изображения | ~3 варианта hero на пресет, все сгенерированы под эстетику ниши |
| Lifestyle-изображения | ~3 lifestyle-фото на пресет (мастерская / автосалон / офис / печатная мастерская) |
| Изображения сетки индустрий | ~3 industry-card изображения на пресет (например, HVAC + manufacturing + facilities для Vertex; cars + motorcycles + boats для Throttle) |
| Демо-копирайт | Hero- заголовки, подзаголовки, метки CTA, тексты отзывов — всё настроено под каждый пресет |
Это означает, что переключение пресетов — не «измени один цвет и молись», а связная смена витрины.
Как переключать пресеты
У вас есть два способа переключения — постоянный и временный предпросмотр.
Постоянный — через кастомайзер
- Откройте админку Shopify и перейдите в Online Store ▸ Themes.
- Нажмите Customize на Vertex.
- На боковой панели слева нажмите Theme settings ▸ Colors.
- Прокрутите до Starter color palette.
- Выберите одно из:
- Custom — полностью пользовательская палитра (использует ваши ручные пикеры цветов ниже)
- Vertex — янтарный индустриальный (по умолчанию)
- Throttle — красно-оранжевый для автозапчастей
- OfficeIT — корпоративный синий
- Inkline — бирюзовый для печати/репрографии
- Save вверху справа.
Акцентный цвет меняется мгновенно. Чтобы также переключить главную страницу на макет этого пресета, см. раздел Переключение шаблона главной страницы ниже.
Цветовой пресет в Theme settings ▸ Colors меняет только цвета. Чтобы получить полный опыт пресета (макет главной, finder, lifestyle-образы), вам также нужно применить соответствующий суффикс шаблона главной страницы — см. следующий раздел.
Временный — через URL-предпросмотр
Чтобы предпросмотреть пресет на любом URL витрины без его применения:
| Пресет | Параметр URL предпросмотра |
|---|---|
| Vertex | (по умолчанию — без параметра) |
| Throttle | ?view=throttle |
| OfficeIT | ?view=officeit |
Например:
https://your-store.myshopify.com/?view=throttle
https://your-store.myshopify.com/collections/all?view=officeit
Это использует нативную функцию суффикса шаблона Shopify — витрина отображается с использованием альтернативного файла шаблона (index.throttle.json) для этого единичного просмотра страницы. Ничего не сохраняется; обновление без параметра возвращает к вашему значению по умолчанию.
Используйте это, чтобы:
- A/B-тестировать пресет с небольшой аудиторией перед окончательным выбором
- Отправить демо-URL заинтересованной стороне («посмотрите, как версия нашего магазина с автозапчастями ощущалась бы»)
- Сравнить hero-композиции бок о бок в двух вкладках браузера
Переключение шаблона главной страницы
Чтобы постоянно применить макет главной страницы пресета:
- Откройте Online Store ▸ Themes ▸ Customize ▸ Home.
- В верхнем селекторе шаблонов выберите Add template или выберите вариант
index.{preset}.jsonпресета. - Сохраните.
В качестве альтернативы установите главную страницу с соответствующим суффик сом шаблона в настройках страницы или отредактируйте settings_data.json напрямую, если вам это удобно.
Ничто не заставляет вас использовать главную страницу пресета с его акцентом. Вы можете использовать макет главной страницы Throttle (потому что вам нравится композиция fitment-finder-first) с бирюзовым акцентом Inkline (потому что он подходит вашему бренду) и раздел bulk-order pad OfficeIT (потому что ваши покупатели вставляют из таблиц). Vertex компонуем.
Как работает переопределение акцентного цвета
Каждый пресет поставляется с маленьким CSS-файлом по адресу assets/demo-{preset}.css:
/* assets/demo-throttle.css */
:root {
--color-accent: 236 95 36; /* ec5f24 — Throttle red-orange */
--color-on-accent: 255 255 255;
}
.finder-bar { --finder-accent: var(--color-accent); }
Когда настройка Starter color palette установлена в Throttle, макет включает этот файл через {% if settings.starter_palette == 'throttle' %}{{ 'demo-throttle.css' | asset_url | stylesheet_tag }}{% endif %}.
Акцентные CSS-переменные --color-accent + --color-on-accent проходят через каждый компонент — кнопки, плашки, бейджи, ссылки, focus-кольца, подсветку выпадающих списков, полосу приветствия B2B, выпадающие списки finder, hero CTA. Переключение палитры переключает акцент всей витрины за один рендер.
Это означает, что вы также можете создать собственный пресет, путём:
- Копирования одного из существующих файлов
demo-*.css - Переименования его в
demo-mybrand.css - Регулировки значений
--color-accent+--color-on-accent - Подключения его в
layout/theme.liquidчерез ещё одну ветку{% if %} - (Опционально) Добавления соответствующего шаблона главной страницы по адресу
templates/index.mybrand.json
Опытный пользователь может создать 5-й пресет менее чем за час.
Выбор пресета — матрица решений
Используйте это, чтобы выбрать стартовую точку. Помните: вы можете переопределить что угодно после.
| Если вы продаёте... | Начните с | Причина |
|---|---|---|
| Крепёж, ручной инструмент, смазки, абразивы, hardware, общий MRO | Vertex | Общая индустриальная база, finder не нужен (фасетные фильтры справляются) |
| Автозапчасти / мотоциклы / водные / RV / powersports | Throttle | Fitment finder — это make-or-break функция для этой ниши |
| Офис, IT, электроника, расходники для копировальных аппаратов, школы / госзакупки | OfficeIT | Массовые B2B-заказы для офисов + корпоративный IT-визуальный язык |
| Чернила для принтеров, тонер, бумага широкого формата, расходники для репрографии | Inkline | Finder картриджей для принтеров устраняет ошибку покупателя #1 в этой нише |
| Janitorial / sanitation (JanSan) | Vertex | База MRO Vertex чисто соответствует JanSan; специализированный finder не нужен |
| Промышленные химикаты / смазки с техническими описаниями | Vertex | Таблицы тех-спецификаций + блок документов являются ядром пресета Vertex |
| Стройматериалы (пиломатериалы, бетон, гипсокартон) | Vertex | База Vertex + страница массовых заказов работают хорошо; рассмотрите синий OfficeIT, есл и хотите более холодную палитру |
| Промо-продукты с пользовательской печатью логотипа | Inkline | Бирюзовый акцент + визуальный язык печатной мастерской соответствуют категории, хотя finder более полезен для чернил/тонера |
| Только опт (не B2C) | Vertex или OfficeIT | Подойдёт любой; выберите акцент, соответствующий вашему бренду. Переключите режим витрины на B2B-only. |
Кастомизация пресета
Пресеты — это стартовые точки. После установки вы можете:
| Кастомизировать | Как |
|---|---|
| Акцентный цвет | Theme settings ▸ Colors ▸ Starter palette ▸ Custom, затем выберите свой --color-accent |
| Логотип | Theme settings ▸ Logo — замените демо-логотип своим SVG или PNG |
| Порядок разделов главной страницы | Кастомайзер ▸ Home — перетащите разделы для изменения порядка или д обавьте/удалите разделы из палитры 30+ разделов |
| Hero-изображения | Нажмите на раздел Hero в кастомайзере, замените изображение каждого слайда |
| Lifestyle / индустриальные изображения | Замените для каждого раздела в кастомайзере; у каждого раздела есть пикер Image |
| Метки и данные выпадающих списков finder | (Throttle / OfficeIT / Inkline) — см. Руководство по настройке finder для структуры данных, управляемой метаполями |
| Типография | Theme settings ▸ Typography — шрифт заголовков, шрифт основного текста, коэффициент шкалы |
| Копирайт / CTA | Редактируйте текст инлайн в кастомайзере для каждого раздела |
| Переводы | Theme settings ▸ Languages — предоставьте пользовательские строки через переопределения locales/*.schema.json |
После кастомизации вы можете сохранить свою работу как именованную тему в Online Store ▸ Themes ▸ Theme library — полезно при проведении A/B-тестов или промежуточных визуальных изменениях.
Связанное чтение
- Обзор — Почему Vertex поставляется с 4 пресетами в одной теме
- Установка — Установка темы + выбор пресета во время настройки
- Справочник настроек темы — Colors ▸ Starter palette и настройки для каждого пресета
- Markets & мультивалютность — Каждый пресет работает одинаково во всех маркетах
- Руководство по режимам витрины — Как Hybrid / B2B-only / B2C-only взаимодействуют с пресетами
- Панель управления аккаунтом клиента — Идентична во всех пресетах (меняется только акцентный цвет)
- Руководство по странице RFQ — Идентична во всех пресетах
- Руководст во по настройке B2B — Одна и та же B2B-конфигурация работает для всех 4 пресетов
Резюме
- Vertex поставляется с 4 демо-пресетами в одной лицензии темы: Vertex (индустриальный янтарный), Throttle (красно-оранжевый для автозапчастей), OfficeIT (синий для офиса/IT), Inkline (бирюзовый для расходников печати).
- Каждый пресет имеет свой шаблон главной страницы, finder, акцентный CSS и ~9 lifestyle-изображений.
- Переключайтесь постоянно в Theme settings ▸ Colors ▸ Starter palette + применяя суффикс шаблона главной страницы пресета.
- Переключайтесь временно для предпросмотра, добавляя
?view=throttle | officeit | printsupplyк любому URL витрины. - Пресеты — это стартовые точки: акцентный цвет, макет главной страницы, finder, изображения и копирайт независимо переопределяются.
- 5-й пользовательский пресет занимает около часа на создание путём копирования существующего файла
demo-*.cssи подключения его вlayout/theme.liquid.