Создали интернет-магазин одежды с кастомной админ-панелью и складской системой
Услуги: 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 до интернет-магазина под высокие нагрузки
От нестабильного OpenCart до интернет-магазина под высокие нагрузки
Предыдущий магазин GOU работал на OpenCart и терял стабильность именно тогда, когда бизнес получал больше всего внимания. После удачного Reels, Stories или запуска рекламы на сайт одновременно переходило большое количество покупателей, а старая платформа начинала тормозить или становилась недоступной. Поэтому проектирование нового решения началось не с косметического редизайна, а с полной перестройки технической основы магазина.
Клиентскую часть разработали на Next.js, а серверную логику и административную среду — на Laravel. Такое разделение даёт каждой части системы отдельную роль: frontend отвечает за быстрое взаимодействие покупателя с каталогом и товарными страницами, backend обрабатывает данные, заказы и внутренние операции. Два технологических уровня работают как единый продукт, но нагрузка на публичный магазин не превращает админ-панель в узкое место.
Для большого ассортимента недостаточно лишь разложить товары по категориям. Algolia индексирует товарные данные и возвращает релевантную выдачу без последовательного перебора всего каталога. Четыре параметра фильтрации — размер, цвет, ткань и цена — уточняют выбор уже внутри категории, а два формата сетки меняют не состав каталога, а способ его просмотра: карточки покрупнее или больше позиций на одном экране.
Товарная страница объединяет два медиаформата с данными, нужными для решения. Фотографии показывают модель с разных ракурсов, короткие видео — её вид в движении. Рядом покупатель видит варианты цвета и размера, наличие, рейтинг, отзывы, акционную цену и условия покупки. После выбора доступны четыре способа получения: отделение, курьер или почтомат Новой почты и самовывоз.
Личный кабинет поддерживает повторные покупки тремя функциями: более быстрым оформлением, списком желаний и историей заказов. Внутри магазина работа с ассортиментом, остатками и заказами собрана в кастомной админ-панели на Laravel. Monobank отвечает за онлайн-оплату, Checkbox — за работу с фискальными чеками, а складская система связывает товарные данные с операционной работой команды.
В результате GOU получил не обновлённую оболочку старого магазина, а собственную e-commerce-систему без зависимости от ограничений OpenCart. Она объединяет сценарий покупателя, каталог, поиск, платежи, фискализацию и внутренний учёт и сохраняет стабильность во время резкого притока трафика из Instagram. Именно готовность к таким пикам стала главным практическим результатом перезапуска.
// Решения для стабильной работы большого интернет-магазина
Вместо сотен пунктов меню и лишних полей — только то, что нужно вашей команде. Каждая роль видит свой интерфейс, массовые действия выполняются за клики, а не за минуты
Модуль резервирует остаток автоматически при оформлении заказа, синхронизирует с 1С и несколькими складами в реальном времени и уведомляет менеджера, когда пора пополнять запасы
Умный поиск с исправлением ошибок, синонимами, морфологией и автоподсказками — покупатель находит нужный товар за 2–3 секунды вместо блуждания по каталогу
