Створили інтернет-магазин одягу із кастомною адмін-панеллю та складською системою
Послуги: UX/UI-дизайн, розробка інтернет-магазину, frontend на Next.js, backend на Laravel, складська система, інтеграції Algolia, Monobank і Checkbox
Магазин на OpenCart втрачав стабільність, коли реклама в Instagram, Reels або Stories одночасно приводила велику кількість покупців.
Одяг для жінок, чоловіків і дітей, аромати та товари для дому потрібно було розподілити за категоріями, характеристиками й товарними варіаціями без перевантаження каталогу.
У картках потрібно одночасно показувати актуальну ціну, попередню вартість, суму економії, відсоток знижки та обмежений час дії пропозиції.
Команді була потрібна внутрішня система для роботи з товарами, доступними розмірами, складськими даними та операціями після оформлення покупки.
Інтерфейс магазину розробили на Next.js, а керування товарами, складом і замовленнями перенесли в кастомну адмінпанель на Laravel.
В адмінпанелі об’єднали роботу з асортиментом, товарними варіаціями, залишками та даними замовлень, щоб команда керувала ними в одному середовищі.
Система швидко знаходить потрібні позиції у великому каталозі та формує релевантну видачу без тривалого перегляду категорій.
Покупець оплачує замовлення через Monobank, а Checkbox використовується для роботи з фіскальними чеками.
Товари можна сортувати й фільтрувати за розміром, кольором, тканиною та ціною, а структура категорій веде від основного напряму до конкретної групи продукції.
Фото, короткі відеопрезентації, кольори, розміри, наявність, відгуки, акційні умови, доставка й повернення доступні до додавання товару в кошик.
Каталог, побудований навколо звичної логіки вибору
- Основні напрями винесені у верхнє меню
- Підкатегорії залишаються перед очима
- Фільтри розташовані над товарною видачею
- Щільність сітки можна змінювати
Навігацію побудували як послідовне звуження вибору. Покупець переходить від одного з п’яти основних напрямів до конкретної категорії, відбирає товари за потрібними характеристиками та змінює формат сітки залежно від зручного способу перегляду. Усі інструменти залишаються на сторінці каталогу, тому користувач не втрачає сформовану видачу.
Як зберегли легкість сторінок із великою кількістю товарів
- Білий фон залишає простір між елементами
- Великі фотографії формують головний акцент
- Картки не перевантажені декоративними рамками
- Назва, ціна та економія мають окремі рівні
Візуальну систему побудували навколо фотографій продукції, а службові елементи зробили компактними й передбачуваними. Навіть у щільній сітці картки не зливаються між собою: покупець одразу розрізняє модель, назву, актуальну ціну та розмір економії.
Які акценти підтримують стиль GOU
- Червоний логотип у центрі шапки
- Темна смуга основної навігації
- Чорні кнопки та цінові плашки
- Зелені позначення економії
Акційна пропозиція, яку легко оцінити до вибору товару
-
Знижка показана у відсотках
Позначка над назвою одразу пояснює масштаб акційної пропозиції
-
Стара й актуальна ціни розташовані поруч
Покупець бачить різницю без самостійних розрахунків
-
Економію винесено в окремий блок
Сума оплати та збережені кошти подані як два пов’язані показники
-
Таймер показує строк дії пропозиції
Часове обмеження видно до вибору кольору, розміру й додавання в кошик
Товарна сторінка, де модель можна розглянути й одразу обрати
- Великі фотографії показують товар із різних ракурсів Галерея займає основну частину екрана й не поступається місцем службовим елементам
- Фото доповнені короткими відеопрезентаціями Покупець бачить модель у русі, а не лише на статичних кадрах
- Доступні кольори представлені мініатюрами Кожен варіант можна оцінити візуально до переходу між товарами
- Розміри розташовані перед кнопкою покупки Покупець обирає потрібний варіант і одразу додає товар у кошик
Ліва частина сторінки відповідає за візуальне знайомство з моделлю, права — за конкретний вибір. Назва, рейтинг, ціна, наявність, колір, розмір і кнопка покупки розташовані послідовно, тому основний сценарій не розпадається між вкладками та додатковими вікнами.
Важливі умови покупки видно до оформлення замовлення
-
Рейтинг і кількість відгуків розміщені біля назви
Покупець одразу бачить оцінку моделі та досвід інших клієнтів
-
Статус наявності доповнений показником інтересу
Кількість переглядів за годину показана поруч з актуальною інформацією про товар
-
Доставка, обмін і спосіб оплати винесені на перший екран
Основні умови покупки можна перевірити ще до додавання позиції в кошик
-
Докладні дані розділені за темами
Опис, розмірна сітка, доставка та повернення не змішуються в одному суцільному тексті
Повний сценарій покупки зберігається на будь-якому екрані
- Каталог перебудовується під ширину пристрою Товарна сітка показує менше карток у рядку, але зберігає фотографії, ціни та основні позначення
- Фільтри не займають місце товарної видачі На компактних екранах інструменти відбору відкриваються окремо й не стискають картки
- Кнопки пристосовані до керування пальцем Вибір розміру, додавання в кошик та інші основні дії мають достатню площу натискання
- Порядок інформації залишається знайомим Назва, ціна, наявність, варіанти товару й умови покупки зберігають однакову послідовність
Значна частина покупців переходить до GOU безпосередньо з реклами, Reels і Stories, тому мобільний інтерфейс не став скороченою копією десктопного сайту. Каталог, товарна сторінка, вибір варіації та додавання в кошик пристосовані до невеликого екрана без вилучення важливої для рішення інформації.
Покупці звужують асортимент за розміром, кольором, тканиною та ціною без переходу між окремими сторінками.
Каталог можна переглядати по три або чотири картки в ряд залежно від бажаного розміру фотографій і кількості позицій на екрані.
Фотографії показують виріб із різних ракурсів, а короткі відео передають його вигляд і поведінку в русі.
Покупець обирає відділення, кур’єрську доставку або поштомат Нової пошти чи самовивіз із магазину.
Після входу клієнтові доступні швидше оформлення, список бажань та історія попередніх замовлень.
Адмінпанель на Laravel об’єднує роботу з товарами, складськими даними та замовленнями без залежності від старої системи на OpenCart.
// Від нестабільного OpenCart до інтернет-магазину під високі навантаження
Попередній магазин GOU працював на OpenCart і втрачав стабільність саме тоді, коли бізнес отримував найбільше уваги. Після вдалого Reels, Stories або запуску реклами на сайт одночасно переходила велика кількість покупців, а стара платформа починала гальмувати або ставала недоступною. Тому проєктування нового рішення почалося не з косметичного редизайну, а з повної перебудови технічної основи магазину.
Клієнтську частину розробили на Next.js, а серверну логіку та адміністративне середовище — на Laravel. Такий поділ дає кожній частині системи окрему роль: frontend відповідає за швидку взаємодію покупця з каталогом і товарними сторінками, backend обробляє дані, замовлення та внутрішні операції. Два технологічні рівні працюють як єдиний продукт, але навантаження на публічний магазин не перетворює адмінпанель на вузьке місце.
Для великого асортименту недостатньо лише розкласти товари за категоріями. Algolia індексує товарні дані й повертає релевантну видачу без послідовного перебору всього каталогу. Чотири параметри фільтрації — розмір, колір, тканина та ціна — уточнюють вибір уже всередині категорії, а два формати сітки змінюють не склад каталогу, а спосіб його перегляду: більші картки або більше позицій на одному екрані.
Товарна сторінка поєднує два медіаформати з даними, потрібними для рішення. Фотографії показують модель із різних ракурсів, короткі відео — її вигляд у русі. Поруч покупець бачить варіанти кольору й розміру, наявність, рейтинг, відгуки, акційну ціну та умови покупки. Після вибору доступні чотири способи отримання: відділення, кур’єр або поштомат Нової пошти та самовивіз.
Особистий кабінет підтримує повторні покупки трьома функціями: швидшим оформленням, списком бажань та історією замовлень. Усередині магазину робота з асортиментом, залишками й замовленнями зібрана в кастомній адмінпанелі на Laravel. Monobank відповідає за онлайн-оплату, Checkbox — за роботу з фіскальними чеками, а складська система пов’язує товарні дані з операційною роботою команди.
У результаті GOU отримав не оновлену оболонку старого магазину, а власну e-commerce-систему без залежності від обмежень OpenCart. Вона об’єднує сценарій покупця, каталог, пошук, платежі, фіскалізацію та внутрішній облік і зберігає стабільність під час різкого припливу трафіку з Instagram. Саме готовність до таких піків стала головним практичним результатом перезапуску.
// Рішення для стабільної роботи великого інтернет-магазину
Замість сотень пунктів меню і зайвих полів — тільки те що потрібно вашій команді. Кожна роль бачить свій інтерфейс, масові дії виконуються за кліки, а не за хвилини
Модуль резервує залишок автоматично при оформленні замовлення, синхронізує з 1С і кількома складами в реальному часі та сповіщає менеджера коли пора поповнювати запаси
Розумний пошук з виправленням помилок, синонімами, морфологією і автопідказками — покупець знаходить потрібний товар за 2–3 секунди замість блукання по каталогу
