Секции Sales Boost
Это конверсионно-ориентированные секции в Vertex — urgency-сигналы, промо-поверхности, модальные потоки, бандл-блоки. Ни одна из них не требует стороннего приложения. Все они соответствуют политике Shopify Theme Store (без персистентных вишлистов, без трекинг-скриптов, без партнёрских ссылок).
Сложите слишком много urgency-сигналов, и они нейтрализуют друг друга. Обратный отсчёт рядом со счётчиком низк ого запаса рядом с промо-попапом кричит отчаяние. Выберите тот, что соответствует вашей кампании, сделайте на него ставку и ротируйте.
promo-banner
Файл секции: sections/promo-banner.liquid
Закрываемый верхний баннер — обычно используется для продвижения общесайтовой распродажи, порога бесплатной доставки или сезонной кампании. Отличается от announcement bar (которая является всегда включённым оформлением); промо-баннер управляется кампанией и закрываемый.
Настройки
| Настройка | Тип | Заметки |
|---|---|---|
| Text | Richtext | Короткое value-сообщение — «Весенняя распродажа · 15% на заказы от $1 000». |
| Background color | Color | Выберите высококонтрастный акцент — кобальтовый, красно-оранжевый, бирюзовый и т.д. |
| Link URL | URL | Цель клика для баннера (вся полоса кликабельна). |
| Link label | Text | Встроенный CTA — «Купить со скидкой →». |
| Dismissible | Checkbox | По умолчанию включено. Добавляет кнопку закрытия × + персистентность localStorage. |
| Position | Select | above_header (по умолчанию) · below_header. Above-header читается более срочно; below-header читается больше как баннер. |
Закрываемость
Когда Dismissible включено, кнопка × записывает ключ vertex_promo_dismissed:{section-id} в localStorage. Баннер остаётся скрытым, пока посетитель не очистит данные сайта — или вы не переопубликуете секцию с другим ID.
Если вы хотите снова показать закрытое промо для новой кампании, измените ID секции (удалите + заново добавьте секцию в кастомайзере). Старый ключ localStorage больше не будет совпадать, и баннер снова появится для всех.
promo-popup
Файл секции: sections/promo-popup.liquid
Автоматически открывающееся модальное окно с изображением, заголовком, текстом и CTA. Настраиваемый триггер и cookie-каденс, чтобы посетители не видели его при каждой загрузке страницы.
Настройки
| Настройка | Тип | Заметки |
|---|---|---|
| Heading | Text | «Подпишитесь и сэкономьте 10%» / «Подождите — получите бесплатный кит с образцами». |
| Body | Richtext | Короткое подтверждение + value-предложение. |
| Image | Image | Боковая иллюстрация (или full-bleed фон). |
| CTA label | Text | «Подписаться» / «Получить кит». |
| CTA URL | URL | Страница формы или товар. |
| Trigger | Select | immediate · on_scroll (после прокрутки 50% страницы) · exit_intent (детекция увода курсора). |
| Delay seconds | Number | Используется только когда триггер — immediate. По умолчанию 5. |
| Cookie expiry days | Number | По умолчанию 7. Посетители, которые закрыли или сконвертировались, не увидят его ещё N дней. |
Триггеры объяснены
| Триггер | Лучше всего для | Соображение UX |
|---|---|---|
| Immediate (delay) | Подписки на рассылку, предложения для первого посетителя | Самый интрузивный — используйте задержку минимум 5–10 секунд |
| On scroll (50%) | Сигнал вовлечённости — срабатывает только после прокрутки, сигнализируя об интересе | Лучший баланс конверсии + UX |
| Exit intent | Предложения «последний шанс», восстановление брошенных | Только десктоп — exit-intent не срабатывает надёжно на мобильных |
Cookie-ключ — vertex_promo_popup:{section-id}. Модальное окно не откроется снова, пока cookie не истечёт.
countdown
Файл секции: sections/countdown.liquid
Счётчик дней / часов / минут / секунд. Живой подсчёт через JS, сервер-рендеринг для начального состояния (без мерцания).
Настройки
| Настройка | Тип | Заметки |
|---|---|---|
| Heading | Text | «Весенняя распродажа заканчивается через». |
| End date | Date picker | Дата + время истечения. Хранится в часовом поясе магазина мерчанта. |
| Expired text | Text | Заменяет счётчик, когда таймер обнуляется. «Распродажа закончилась». |
| Link URL | URL | Опциональный CTA под счётчиком. |
| Link label | Text | «Купить сейчас». |
| Color scheme | Select | Стандартный выпадающий список цветовых схем. |
Как идёт подсчёт
assets/countdown.js запускает цикл requestAnimationFrame, который обновляет таймер каждую секунду. Когда целевое время достигнуто, счётчик заменяется на Expired text. Ссылка/CTA скрывается после истечения.
Фейковые обратные отсчёты (вечно 24 часа, сбрасываются при перезагрузке страницы) разрушают доверие. Привяжите End date к реальному окончанию кампании и позвольте секции позаботиться о состоянии истечения.
featured-bundles
Файл секции: sections/featured-bundles.liquid
Кураторские бандл-карточки с изображением, заголовком, бейджем скидки и ATC. Каждый блок — это один бандл (обычно родительский товар, который объединяет 2–5 SKU, настроенный как Shopify Bundle в вашей админке).
Настройки на блок
| Настройка | Тип | Заметки |
|---|---|---|
| Product | Product picker | Родительский товар бандла. |
| Bundle label | Text | Переопределить название товара — «Starter MRO Kit». |
| Discount text | Text | Бейдж поверх изображения — «Save 15%» / «3 по цене 2». |
| Description | Richtext | Короткое value-предложение под заголовком. |
Настройки секции
- Heading — «Бандл и экономия»
- Columns — 2 / 3 / 4
- Show price — переключатель (учитывает цены только после входа)
Стилизация бейджа скидки
Текст скидки отрисовывается как круглая плашка над верхним правым углом изображения. Используйте акцентные цвета (кобальтовый, красно-оранжевый, бирюзовый) — бейдж достаточно маленький, чтобы не перегружать визуал бандла.
Счётчик остатков (индикатор низкого запаса)
Сниппет: snippets/stock-counter.liquid (отрисовывается как блок в main-product)
Уже рассмотрено в Страница товара. Он появляется только для вариантов, по которым вы отслеживаете запасы, и переключается на предупреждение «Осталось только N», как только запас достигает порога низкого остатка (10 единиц). Порог жёстко задан на 10 — это не настройка темы. Создаёт urgency, не раскрывая точный инвентарь конкурентам.
Состояния:
- Больше 10 в наличии: «В наличии»
- При остатке 10 или ниже: «Осталось только 4»
- Доступно под заказ (ноль, настроено на продолжение продаж): «Back-ordered — ships in 7–10 days»
- Распродано (ноль, не под заказ): «Sold out»
Модальное окно Quick view
Ассет: assets/quick-view.js + snippets/quick-view-button.liquid
Запускается кнопкой Quick view на карточках товара. Открывает модальное окно с галереей товара, выбором варианта, вводом количества и ATC — не покидая страницу коллекции.
Что отрисовывается в модальном окне
- Галерея с несколькими изображениями (со свайпом на мобильном)
- Заголовок + цена (учитывает цены только после входа + цену каталога B2B)
- Выбор варианта
- Ввод количества (с применением MOQ / max / case-pack)
- Кнопка ATC
- Ссылка «Подробнее →» на PDP
Настройки (на карточке товара / секциях коллекций)
- Show quick view button — переключатель (на секцию:
featured-collection,collection-list, результаты поиска, related products) - Quick view button label — текст (по умолчанию «Quick view»)
Когда включать / выключать
| Сценарий | Рекомендация |
|---|---|
| Каталог с большим объёмом, где покупатели быстро сравнивают варианты | Включить — ускоряет поток «просмотреть 20 товаров, добавить 3» |
| Высокотехничный каталог, где покупателям нужны datasheet-ы + спецификации перед решением | Выключить — quick view не показывает спецификации или документы; принудите клик до PDP |
Когда что использовать
| Цель | Секция |
|---|---|
| Привлечь внимание к общесайтовой кампании | promo-banner |
| Захватить email + предложить скидку для первого визита | promo-popup |
| Ограниченное по времени предложение с жёстким истечением | countdown |
| Подсветить кураторские мультитоварные предложения | featured-bundles |
| Urgency на PDP без раскрытия точного инвентаря | Счётчик остатков |
| Уменьшить трение в потоке страница коллекции → ATC | Quick view |
Что дальше
- Секции страницы товара → — Счётчик остатков на PDP в полном объёме
- Маркетинг главной страницы → — Где разместить промо-баннеры на главной
- Секции finder → — Make/Model/Year + Brand/Category/Capacity finder
- Справочник по настройкам темы → — Цветовые схемы, вёрстка и перекл ючатели страницы товара