Вернуться к кейсам 
Кейс: интернет-магазин цветов Pion.ru — от проваленной вёрстки до автоматизированной торговой платформы
О клиенте
Pion.ru — служба доставки цветов с круглосуточным колл-центром и собственной флористической мастерской. Компания работает по всей России: принимает заказы через сайт, собирает букеты под индивидуальные запросы (включая свадебное оформление) и доставляет курьером в пределах двух часов по Москве. Ассортимент — от классических роз и тюльпанов до экзотики, плюс декор, игрушки и аксессуары к любому событию.
На момент обращения в разработку у Pion.ru уже была готовая дизайн-концепция интернет-магазина и частично собранная верстка. Предыдущий подрядчик потратил время и бюджет клиента на результат, которым невозможно было пользоваться. Задача стояла нетривиальная: цветочный бизнес — это не просто витрина, а производственная логистика с коротким жизненным циклом товара, мультигородской сетью и десятками переменных в ценообразовании.
С чем пришли: 5 болевых точек
1. Нерабочая вёрстка. Готовая дизайн-концепция не была реализована в коде. То, что собрал предыдущий подрядчик, не соответствовало макетам: вёрстка «плыла», элементы съезжали, на мобильных устройствах сайт был непригоден для использования. Фундамент интернет-магазина отсутствовал.
2. Нет каталога с бизнес-фильтрацией. Цветочному магазину недостаточно стандартной сортировки по цене. Покупатель ищет букет по событию (свадьба, день рождения, юбилей), по адресату (девушке, маме, коллеге), по составу (розы, тюльпаны, микс), по бюджету. Ничего из этого реализовано не было.
3. Корзина без логики цветочного заказа. Стандартный e-commerce-флоу «добавил — оплатил — доставили» не учитывает специфику: ночная доставка стоит дороже дневной, стоимость меняется от города к городу, а состав букета влияет на итоговую цену. Корзина должна собирать эти параметры автоматически.
4. Карточка товара без дополнений. Клиент терял возможность увеличить средний чек: нельзя было предложить «собрать букет побольше», добавить открытку, упаковку или игрушку прямо из карточки товара. Каждая позиция продавалась как монолит — без апсейла.
5. Отсутствие автоматизации. Складская 1С жила отдельно, сайт — отдельно. Администратор вручную переносил данные об остатках, вручную считал цены, вручную выгружал товары на Яндекс Маркет. Доставка рассчитывалась «на глаз». Риски: ошибки в ценообразовании, продажа отсутствующих позиций, потерянные заказы и замороженные деньги.
Решение 1. Переработка вёрстки
Первый этап — полный сброс того, что собрал предыдущий подрядчик. Дизайн-макеты остались прежними: задача была не перерисовать, а реализовать. Собрана семантически корректная HTML-структура, которая точно воспроизводила утверждённый дизайн во всех состояниях — ховеры, активные элементы, состояния загрузки, пустые блоки. Вёрстка проверена на соответствие макетам попиксельно по всем ключевым разрешениям.
Отдельно проработана типографика и отступы для контентной части: цветочный магазин продаёт эмоцию, и визуальная подача — половина конверсии. Картинки букетов на первом экране, плавные переходы между разделами, воздух между блоками — всё, что создаёт ощущение премиального продукта. В результате получена чистая кодовая база, готовая к натяжке на CMS без грязных хаков и костылей.
Решение 2. Каталог с фильтрацией под цветочную специфику
Стандартный каталог на Битриксе доработан под бизнес-логику флористического магазина. Реализована многофакторная фильтрация:
- По цене — от и до, с динамическим пересчётом количества найденных позиций.
- По событию — свадьба, день рождения, романтический вечер, корпоратив, «без повода».
- По адресату — девушке, маме, коллеге, мужчине.
- По составу — розы, тюльпаны, микс, экзотика.
- По городу — привязка к региону доставки автоматически фильтрует доступный ассортимент.
Фильтры работают без перезагрузки страницы. Для администратора настройка выдачи интуитивно понятна: любой параметр добавляется или убирается из панели фильтрации в пару кликов. Покупатель с одной стороны видит основу ассортимента, с другой — может прицельно сузить выдачу под конкретный запрос, не теряясь в сотнях позиций.
Решение 3. Корзина с автоматическим расчётом
Корзина учитывает все переменные, которые влияют на итоговую стоимость цветочного заказа:
- Геолокация. При выборе города доставки корзина автоматически подставляет стоимость и условия — без ручного переключения тарифных зон. Адреса внутри МКАД, за МКАД и в регионы — три разных сценария, и покупатель видит релевантный с первого шага.
- Ночной коэффициент. Если доставка заказывается в ночной интервал, к стоимости автоматически прибавляется наценка. Никаких ручных доплат и звонков менеджера.
- П платёжные методы. Подключены все необходимые способы оплаты — онлайн (карты, электронные кошельки), наличные курьеру, безналичный расчёт для юрлиц.
Корзина отдаёт собранные данные в CRM и 1С без потерь: состав заказа, адрес, временной слот, контактные данные, способ оплаты. Менеджер видит полную картину и не тратит время на дозвон для уточнения деталей.
Решение 4. Карточка товара с конструктором букета
Карточка товара превращена в мини-конструктор. Помимо прямого функционала — фотографии, описание, характеристики, цена — реализована механика дополнений:
- Количество цветов. Покупатель может увеличить число стеблей в букете (например, «15 роз» вместо «9 роз»). Цена пересчитывается динамически.
- Состав. Если букет допускает вариации (например, добавить пионы к розам), выбор отображается через чекбоксы или радиокнопки без ухода с карточки.
- Сопутствующие товары. Открытка, фирменная упаковка, мягкая игрушка — выводятся блоками ниже основного товара и добавляются в корзину одним кликом.
В результате средний чек растёт без агрессивного апсейла. Покупатель не уходит в отдельный раздел за открыткой — всё собирается на одной странице за минуту.
Решение 5. Интеграции: 1С, Retail CRM, Яндекс Маркет, геолокация, антифрод
Самый объёмный этап. Настроена двусторонняя интеграция с 1С: склад ежедневно отправляет в админку сайта актуальный срез по ассортименту — какие цветы есть в наличии, в каком количестве, по какой закупочной цене. Администратор, видя эту картину, составляет букеты — и они автоматически публикуются на сайте с корректными остатками. Обратно в 1С уходят заказы: после оформления на сайте информация о проданных позициях и деньгах попадает в учётную систему без ручного ввода.
Retail CRM собирает воронку: от первого визита до повторного заказа. Все коммуникации с клиентом — история звонков, переписка, статусы заказов — хранятся в одной системе, а не размазаны по Excel-таблицам и почтовым ящикам.
Для Яндекс Маркета настроена автоматическая выгрузка ассортимента. Товары попадают на витрину маркетплейса без ручного копирования карточек и цен. Обновление — по заданному расписанию.
Ценообразование учитывает город продажи. Один и тот же букет в Москве, Казани и Краснодаре может стоить по-разному — разница заложена в коэффициенты, на которые умножается базовая цена. Вся математика происходит на стороне сайта автоматически.
Антифрод-слой отсеивает нежелательные заказы: ночные заказы с подозрительных IP, многократные попытки оплаты с отклонённых карт, заказы на несуществующие адреса. Фильтрация снижает риск заморозки денег на эквайринге и отмен после сборки букета.
Решение 6. Мобильная версия
Мобильная адаптация — это не уменьшенная копия десктопа, а отдельная проработка пользовательских сценариев. С телефона покупатель чаще всего: быстро повторить прошлый заказ, найти букет по бюджету, оформить доставку в один клик, позвонить в колл-центр. Все сценарии вынесены на первый план:
- Кнопка звонка закреплена внизу экрана.
- Карточка товара оптимизирована под вертикальную прокрутку: фотографии свайпаются, характеристики не требуют горизонтального скролла.
- Корзина и чекаут собраны в минимальное количество шагов — без лишних полей и подтверждений.
- Каталог адаптирован под тач-интерфейс: крупные карточки, фильтры в выпадающей шторке, кнопка «повторить заказ» в личном кабинете.
Адаптация охватывает весь функционал — не только витрину, но и личный кабинет, страницы оплаты, историю заказов. Мобильная версия не урезана: всё, что есть на десктопе, доступно со смартфона.
Решение 7. Автоматическая WebP-конвертация изображений
Финальный штрих — оптимизация загрузки. Интернет-магазин цветов оперирует сотнями фотографий высокого разрешения. Каждая карточка букета — это серия снимков, и если их не оптимизировать, страница каталога становится тяжёлой.
Настроена автоматическая конвертация всех изображений в формат WebP с фолбэком на JPEG/PNG для браузеров, не поддерживающих WebP. Сервер отдаёт изображение в том формате, который поддерживает браузер посетителя. Сжатие происходит при загрузке файла администратором — никаких ручных операций по оптимизации картинок.
Результат: страницы каталога загружаются быстрее, показатель PageSpeed растёт, посетитель не ждёт, пока прогрузятся фотографии. Для цветочного магазина, где визуальное впечатление напрямую определяет решение о покупке, скорость отображения картинок прямо влияет на конверсию.
Итоги проекта
| Параметр | До | После |
|---|---|---|
| Вёрстка | Не соответствует дизайну, ошибки отображения | Полное попиксельное соответствие макетам |
| Каталог | Без фильтрации, линейный список товаров | Многофакторный фильтр: цена, событие, адресат, состав, город |
| Корзина | Ручной расчёт доставки, ограниченные способы оплаты | Автоматический расчёт с учётом города и времени, все способы оплаты |
| Карточка товара | Фиксированная позиция, без апсейла | Конструктор букета: количество цветов, дополнения, сопутствующие товары |
| Интеграции | Отсутствуют (ручной обмен данными) | Двусторонняя 1С, Retail CRM, Яндекс Маркет, геолокация, антифрод |
| Мобильная версия | Не адаптирована, неюзабельна | Полная адаптация всех сценариев под смартфоны |
| Оптимизация изображений | JPEG/PNG без сжатия | Автоматический WebP с фолбэком |
Типичные ошибки в похожих проектах
1. Адаптация интернет-магазина под розничную учётную систему. Пытаться подогнать 1С, настроенную на розничную точку, под e-commerce — тупиковый путь. Складской учёт для интернет-магазина должен отражать реальные остатки в реальном времени, а не подтягивать данные раз в сутки. Иначе сайт продаёт то, чего уже нет.
2. Корзина без учёта географии доставки. Если стоимость доставки рассчитывается по единому тарифу без привязки к городу и временному слоту, бизнес либо теряет деньги на междугородних заказах, либо отпугивает клиента ценником, не соответствующим локальному рынку. Для цветов, где доставка — критическая часть продукта, это фатально.
3. Мобильная версия как «уменьшенный десктоп». Адаптивная вёрстка ≠ мобильная версия. На телефоне другие сценарии, другие приоритеты контента, другие требования к размеру элементов. Простое масштабирование десктопной страницы даёт сайт, которым неудобно пользоваться, — а 70% заказов на цветы приходят с мобильных устройств.
4. Карточка товара без механики дополнений. В цветочном ритейле апсейл естественен: покупатель и так хочет порадовать человека, и предложение «добавить открытку» или «увеличить букет» не воспринимается как навязывание. Не использовать эту механику — терять 15–20% к среднему чеку.
5. Игнорирование WebP. Сотни карточек товара с фотографиями высокого разрешения без конвертации в современный формат — это гарантированно низкий PageSpeed, потеря поискового трафика и уход мобильных посетителей, не готовых ждать загрузки. Конвертация в WebP даёт экономию 30–40% веса изображений без видимой потери качества, и это одна из самых дешёвых по трудозатратам оптимизаций.
Заключение
Проект Pion.ru — пример того, как интернет-магазин цветов превращается из неудачного старта с нерабочей вёрсткой в автоматизированную торговую платформу. Основа результата — погружение в бизнес-логику клиента, а не копирование типового e-commerce-флоу. Цветочный ритейл отличается от продажи электроники или одежды: здесь товар скоропортящийся, доставка — часть продукта, цена зависит от географии, а эмоциональная составляющая покупки требует безупречного визуального исполнения.
Проект подходит как ориентир для нишевых интернет-магазинов со сложной логистикой и производственной составляющей: цветы, продукты питания, товары с ограниченным сроком годности, мультигородские сети с различными ценовыми зонами.