Демо-магазин — мужская одежда
Живой сайт — halden-wear.vercel.app ↗HALDEN. Чёрная витрина с плотной сеткой фото
Магазин мужской базовой одежды: пальто, костюмы, трикотаж, рубашки и брюки. Главная — мозаика из кадров коллекции под прозрачной шапкой, каталог — четыре фото в ряд без зазоров, карточка — колонка миниатюр, крупное фото и липкая панель покупки.
Задача
Марке мужской одежды нужен был сайт, который выглядит как витрина европейского бренда: чёрный фон, никаких баннеров и плашек, фотография — главный элемент. Заказчик прислал референс и попросил повторить логику каталога и карточки товара: плотную сетку без зазоров, выезжающий фильтр, липкую панель покупки с размерами, цветом и рассрочкой. При этом магазин должен продавать: размерная сетка одна на все вещи, часть заказов возвращается после примерки, поэтому остатки по размерам и статусы отправок нужно видеть в одной панели.
Решение
Главную собрали как у референса: мозаика из двадцати четырёх кадров коллекции под прозрачной шапкой с логотипом по центру, ниже — два блока «Новая коллекция» и видео «Осень — зима», затем новинки и манифест марки. Каталог — четыре фото 3:4 в ряд без зазоров, под каждым индикаторы-полоски, при наведении кадр меняется на крупный план; заголовок раздела и кнопка «Фильтр» в одной строке. Фильтр выезжает слева панелью на 600 px: сортировка, разделы, двойной ползунок цены, размеры и цвета со свотчами. Карточка товара: колонка миниатюр, крупное фото, справа липкая панель — крошки, название капсом, цена, кнопка «4 платежа», размеры с таблицей, свотчи цвета, белая кнопка «Добавить в корзину», «Подарить» и аккордеоны описания, состава, параметров и доставки. Корзина, оформление и правовой блок — в той же чёрной системе. Витрина работает поверх собственной панели управления: остатки по размерам, заказы со статусами, аналитика по моделям. Обмен с Saby (СБИС) закрыл товароучёт и чеки, доставку — СДЭК и Boxberry до пунктов выдачи, оплату — ЮKassa, СБП и частями.
Что внутри
- Мозаика из кадров коллекции вместо баннера
- Каталог 4 в ряд без зазоров, смена кадра при наведении
- Фильтр-панель слева: сортировка, разделы, цена, размер, цвет
- Карточка с липкой панелью покупки и рассрочкой на 4 платежа
- Размерная таблица и подбор размера в модальном окне
- Корзина на localStorage и оформление заказа
- Остатки по размерам в CRM, Saby (СБИС), СДЭК и Boxberry
Нужен магазин в вашей нише?
Соберём витрину под ваш бренд — с каталогом, корзиной, CMS и интеграциями. Покажем прогресс каждые 2–3 дня.