Покупатель открыл карточку товара, прочитал описание, пролистал характеристики, посмотрел отзывы — и в этот момент решился купить. Тянется к кнопке «В корзину»... а её нет: она осталась вверху, за несколькими экранами прокрутки. Приходится скроллить обратно, и часть людей на этом теряется. Именно эту проблему решает sticky-кнопка — залипающая панель, которая держит действие «В корзину» под рукой на всей длине карточки.
Но липкая панель — не универсальное «улучшение конверсии»: где-то она поднимает добавления в корзину, а где-то только мешает и занимает место. Разберём, когда sticky действительно работает, что в него класть, как связать с выбором SKU и как аккуратно реализовать на 1С-Битрикс. Тема продолжает наш разбор в статье про липкую кнопку и мини-корзину в карточке товара.
Коротко
- Sticky-кнопка держит действие «В корзину» доступным на длинной карточке товара.
- Помогает на длинных карточках; на коротких — лишний элемент, эффект близок к нулю.
- Панель обязана обновлять цену, наличие и SKU при смене торгового предложения.
- Реализуйте на CSS position: sticky и IntersectionObserver, эффект проверяйте A/B-тестом.
Что такое sticky-кнопка и зачем она
Sticky (липкий, залипающий) элемент — это блок, который остаётся закреплённым в области видимости при прокрутке страницы. В карточке товара так закрепляют панель с ключевым действием: ценой и кнопкой «В корзину». Пока покупатель читает контент, панель следует за ним, и решение о покупке можно превратить в клик в любой момент, а не только на первом экране.
Смысл в устранении трения. Каждый лишний шаг между «хочу купить» и «положил в корзину» отсеивает часть покупателей. Возврат к кнопке прокруткой вверх — как раз такой шаг. Sticky-панель его убирает: действие всегда рядом.
Проблема длинной карточки товара
Карточка товара в современном магазине — это длинная страница: галерея, цена, варианты, описание, характеристики, комплектация, отзывы, сопутствующие товары. Чем полнее карточка, тем лучше она отвечает на вопросы покупателя — но тем дальше уезжает кнопка «В корзину» при чтении.
Возникает конфликт: подробная карточка помогает принять решение, но прячет действие, которым это решение реализуется. Sticky-панель разрешает конфликт — можно делать карточку сколь угодно подробной, не боясь «потерять» кнопку.
Когда панель помогает, а когда мешает
Главная мысль статьи: sticky-кнопка полезна не всегда. Её эффект зависит от того, уходит ли основная кнопка из зоны видимости при типичном сценарии просмотра.
| Ситуация | Липкая панель | Почему |
|---|---|---|
| Длинная карточка с описанием и отзывами | Помогает | Кнопка уходит вверх при чтении |
| Короткая карточка, всё на первом экране | Не нужна | Кнопка и так на виду |
| Мобильный длинный скролл | Сильно помогает | Прокрутка длиннее, кнопка теряется быстрее |
| Товары с вариантами (одежда, техника) | Помогает при связке с SKU | Держит выбор и цену под рукой |
| B2B-карточка с оптовым заказом | Помогает | Быстрый доступ к количеству и добавлению |
Что показывать в липкой панели
Панель должна оставаться лёгкой, но давать достаточно контекста, чтобы человек добавлял осознанно. Оптимальный состав:
- Товар. Короткое название или миниатюра, чтобы было понятно, что именно добавляешь.
- Цена. Актуальная, с учётом выбранного варианта и, для B2B, цены группы клиента.
- Кнопка «В корзину». Основное действие, крупное и заметное.
- Наличие. Короткий индикатор «в наличии / под заказ», если это критично для категории.
Всё остальное — характеристики, рейтинг, доставка — оставьте основному блоку. Липкая панель перегружается легко, а перегруженная панель отвлекает от единственного действия, ради которого существует.
Sticky и торговые предложения (SKU)
Самая частая скрытая ошибка — панель, оторванная от выбора варианта. Покупатель выбирает красный цвет и размер L, а в панели по-прежнему цена и артикул базового предложения — и в корзину уходит не то. Для товаров с вариантами sticky обязан быть связан с выбором торгового предложения.
Это значит, что при смене SKU в панели обновляются цена, наличие и сам добавляемый товар. В 1С-Битрикс карточка с вариантами строится на торговых предложениях, а компонент каталога генерирует JS-события при смене выбора. Панель подписывается на эти события и синхронизируется. Механику вариантов и SKU мы подробно разбираем в отдельных материалах по каталогу.
Мобильная версия и safe-area
На мобильном sticky-панель обычно фиксируется внизу экрана — это самая эргономичная зона для большого пальца. Но именно на мобильном чаще всего допускают ошибки: панель перекрывает контент или налезает на жестовую навигацию.
- Учитывайте safe-area. Нижние отступы через env(safe-area-inset-bottom), чтобы панель не пряталась под системной полосой.
- Появляйтесь после прокрутки. Пока основная кнопка видна, панель не нужна — показывайте её, только когда кнопка ушла вверх.
- Не перекрывайте важное. Панель не должна заслонять цену, характеристики и последний блок контента.
- Одна кнопка, не дубли. Если на первом экране кнопка видна, липкую в этот момент скрывайте.
Вёрстка: position sticky против скриптов
Технически залипание можно сделать двумя путями. Первый — нативный CSS position: sticky: браузер сам держит блок закреплённым в пределах контейнера, без единой строки JavaScript. Это самый лёгкий и производительный вариант для бокового блока на десктопе.
Второй — скрипт, который отслеживает прокрутку и переключает состояние панели (показать/скрыть, зафиксировать). Он нужен, когда логика сложнее: панель появляется только после того, как основная кнопка ушла из вида. Здесь правильный инструмент — IntersectionObserver: он сообщает, виден ли основной блок с кнопкой, без тяжёлого пересчёта на каждый кадр прокрутки.
Реализация в 1С-Битрикс
В 1С-Битрикс карточка товара строится компонентом торгового каталога, и sticky-панель встраивается в его шаблон. Общая последовательность такая:
- Разметьте панель в шаблоне. Отдельный блок с товаром, ценой и кнопкой рядом с основным блоком покупки.
- Свяжите с выбором SKU. Подпишитесь на события смены торгового предложения, обновляйте цену, наличие и id добавляемого товара.
- Настройте появление. Через IntersectionObserver показывайте панель, когда основная кнопка ушла из видимости.
- Подключите добавление в корзину. Кнопка панели работает через тот же AJAX-механизм корзины, что и основная, — единый обработчик.
- Проверьте на мобильном. Safe-area, отсутствие перекрытий, корректная работа с мини-корзиной.
Чтобы такие правки шаблона не ломали боевой сайт, выкатывайте их через нормальный процесс деплоя — об этом статья про CI/CD и деплой для 1С-Битрикс. А если панель отдаёт данные о наличии и цене через API, стоит держать в голове безопасность REST и вебхуков.
Производительность прокрутки
Плохо реализованная липкая панель способна испортить плавность прокрутки — особенно на мобильном. Причина почти всегда одна: тяжёлые вычисления на событии scroll, которое срабатывает десятки раз в секунду.
- CSS вместо JS, где можно. position: sticky не грузит основной поток вообще.
- IntersectionObserver вместо scroll. Он реагирует на видимость, а не считает координаты на каждом кадре.
- Без layout-трешинга. Не читайте и не меняйте размеры элементов в цикле прокрутки.
- Лёгкая панель. Минимум содержимого — меньше перерисовок.
Общая скорость карточки тоже важна: если страница и без панели тяжёлая, начинать надо с неё. Диагностику узких мест закрывает аудит и оптимизация 1С, а инфраструктурную базу — статья про хостинг и инфраструктуру для 1С-Битрикс.
Как измерить эффект и A/B-тест
Поскольку sticky-панель помогает не всем, её эффект стоит проверять, а не принимать на веру. Базовая метрика — конверсия в добавление в корзину из карточки товара. Дополнительно смотрят долю добавлений именно с липкой панели и глубину прокрутки перед добавлением.
Простейший тест — показать панель половине трафика и сравнить конверсию за период. Если карточки длинные, а трафик мобильный, эффект обычно положительный; на коротких карточках разница может быть нулевой. Главное — принимать решение по своим данным, а не по чужим «кейсам».
Частые ошибки
- Панель не связана с SKU. В корзину уходит не выбранный вариант, а базовое предложение.
- Липкая кнопка на короткой карточке. Основная и так видна — панель лишняя.
- Перегруженная панель. Слишком много данных отвлекает от единственного действия.
- Игнор safe-area на мобильном. Панель прячется под жестовой навигацией.
- Тяжёлый обработчик scroll. Прокрутка дёргается, особенно на смартфонах.
- Дублирование кнопки. Липкая и основная показаны одновременно и конкурируют.
- Внедрили без замера. Никто не знает, помогла панель или нет.
Чек-лист внедрения
- Проверка сценария. Убедились, что основная кнопка уходит из вида при обычном просмотре.
- Состав панели. Товар, цена, наличие, кнопка — без перегруза.
- Связь с SKU. При смене варианта обновляются цена, наличие и добавляемый товар.
- Появление. Панель показывается только после ухода основной кнопки.
- Мобильная версия. Safe-area учтён, перекрытий нет, дублей нет.
- Производительность. CSS sticky и IntersectionObserver, без тяжёлого scroll.
- Замер. Настроен учёт добавлений и, по возможности, A/B-тест.
Вывод
Sticky-кнопка «В корзину» — точечный инструмент, а не универсальное улучшение. Она устраняет реальное трение на длинных карточках товара, где действие покупки уезжает из зоны видимости, и особенно ценна на мобильном с его длинной прокруткой. Но на коротких карточках она бесполезна, а сделанная небрежно — вредит скоростью прокрутки и путаницей с вариантами.
Правильный подход: добавлять липкую панель там, где она решает проблему, связывать её с выбором торгового предложения, реализовывать на лёгких нативных механизмах и проверять эффект на своих данных. Тогда залипающая кнопка не «модный элемент», а честный плюс к конверсии.
