Joanna — оптово-роздрібний інтернет-магазин одягу для всієї родини

Joanna (joanna-od.com) — оптово-роздрібний інтернет-магазин одягу для всієї родини, який працює з 2018 року. В каталозі понад 4 200 товарів у майже сотні категорій за чотирма напрямками: жіночий одяг 42–46, жіночі розміри 48+, чоловічий і дитячий одяг, плюс наскрізні «Новинки» та «Розпродаж». Головна особливість бізнес-моделі — опт і роздріб в одному магазині: кожна картка показує роздрібну ціну і окремо оптову «від 2 одиниць», а знижка вмикається автоматично, щойно в кошику опиняються дві різні моделі. Сайт перенесено із застарілої збірки OpenCart 2.3 на OpenCart 4.1 з повністю переписаною темою — зі збереженням усіх URL, каталогу й накопиченої SEO-ваги.

Технічний стек

OpenCart 4.1 з кастомною темою — не стокова збірка з маркетплейсу. Магазин двомовний (українська й російська) і двовалютний (гривня, долар). Товарні фото роздаються з окремого CDN-піддомену assets.joanna-od.com, картки підтримують hover-фото й короткі відео-огляди моделей. Замовлення оформлюється в один екран власним модулем швидкого чекауту, оплата — через LiqPay (Visa/Mastercard) або узгодження з менеджером, доставка — Новою Поштою. Окремо зібрано контур аналітики: власний модуль подій GA4 і Google Ads, фіди для Google Merchant Center, серверне дублювання події purchase. Верстка адаптивна: сітки товарів перебудовуються, меню згортається в бургер, а на мобільному з’являється нижня таб-панель із кошиком і обраним.

Структура сайту

Головне меню — це чотири товарні напрямки (Жіночий одяг 42-46, Жіночі розміри 48+, Чоловічий одяг, Дитячий одяг) плюс Новинки і Розпродаж; кожен напрямок розкривається багаторівневим випадаючим меню аж до третього рівня (Сукні → Короткі та міді → Літні). У шапці — телефони, графік роботи, перемикачі мови й валюти, вхід у кабінет, обране й кошик. Головна зібрана як вітрина: hero → нові надходження → топ моделей тижня → топ категорії → три вхідні сценарії (опт, роздріб, дропшипінг) → SEO-блок про магазин.

Нові надходження

Одразу під hero — карусель нових надходжень на два ряди по чотири картки. Картка тут робить основну роботу магазину: друге фото по наведенню, бейдж «NEW», позначка відео-огляду, кнопка «в обране» і, головне, дві ціни — роздрібна великим шрифтом і оптова «від 2 одиниць» поруч. Покупець бачить вигоду ще до входу в картку товару.

Топ моделей тижня і вхідні сценарії

Далі — «Топ моделей тижня» (добірка, яку магазин оновлює щотижня) і три банери, що розводять аудиторію за типом покупця: Оптові продажі, Роздрібні продажі, Дропшипінг. Це важливий вузол: у Joanna три різні воронки з різними правилами й документами, і кожна має свою посадкову сторінку замість спільного «Про нас».

Каталог і фільтри

Каталог розрахований на великі обсяги: в одній лише категорії «Жіночі сукні» — 661 товар із пагінацією та сортуванням. Ліворуч — дерево категорій і панель фасетних фільтрів: колір (із лічильником товарів біля кожного значення), розмір, ціна. Лічильник «Знайдено: N» перераховується разом із вибором фільтрів, тож покупець бачить, скільки залишиться варіантів, ще до застосування. Сторінка категорії закінчується SEO-текстом і акордеоном частих запитань — це працює на пошукові запити на кшталт «сукня 48 розміру купити».

Картка товару

Сторінка товару побудована навколо галереї: до дев’яти фото з вертикальними мініатюрами й відео-оглядом моделі під ними. Праворуч — артикул моделі, дві ціни (роздрібна і «Опт від 2 або більше»), селекти розміру й кольору, лічильник кількості, «В кошик» і «В обране». Під кнопками — пояснення механіки опту простими словами: «додайте до кошика будь-яку другу модель та отримайте оптову ціну на обидва товари». Нижче акордеонами — опис, таблиця розмірів і відгуки, щоб довга сторінка не перетворювалась на полотно тексту.

Кошик і оформлення замовлення

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

Аналітика, реклама і швидкодія

Магазин живе з платного трафіку, тому аналітика зібрана окремим модулем: усі ecommerce-події друкуються одразу у двох схемах — GA4 і Google Ads, щоб ідентифікатори товарів збігалися з фідом Merchant Center і працював динамічний ремаркетинг. Подія purchase додатково дублюється з сервера: якщо браузерний хіт не дійшов (адблок, закрита вкладка, обрив зв’язку на мобільному), замовлення все одно потрапляє в GA4. Окремим блоком робіт була швидкодія: важкі місця чекауту переписані, час відповіді сторінки оформлення скоротився з 4,5 до 0,4 секунди, а паразитний трафік ботів-скрейперів, який вибирав ресурси сервера на фасетних фільтрах, відсікається ще на рівні веб-сервера.

Відгуки і довіра

Окрема сторінка відгуків про магазин — не про окремий товар, а про сервіс: рейтинг 4,8 з 5, сортування, форма «Написати відгук» і публічні відповіді адміністратора під зверненнями. Для магазину, що працює з передоплатою, це один із головних аргументів: у відгуках покупці описують саме обмін розміру, повернення коштів і швидкість відправки.

Мобільна версія

Більшість трафіку fashion-магазину — мобільна, тому на телефоні інтерфейс перебудовується, а не стискається: hero і каталог ідуть у два стовпці, меню ховається в бургер, а внизу закріплюється таб-панель із головною, меню, кабінетом, обраним і кошиком з лічильником. Кнопка зворотного дзвінка й месенджери доступні з будь-якого екрана.

Підсумок

joanna-od.com — приклад великого товарного магазину, де складна комерційна логіка схована за простим інтерфейсом: одна вітрина обслуговує роздріб, опт і дропшипінг, оптова ціна вмикається сама від двох різних моделей, а покупець бачить лише дві цифри на картці. Переїзд з OpenCart 2.3 на 4.1 зі збереженням URL і каталогу, власний модуль аналітики з серверним дублюванням покупок, прискорений чекаут і захист від ботів дають магазину те, заради чого все й робилось: реклама рахується, сторінки не падають, а замовлення оформлюється в один екран.