Корзина-шторка (drawer) против отдельной страницы корзины

Покупатель нашёл товар, нажал «В корзину» — и тут начинается развилка, которая тихо влияет на выручку. Один магазин мгновенно показывает выезжающую сбоку панель: «товар добавлен, продолжить покупки или оформить». Другой уводит на отдельную страницу корзины, обрывая просмотр каталога. Кажется мелочью, но именно здесь часть посетителей теряет нить и уходит. Эта статья — про выбор между корзиной-шторкой (drawer) и отдельной страницей корзины в магазине на 1С-Битрикс.

Разберём, как формат корзины влияет на конверсию и поведение на мобильных, в каких случаях выигрывает шторка, а в каких — полноценная страница, как сделать рабочий гибрид и на что смотреть в аналитике. Материал основан на нашей практике оптимизации конверсии (CRO) и разработки интернет-магазинов на 1С-Битрикс — без «универсально правильного» ответа, потому что его не существует.

Что такое корзина-шторка и страница корзины

Прежде чем сравнивать, договоримся о терминах — под «корзиной» в магазине понимают сразу несколько разных вещей, и их легко перепутать.

Корзина-шторка (drawer)

Корзина-шторка — это всплывающая панель, которая выезжает сбоку (чаще справа) или снизу и показывает содержимое корзины поверх текущей страницы. Покупатель добавляет товар, видит мгновенное подтверждение и список того, что уже в корзине, но при этом остаётся на странице каталога. Закрыл шторку — продолжил выбирать. По-английски такой паттерн называют cart drawer или mini-cart slide-out.

Отдельная страница корзины

Классический сценарий: по клику на иконку корзины (или сразу после добавления) пользователь попадает на отдельную страницу — в 1С-Битрикс это обычно /personal/cart/. Там полноценный список товаров с картинками, поля количества, промокод, итоговая сумма, иногда — первый шаг оформления. Это привычный для большинства покупателей формат, к которому не нужно привыкать.

Малая корзина в шапке

Отдельно стоит упомянуть «малую корзину» — счётчик и сумму в шапке сайта (иконка с числом товаров). Это не альтернатива первым двум форматам, а индикатор: он сообщает, что в корзине что-то есть. Часто именно клик по малой корзине открывает либо шторку, либо страницу — то есть малая корзина и определяет, какой сценарий запустится.

Почему формат корзины влияет на деньги

Корзина — это точка, где намерение купить превращается (или не превращается) в заказ. Любое лишнее трение здесь стоит дороже, чем на витрине: посетитель уже выбрал товар, и потерять его на этом шаге особенно обидно. Формат корзины влияет сразу на несколько вещей.

• Непрерывность выбора. Если после каждого «В корзину» покупателя выкидывает на отдельную страницу, он каждый раз должен возвращаться в каталог. Чем больше позиций в типичном заказе, тем дороже эти возвраты.
• Скорость отклика. Мгновенное визуальное подтверждение «товар добавлен» снижает тревогу «а сработало ли». Шторка даёт его естественно, страница — ценой перехода.
• Фокус на оформлении. Когда покупатель готов платить, ему нужен один понятный путь к оформлению. Здесь полноэкранная страница помогает сосредоточиться, а шторка может, наоборот, отвлекать на «продолжить покупки».
• Доверие на дорогом товаре. Перед оплатой крупной суммы человек хочет внимательно сверить состав и итог. Тесная шторка для этого подходит хуже, чем спокойная страница.

Иными словами, формат корзины — это компромисс между «не мешать набирать товары» и «дать сосредоточиться на оформлении». Где провести границу — зависит от того, что и как у вас покупают. Если вы боретесь ещё и за тех, кто ушёл с наполненной корзиной, посмотрите наш разбор про брошенную корзину в 1С-Битрикс: формат корзины и сценарии возврата работают в связке.

Корзина-шторка: сильные и слабые стороны

Шторка стала почти стандартом в современных магазинах не случайно — у неё есть осязаемые плюсы. Но и подводные камни тоже есть.

Где шторка выигрывает

• Не прерывает просмотр. Покупатель добавляет товар и тут же продолжает листать каталог — идеально для магазинов, где набирают много позиций (косметика, продукты, расходники, мелкая фурнитура).
• Мгновенное подтверждение. Видимая реакция на «В корзину» снимает сомнение, сработало ли действие, без перезагрузки страницы.
• Короткий путь к оформлению. Кнопка «Оформить» доступна прямо из шторки, не требуя промежуточного экрана.
• Современное ощущение. Плавная панель воспринимается как «быстрый, аккуратный магазин» — это влияет на доверие.

Где шторка рискует

• Мало места. В узкую панель трудно уместить детальное редактирование состава, поля доставки и крупные скидочные блоки.
• Можно «перегрузить». Соблазн запихнуть в шторку всё оформление приводит к тесному, неудобному экрану, особенно на мобильных.
• Привычка покупателя. Часть аудитории по привычке ищет «настоящую» страницу корзины и теряется, если её нет совсем.
• Сложнее в реализации. Корректная синхронизация количества, пересчёт суммы и работа скидок в живой панели требуют аккуратной разработки.

Вывод по шторке такой: она блестяще решает задачу «не мешать набирать корзину», но плохо подходит на роль единственного места, где покупатель принимает финальное решение о крупной покупке.

Страница корзины: когда она выигрывает

Полноценную страницу корзины рано списывать со счетов. Для целого класса магазинов она остаётся лучшим выбором — и вот почему.

• Простор для деталей. На отдельной странице помещается всё: крупные картинки товаров, подробное редактирование количества, выбор характеристик, поля промокода, расчёт доставки, блоки гарантий и допродаж.
• Спокойная сверка перед оплатой. Перед дорогой покупкой человек хочет внимательно проверить состав и итог. Полноэкранный спокойный экран располагает к этому больше, чем тесная панель.
• Привычность. Это знакомый паттерн: пользователю не нужно учиться новому интерфейсу, всё работает «как обычно».
• Проще поддерживать. Штатная страница корзины 1С-Битрикс — это готовый компонент, который не нужно изобретать; меньше кастомного кода — меньше точек отказа.

Страница особенно уместна для дорогих, технически сложных или комплектных товаров: мебель, техника, оборудование, B2B-заказы из множества позиций с уточнением характеристик. Там покупатель и так настроен на вдумчивый процесс, и «быстрый» сценарий шторки не даёт выигрыша, зато урезает место под важные детали.

Сравнение форматов по критериям

Чтобы решение было предметным, сведём сильные стороны в таблицу. Это не «оценки», а ориентир: какой формат к какой задаче ближе.

Обратите внимание: ни один столбец не «побеждает» по всем строкам. Именно поэтому правильный ответ почти всегда — не «выбрать один формат», а «понять, какие строки для вашего магазина важнее».

Мобильный сценарий: где решается всё

Для большинства российских магазинов мобильный трафик — это половина и больше всех визитов, а нередко и большинство заказов. Поэтому формат корзины нужно проектировать сначала под телефон, а уже потом под десктоп, а не наоборот.

На маленьком экране у шторки две типичные реализации:

• Нижняя шторка (bottom sheet). Панель выезжает снизу и занимает часть или почти весь экран. Удобна для краткой сводки и одной крупной кнопки «Оформить».
• Боковая шторка на весь экран. Фактически превращается в отдельный экран поверх каталога. Если она занимает весь вьюпорт, разница со страницей корзины стирается — и тогда стоит спросить себя, зачем усложнять.

Главная мобильная ошибка — попытка уместить в шторку весь процесс оформления: адрес, способ доставки, оплату, комментарии. На телефоне это превращается в тесный, прокручиваемый «колодец», в котором легко ошибиться. Здравый подход для мобильных: в шторке — краткая сводка (что в корзине, сумма) и крупная кнопка дальше, а детальное редактирование и оформление — на полноэкранной странице с удобными, большими элементами управления.

Гибрид: шторка плюс страница

На практике самый частый и самый устойчивый ответ — не выбирать одно, а сочетать. Гибридная схема забирает сильные стороны обоих форматов.

Работает это так:

1. Добавление товара → шторка. Покупатель нажимает «В корзину», сбоку выезжает компактная панель: «товар добавлен», мини-список, сумма и две кнопки — «Продолжить покупки» и «Оформить заказ».
2. «Продолжить покупки» → закрытие шторки. Панель закрывается, человек остаётся в каталоге — никакого ухода со страницы.
3. «Перейти в корзину» → полноценная страница. Когда покупатель готов вдумчиво проверить заказ, он открывает страницу корзины со всеми деталями, скидками и расчётом доставки.
4. «Оформить» → чекаут. Прямой путь к оформлению — либо со страницы корзины, либо сразу из шторки, в зависимости от сложности заказа.

Гибрид хорош тем, что покупатель сам выбирает темп: импульсному хватит шторки, вдумчивому доступна страница. Минус — больше работы при разработке и тестировании, потому что нужно поддерживать оба интерфейса в согласованном состоянии (одинаковые суммы, скидки, количество). Но для большинства магазинов с разнородной аудиторией это окупается.

Что показывать внутри корзины

Спор «шторка или страница» легко заслоняет более важный вопрос: что именно показано внутри корзины. Плохое наполнение убивает конверсию в любом формате. Минимальный набор, который покупатель ожидает увидеть:

• Состав заказа. Название, картинка, выбранная характеристика (размер, цвет), цена за единицу и количество с возможностью изменить.
• Итоговая сумма. Понятный итог с учётом количества и скидок, без «сюрпризов» на следующем шаге.
• Скидки и промокод. Поле промокода и видимая экономия, если она есть.
• Призыв к действию. Заметная, однозначная кнопка «Оформить заказ».
• Сигналы доверия. Способы оплаты и доставки, гарантия возврата — коротко, чтобы снять тревогу перед оплатой.

Важно не перегружать: в шторке этот набор подаётся компактно, на странице — развёрнуто. И в том, и в другом случае главная кнопка должна быть очевидной. Если покупателю приходится искать, как оформить заказ, формат корзины уже не спасёт.

Как это устроено в 1С-Битрикс

В 1С-Битрикс корзина собрана из штатных компонентов, и это важно понимать, чтобы оценивать трудозатраты на любой из форматов.

• Малая корзина — компонент bitrix:sale.basket.basket.line (его часто зовут small.cart): счётчик и сумма в шапке, выпадающий мини-список. Именно его обычно превращают в шторку.
• Страница корзины — компонент bitrix:sale.basket.basket на странице /personal/cart/: полноценный список с редактированием количества, скидками и переходом к оформлению.
• Оформление заказа — компонент bitrix:sale.order.ajax: следующий за корзиной шаг, на котором собираются данные о доставке, оплате и покупателе.
• AJAX-добавление — товар кладётся в корзину без перезагрузки страницы, а интерфейс (шторка или малая корзина) обновляется на лету.

Практический вывод: страница корзины существует «из коробки» и почти не требует разработки; шторка — это надстройка над малой корзиной и AJAX-добавлением, которую делают в рамках доработки витрины. Менять штатные компоненты ради красивой панели не нужно — шторка строится поверх них, что снижает риск сломать оформление заказа. Если вы планируете глубокую переработку пути покупателя, это уже задача уровня разработки на 1С-Битрикс, а не правки шаблона.

Сразу за корзиной идёт оформление заказа, и важно, чтобы выбранный в шторке или на странице состав без потерь доехал до шага оплаты. Как подключить приём денег на этом шаге, мы разбираем в материале про подключение ЮKassa, СБП и Т-Кассы — корзина и оплата работают в одной связке, и проектировать их стоит вместе.

Скидки, промокоды и допродажи в корзине

Корзина — естественное место, где работают скидки и где можно аккуратно поднять средний чек. Но и здесь формат накладывает ограничения, которые стоит учесть заранее.

Скидки и промокоды. В 1С-Битрикс правила скидок и промокоды пересчитывают сумму в реальном времени. В шторке нужно показывать итог уже с учётом скидки и, по возможности, поле промокода — но компактно. На странице места больше: можно показать и исходную сумму, и экономию, и применённый промокод отдельной строкой. Если у вас сложные правила скидок (пороги, подарки за сумму), полноценная страница доносит их понятнее.

Допродажи (cross-sell). Блок «С этим товаром покупают» в корзине повышает средний чек, но он требует места. В тесной шторке его легко превратить в навязчивый шум; на странице корзины для него есть простор. Разумный компромисс — в шторке давать одну-две релевантные рекомендации, а развёрнутый блок допродаж размещать на странице корзины.

Главное правило: ни скидки, ни допродажи не должны мешать основному действию. Кнопка «Оформить» всегда остаётся главным, самым заметным элементом — всё остальное вторично.

Производительность и AJAX

Любая «живая» корзина — это JavaScript и обращения к серверу при добавлении товара, изменении количества, пересчёте суммы. Если это сделано небрежно, страдает скорость, а вместе с ней и конверсия, и метрики Core Web Vitals.

• Не грузите тяжёлое заранее. Скрипты и разметку шторки разумно подгружать тогда, когда она нужна, а не на каждой странице каталога «про запас».
• Минимум запросов на действие. Добавление товара и пересчёт корзины должны укладываться в один-два лёгких AJAX-запроса, а не в каскад обращений.
• Согласованность с кэшем. Корзина персональна, поэтому её нельзя кэшировать «как все», но и ломать кэш каталога ради неё не стоит. На композитном сайте корзину выносят в динамическую часть.
• Отзывчивость интерфейса. Пока идёт запрос, покупатель должен видеть, что действие принято (индикатор), иначе он нажмёт кнопку повторно.

Тема скорости тесно связана с архитектурой витрины в целом — про композитный сайт и Core Web Vitals мы пишем в рубрике «Разработка и архитектура». Если каталог большой, корзину-шторку стоит проектировать с оглядкой на производительность, а не отдельно.

Как выбрать формат под свой магазин

Чтобы не гадать, ответьте на несколько вопросов о своём магазине — они почти однозначно подсказывают, в какую сторону смотреть.

Если ответы тянут в разные стороны — это сигнал в пользу гибрида. Он закрывает оба сценария ценой чуть большей разработки. А вот выбирать формат «потому что у конкурента так» — плохая идея: у вас другой товар, другая аудитория и другая структура заказа.

A/B-тест и метрики корзины

Лучший способ снять спор о формате — проверить его на своих покупателях. Корзина чувствительна к деталям, и гипотезу «шторка поднимет конверсию» правильнее тестировать, а не принимать на веру.

Что измерять при сравнении форматов:

• Конверсия из корзины в оформление. Доля тех, кто из корзины перешёл к оформлению заказа.
• Конверсия из оформления в оплату. Дошли ли до оплаченного заказа — формат корзины влияет и на этот шаг.
• Среднее число позиций в заказе. Шторка нередко увеличивает его за счёт непрерывного выбора.
• Доля брошенных корзин. Растёт или падает после смены формата.
• Поведение на мобильных отдельно. Эффект на телефоне и на десктопе может быть разным — смотрите сегменты раздельно.

Если трафика для статистически значимого A/B-теста не хватает, опирайтесь на качественные данные: записи сессий, тепловые карты, опросы, а также здравый смысл по типу товара. Но даже тогда фиксируйте метрики «до» и «после», чтобы видеть направление эффекта. Подробнее о методике улучшения конверсии — на странице услуги оптимизации конверсии.

Частые ошибки

Большинство проблем с корзиной повторяются из проекта в проект. Вот те, что встречаются чаще всего — и которых легко избежать.

• Запихнуть всё оформление в шторку. Адрес, доставка, оплата и комментарии в узкой панели на мобильном превращаются в тесный «колодец». Оставьте в шторке сводку, а оформление — на полноэкранной странице.
• Убрать страницу корзины совсем. Часть аудитории по привычке ищет «настоящую» корзину. Если её нет, эти покупатели теряются. Гибрид безопаснее.
• Скрыть кнопку «Оформить». Главное действие корзины должно быть самым заметным. Если его приходится искать, формат уже не важен.
• Несогласованные суммы. Сумма в шторке отличается от суммы на странице корзины из-за разной работы со скидками — прямой путь к недоверию.
• Тяжёлые скрипты на каждой странице. Шторка, которая открывается раз за визит, не должна замедлять весь каталог.
• Менять формат вслепую. Переключение «страница ↔ шторка» без замера метрик — игра вслепую. Сначала зафиксируйте показатели.
• Игнорировать мобильных. Формат, удобный на десктопе, может разваливаться на телефоне. Проектируйте сначала под мобильный.

Чек-лист перед внедрением

Короткий список, по которому удобно свериться до того, как менять формат корзины на боевом сайте:

1. Понят тип товара и заказа. Известно, импульсные это покупки или вдумчивые, много в заказе позиций или мало.
2. Оценена доля мобильных. Решено, что формат проектируется в первую очередь под телефон.
3. Выбрана схема. Только страница, только шторка или гибрид — с осознанной причиной, а не «как у всех».
4. Согласовано наполнение корзины. Состав, сумма, скидки, промокод, заметная кнопка «Оформить».
5. Проверены суммы и скидки. Итог в шторке и на странице совпадает, скидки и промокоды считаются одинаково.
6. Учтена производительность. Скрипты шторки не грузятся «про запас», корзина вынесена в динамику на композитном сайте.
7. Зафиксированы метрики «до». Конверсия корзины, оформления и оплаты, доля брошенных корзин, отдельно по мобильным.
8. Запланирована проверка. A/B-тест или хотя бы сравнение «до/после» с записями сессий.

Вывод

Спор «корзина-шторка против страницы» не имеет единственно верного ответа, потому что формат корзины — это компромисс между «не мешать набирать товары» и «дать сосредоточиться на оформлении». Шторка выигрывает там, где покупки импульсные и позиций много; страница — там, где товар дорогой, сложный и его внимательно сверяют перед оплатой. А чаще всего побеждает гибрид: шторка как быстрое подтверждение и страница для вдумчивого редактирования.

Выбирайте формат не по моде, а по данным своего магазина: типу товара, доле мобильных, среднему числу позиций — и проверяйте гипотезу на трафике. Тогда корзина перестанет терять покупателей и начнёт работать на выручку, а не против неё.