Royal Flowers — мережа квіткових магазинів та інтернет-магазин

Royal Flowers — це мережа квіткових магазинів у чотирьох містах України: Київ, Дніпро, Одеса, Харків. Задача — побудувати єдину онлайн-вітрину, де клієнт спочатку обирає своє місто, а далі бачить актуальний асортимент, ціни і строки доставки саме для нього. Технічно — це WordPress + WooCommerce з мультисайтовою архітектурою на піддоменах (kyiv./odesa./kharkiv./основний домен — Дніпро), єдиним дизайном і спільним брендом, але з окремим складом і прайсом для кожного міста.

Головна сторінка та брендова подача

Перший екран — slick-слайдер у центрованому режимі з трьома кадрами: «Royal Flowers Київ — 101 троянду заслуговує кожна дівчина», теза про швидку доставку за 2 години і обіцянка свіжих квітів напряму з теплиць. Сусідні слайди частково «визирають» з боків — типовий прийом, що натякає на гортання, без зайвих стрілок. Під hero — CTA «Перейти до каталогу» і довгий SEO-блок, який ранжується під регіональні запити «доставка квітів Київ» / «купити троянди Київ».

Каталог і фільтрація

Каталог — двоколонковий WooCommerce shop: ліворуч фільтри (довжина стебла 50 / 70 см і категорії з мініатюрами), праворуч — сітка карток по три в ряд. Картка показує фото, назву, ціну в гривнях, перекреслену «стару» ціну для товарів на акції — і швидку кнопку «у кошик» у нижньому правому куті, щоб клієнт міг купити, не заходячи на сторінку товару.

Структура категорій

• Букети 19, 25, 51, 101 троянд та «від 101 троянди» — окрема таксономія під кількість квітів у букеті;
• Окремі категорії під тюльпани: 25 / 51 / 101 тюльпан;
• Кошики з квітами — категорія композицій у плетеному кошику;
• Фільтр по довжині стебла (50 і 70 см) — найважливіший параметр у трояндах, через який зазвичай шукають букет на конкретний бюджет.

Сторінка товару

Сторінка товару максимально лаконічна: велике фото букета ліворуч, праворуч — назва, актуальна і стара ціна (якщо діє знижка), кнопка «Додати в кошик» і живий лічильник наявної кількості («Доступна кількість: 3»). Лічильник тягнеться зі складу WooCommerce і дає клієнту відчуття, що букет реальний і фізично є на складі саме сьогодні.

Cart-drawer замість окремої сторінки кошика

Замість традиційного /cart/ — постійна права бічна панель, яка живе на кожній сторінці сайту. Натискаєш «у кошик» з картки — drawer плавно роз’їжджається з фото товару, назвою, ціною, кількістю, чекбоксами для додаткового пакування («Без пакування 0₴» / «Інше пакування 200₴») і сумою. Внизу — одна CTA «Оформити замовлення», яка веде на чекаут. Один клік від каталогу до чекауту без проміжного завантаження сторінки кошика.

Чекаут: самовивіз vs доставка з вибором слоту

Сторінка /checkout/ з двома вкладками вгорі: Самовивіз (адреса магазину міста: Дніпро, вул.Шевченко 18; час роботи 8-20) і Доставка. Вибрана дата + випадаючий список слотів через кожні 30 хв (11:00–21:00). Поля Ім’я + Телефон, тоглер «Створити обліковий запис», поле «Коментар або текст листівки» — критичне для квіткового бізнесу, де букет часто йде сюрпризом. Два способи оплати: при отриманні або карта/Apple Pay/Google Pay. Праворуч sticky — summary із сумою, доставкою, чекбоксом згоди з Офертою і CTA «Відправити». У табличному кошику внизу — лічильник наявності («В наявності: 8 шт.») плюс купонне поле.

Доставка та логіка слотів

Власна кур’єрська служба бренду — ключовий аргумент, який ми винесли у кілька точок на сайті. Базові години — 09:00–21:00, ранкові (07:00) та пізні (23:00) слоти за окрему оплату, чіткі часові вікна замість «коли встигнемо». Поле для номера отримувача (якщо букет — сюрприз, кур’єр погоджує місце безпосередньо з ним) і приватний коментар флористу.

Особистий кабінет — логін і реєстрація на одній сторінці

Особистий кабінет (/my-account/) поєднує дві дії на одному екрані: ліворуч форма входу (логін/email + пароль + «Втратили свій пароль?»), праворуч реєстрація через email — на пошту приходить лінк для встановлення пароля. Працює як на десктопі, так і на мобілі. Для повторних замовлень — історія замовлень WooCommerce з reorder в один клік.

Контентні сторінки

«Про нас» і «Доставка» — це не просто SEO-портянки, а структуровані сторінки з ілюстраціями, підзаголовками і списками. Робота з контентом велась так, щоб одна й та сама сторінка коректно ранжувалась під регіональні запити — на кожному з чотирьох піддоменів сторінки переписувались під своє місто.

Контакти з картою і трьома фізичними локаціями

Сторінка /contacts/ — ліворуч картка «У вас загальне запитання?» з info@, телефоном служби (працює 8:00–20:00) і компактною контактною формою (ім’я + email + повідомлення). Праворуч — інтерактивна Google Maps з пінами на трьох містах. Знизу — три картки локацій: Київ (Поділ, Хорива 43), Харків (Коцарська, 31), Дніпро (Шевченка 18). Кожна — з адресою і телефоном-tel-лінком. Загальна сервісна лінія одна на всю мережу.

Адаптив

Мобільна версія — головний канал замовлень. Hero компактний, у три «екрани»-слайди з різними рекламними тезами, навігація — у бургер-меню, кошик іконкою у правому верхньому куті. Каталог переходить у одноколонкову сітку.

Стек і інтеграції

• WordPress + WooCommerce як база — стандартні CPT для товарів, категорії, фільтри атрибутів;
• Мультисайт на піддоменах — один кодовий шаблон, окремі прайси та склад для кожного міста;
• Slick для hero-слайдера в центрованому режимі;
• Інтеграція з Instagram і Facebook у шапці — ці канали приносять основний органічний трафік для мережі;
• Особистий кабінет клієнта на базі WC My Account з історією замовлень і повторним замовленням «у один клік».