Магазин квітів, який продає букети за годину
Спроєктували дизайн у Figma, зверстали й запустили інтернет-магазин доставки квітів на OpenCart — з розумним каталогом букетів, покроковим оформленням і доставкою в день замовлення.
1Задача
Slavna Kvitka — квітковий магазин у Дніпрі з доставкою по місту. Потрібен був власний інтернет-магазин замість типового шаблону: зручний каталог букетів і квітів поштучно, швидке замовлення з телефона, вибір часу доставки й самовивозу, а також інструменти для флориста, щоб сайт жив без програміста.
2Рішення
Намалювали у Figma повний комплект сторінок для десктопа і смартфона — 42 макети: головна, каталог із фільтром, картка букета, оформлення і статус замовлення, кабінет. Верстку перенесли на OpenCart 3 як власну дизайн-бібліотеку поверх преміум-шаблону, підключили покроковий чекаут з інтервалами доставки, склад букета з компонентів і автоматичну наявність.
3Результат
Магазин працює двома мовами, приймає замовлення з доставкою в день звернення і відправляє їх у Telegram флористу. Клієнт сам керує категоріями за складом букета, стикерами та описами, а розпродані позиції зникають з каталогу автоматично. Сайт продовжуємо розвивати: фільтр, кабінет, закладки для гостей, AI-описи.
Що зробили
Дизайн у Figma
- 42 макети: 18 десктопних (1920 px) і 22 мобільних (360 px) — головна у трьох варіантах, каталог-попап, категорія, картка букета, відгуки, оформлення замовлення, статус замовлення, порожній кабінет.
- Мобільні стани окремо: меню, фільтри каталогу, скрол картки, кроки замовлення.
- Червона фірмова палітра, великі фото букетів, стикери «Новинка / Хіт / Акція» прямо на картках.
Розробка на OpenCart 3
- Статичний прототип п'яти сторінок, потім перенесення верстки в OpenCart як окремої дизайн-бібліотеки поверх преміум-шаблону oct_showcase.
- Головна: банер акції, бічне меню каталогу, добірки «Популярні», «Новинки», «Авторські букети», «Подарунки».
- Каталог: фільтр за 8 параметрами, сортування, стикери, підвантаження по 24 товари, широка сітка на великих екранах.
- Картка букета: галерея, знижка і стара ціна, відгуки з фото, «у вибране», порівняння, блок «Найближча доставка», що рахує слот за графіком магазину.
- Чекаут Smart Checkout у 5 кроків: дані отримувача з маскою телефону, інтервали доставки, самовивіз із магазину, оплата карткою або на рахунок, автозаповнення полів при повторному замовленні.
- Сторінка успіху зі зведенням замовлення, сторінка статусу замовлення, особистий кабінет-дашборд, закладки без реєстрації.
- Дві мови — українська та російська, ЧПУ-адреси, SEO-генератор мета-тегів, Schema.org OnlineStore, Google Tag Manager.
Інструменти для флориста
- Склад букета з компонентів: наявність букета автоматично слідує за наявністю квітів у ньому, розпродане ховається з каталогу, а в адмінці є колонка і фільтр «Наявність».
- Модуль наповнення категорій за складом: правило «категорія ← квітка у складі» — і букети з трояндами самі потрапляють у «Троянди».
- Стикери товарів (Новинка, Хіт, Акція, Популярний, Безкоштовна доставка) з кешем і керуванням з адмінки.
- Сповіщення про нові замовлення в Telegram, масовий редактор товарів, AI-модуль для генерації описів і перекладу на російську.
Як це виглядає
Живий сайт поряд із макетами Figma: головна, каталог, картка букета, оформлення замовлення та мобільні версії.
Наведіть курсор на знімок — він прокрутиться. Торкніться знімка, щоб відкрити його повністю.
Як ішла робота
- 1Аналіз конкурентів і структура каталогу
- 2Дизайн 42 макетів у Figma для десктопа і мобільних
- 3Статичний HTML-прототип ключових сторінок
- 4Перенесення верстки на OpenCart 3, налаштування чекаута й доставки
- 5Запуск, SEO-адреси, дві мови, аналітика
- 6Супровід і розвиток: фільтр, кабінет, модулі для флориста
Що всередині
Потрібен інтернет-магазин із доставкою?
Зробимо дизайн під вашу нішу, зберемо магазин на OpenCart і налаштуємо оформлення замовлення так, щоб клієнти купували з телефона за хвилину.