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

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

Ключевые факты

С чего началась задача

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

Отдельно нужно было добавить кнопку сброса фильтров. Без неё пользователь после нескольких выбранных параметров вынужден вручную снимать отметки или возвращаться назад. Это мелочь только на уровне разработки, а в интерфейсе такая кнопка заметно снижает трение.

Что усложняло задачу

Фильтры должны были остаться удобными не только на компьютере, но и на мобильных устройствах. В мобильной версии длинные списки параметров быстро занимают весь экран, особенно если в фильтре много стилей и дополнительных характеристик.

Поэтому задача была не просто добавить новый фильтр, а сохранить аккуратную структуру блока. Покупатель должен видеть нужные параметры, но не утонуть в длинном списке ещё до просмотра товаров.

Что решили сделать

Мы разделили задачу на две части: каталог и финальные шаги покупки.

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

Реализация

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

Результат

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

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

Корзина и оформление заказа стали нагляднее за счёт изображений товаров. Покупателю проще проверить состав заказа перед оплатой, а значит снижается риск ошибки и лишних сомнений на финальном шаге.

Что мы сделали для клиента

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