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

Секции главной страницы и маркетинга

Vertex поставляется с 30+ готовыми для главной страницы секциями, разработанными для B2B-витрин и витрин промышленного снабжения: ротаторы hero, редакторские multicolumn, метки доверия, KPI-полосы, FAQ-аккордеоны с автоматически испускаемым JSON-LD, конверсионные баннеры и 50/50 объединённые секции, сочетающие две связанные идеи в одной полосе (бренды + быстрый заказ, ресурсы + FAQ).

Тема Vertex — палитра главной страницы

Микс и матч — порядок ваш

Каждая секция здесь — самостоятельная секция OS 2.0. Перетаскивайте их в любом порядке в кастомайзере. И они не обязаны быть только на главной странице — размещайте их на page.about.json, page.services.json или на любом кастомном шаблоне страницы.

Hero и открывающие секции​

hero​

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

Многослайдовый ротатор с автопрокруткой, навигацией по точкам и редакторской композицией (eyebrow + заголовок + подзаголовок + двойные CTA). По умолчанию один слайд для самого быстрого LCP — дополнительные слайды являются прогрессивным улучшением.

Настройки блока на слайд: изображение (с выбором ширины с учётом мобильных через <picture><source>), eyebrow-текст, заголовок, подзаголовок, основной CTA label + URL, вторичный CTA label + URL, выравнивание (left / center).

Настройки секции: интервал автопрокрутки (секунды), переключатель показа точек, цветовая схема.

Совет по LCP

Держите главную страницу с одним hero-слайдом, если Lighthouse Performance в приоритете. Каждый дополнительный слайд добавляет hero-размер изображения в начальный payload. По этой причине дефолт поставляется с 1 слайдом.

Файл секции: sections/featured-collection.liquid

Сетка товаров, которая подтягивается из выбора коллекции. Принимает блоки @app для соответствия Theme Store.

Настройки: выбор коллекции, заголовок, товаров в ряду (2 / 3 / 4 / 5), столбцы на мобильном (1 / 2), показывать ссылку View all, цветовая схема.

collection-list​

Файл секции: sections/collection-list.liquid

Сетка категорий с overlay-ами изображений и заголовками, центрированными над каждой плиткой. Настраиваемые столбцы и соотношение сторон.

Редакторские блоки​

image-with-text​

Файл секции: sections/image-with-text.liquid

Классическое 50/50 или асимметричное сочетание изображения + текста. Полезно для О нас, Наш процесс, Почему мы.

Настройки: изображение, заголовок, текст (richtext), CTA label + URL, вёрстка (image-left / image-right), цветовая схема.

multicolumn​

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

Сетка из 2, 3 или 4 столбцов. У каждого столбца есть иконка (или изображение), заголовок, текст и опциональная ссылка. Используйте для ценностных предложений (Отгрузка в тот же день · NET-30 · Объёмное ценообразование · Сертификат ISO 9001).

Настройки блока на столбец: иконка (изображение), заголовок, текст, label ссылки + URL.

rich-text​

Файл секции: sections/rich-text.liquid

Центрированный intro или блок about. Заголовок + richtext текст + опциональный CTA. Используйте умеренно — это блок «разрыва страницы».

timeline​

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

Год + хроника событий для страницы About. На блок: год, заголовок, текст.

Доверие и социальные доказательства​

testimonials​

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

Карточки с рейтингом с overlap-обработкой шапки аватаров. У каждой карточки есть рейтинг (1–5 звёзд), цитата, имя клиента, должность, компания и изображение аватара.

Настройки на блок: имя, должность, компания, цитата (richtext), рейтинг (1–5), аватар (изображение).

logo-list​

Файл секции: sections/logo-list.liquid

Маркизы-прокрутка логотипов брендов с затухающими линиями сетки. Используйте для Нам доверяют / О нас писали / Бренды, которые мы возим.

Настройки на блок: изображение логотипа, опциональный URL. На уровне секции: скорость прокрутки, показывать линии сетки.

press-coverage​

Файл секции: sections/press-coverage.liquid

Полоса логотипов + цитаты-pull. Сочетает логотипы прессы с короткими атрибутированными цитатами — «...McMaster-Carr мира WordPress.» — Trade Weekly.

stats-bar​

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

KPI-полоса в тёмном режиме. Используйте для основных цифр — 40 000+ SKU · NET-30 · Отгрузка за 24 часа · ISO 9001.

Настройки на блок: число (большой текст), label (мелкий текст).

Показывайте диапазоны, а не точные цифры

«40 000+ SKU» читается сильнее, чем «40 127 SKU», и не требует обновления секции каждый раз, когда меняется инвентарь. То же с объёмом заказов.

Конверсия и CTA​

cta-banner​

Файл секции: sections/cta-banner.liquid

Pre-footer призыв к действию с эффектом перекрытия в футер — полоса визуально вторгается в футер для редакторского полишинга.

Настройки: заголовок, подзаголовок, основной CTA, вторичный CTA, изображение (опционально), переключатель Hide for B2B customers.

Переключатель Hide for B2B customers — маленькая, но критичная деталь. Если CTA звучит как «Стать дилером» или «Запросить КП», вы не хотите показывать его покупателю, который уже является вошедшим дилером. Включите его, и секция исчезнет, когда customer.b2b? истинно.

newsletter​

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

Опт-ин на email с кнопкой подписки. Использует нативную форму подписки клиента Shopify — подписчики попадают в ваш список клиентов Shopify с флагом newsletter.

industries-grid​

Файл секции: sections/industries-grid.liquid

Редакторская сетка карточек для демонстрации вертикалей, которые вы обслуживаете — HVAC · Производство · Эксплуатация зданий · Морская отрасль · Аэрокосмическая.

Настройки на блок: изображение, заголовок, ссылка.

resource-hub​

Файл секции: sections/resource-hub.liquid

Список загрузок для datasheet-ов, MSDS, брошюр, сертификатов. Каждая запись — ссылка на файл.

Настройки на блок: заголовок, файл (PDF), описание, опциональная иконка.

services-grid​

Файл секции: sections/services-grid.liquid

Плитки с overlay изображений для сервисных предложений — Резка по размеру · Кастомный кит · Выездная консультация · Управление запасами.

FAQ​

faq​

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

Аккордеон на основе раскрытия (построен на нативных <details> / <summary> для полной поддержки клавиатуры + screen reader). Автоматически испускает FAQPage JSON-LD для расширенных сниппетов Google.

Настройки на блок: вопрос (текст), ответ (richtext).

Расширенные сниппеты «из коробки»

Секция автоматически испускает граф JSON-LD — вы получите FAQ-расширенные сниппеты в результатах поиска Google, не трогая код. Убедитесь, что вопросы — это реальные вопросы, которые задают покупатели (а не маркетинговый текст), так как применяются правила Google для контента.

Двухцелевые объединённые секции​

Некоторые секции сочетают две идеи в одной полосе, экономя вертикальное пространство и создавая редакторский ритм.

dual-brands-quickorder​

Файл секции: sections/dual-brands-quickorder.liquid

50/50 объединённая: сетка логотипов брендов с одной стороны, блок быстрого заказа с вставкой в корзину — с другой. Отлично для B2B-главных страниц, где вы хотите вывести метки доверия И путь к конверсии в одной полосе.

dual-resources-faq​

Файл секции: sections/dual-resources-faq.liquid

50/50 объединённая: загрузки ресурсов (datasheet-ы, брошюры) с одной стороны, FAQ-аккордеон с другой. Распространённое сочетание для отраслей с большим объёмом поддержки.

Рекомендации по порядку секций​

Предлагаемый порядок для MRO / главной страницы промышленного снабжения:

  1. Hero — ценностное предложение + основной CTA (каталог vs RFQ)
  2. Stats bar — мгновенные метки доверия
  3. Featured collection — бестселлеры или категория верха воронки
  4. Multicolumn — Почему мы в 3 столбца
  5. Industries grid — вертикали, которые вы обслуживаете
  6. Logo list — бренды, которые вы возите
  7. Dual brands + quickorder — в паре с CTA торгового списка
  8. Testimonials — цитаты покупателей с рейтингами
  9. Resource hub — загрузки
  10. FAQ — главные возражения
  11. CTA banner — Запросить КП (скрыто для вошедших B2B)
  12. Newsletter — регистрация в торговом списке

Homepage: stats bar, multicolumn, industries grid

Что дальше​