Casa Laya: магазин спортивной одежды, написанный с нуля
Интернет-магазин спортивной одежды без готового движка: каталог, корзина, личный кабинет, оформление заказа и админка написаны под проект. Ни WordPress, ни конструктора — только свой код.
Бренду спортивной одежды нужен был магазин, который выглядит как съёмка в журнале, а не как витрина на движке. Готовые платформы дают обратное: сначала их шаблон, потом уже бренд.
При этом требовалась вся торговая механика без упрощений — каталог с фильтрами, размеры и цвета, избранное, корзина, доставка, оплата и личный кабинет.
И собственная админка: чтобы товары, категории, блоки главной и заказы велись без нас и без месячной платы за платформу.
0
готовых движков: магазин написан под проект
0
сторонних скриптов — вся аналитика своя
4
группы фильтров: размер, цвет, цена, материал
8
разделов админки, включая аналитику и аудит
Первый экран отдан съёмке
Никакого заголовка поверх фотографии и никаких кнопок — только кадр во весь экран и пять снимков, которые сменяют друг друга плавным наплывом каждые пять секунд. Точки внизу позволяют переключить вручную, на телефоне работает свайп.
Для узкого экрана лежит отдельный набор кадров — вертикальных, снятых под портретную рамку. Горизонтальную съёмку на телефоне пришлось бы резать по краям, теряя ровно то, ради чего её делали.
Вход в каталог через спорт, а не через категории
Сразу под первым экраном — три полосы во всю ширину: пилатес, бег, йога. Человек чаще знает, чем занимается, чем то, называется ли нужная ему вещь «топ-бра» или «велосипедки».
Строкой выше стоят и обычные категории — топы, леггинсы, бра, велосипедки. Два входа в один каталог: по занятию и по типу вещи.
Каталог: фильтры, наведение и быстрая покупка
Фильтры собраны по тому, как выбирают одежду: размер, цвет, цена и материал. Сортировка — по цене в обе стороны.
Карточка живёт под курсором: появляются стрелки, кадр меняется на следующий, внизу идёт полоска-прогресс по галерее. А кнопка «быстрая покупка» открывает выбор цвета и размера прямо в списке — за вещью не нужно уходить на отдельную страницу.
Размер, цвет, цена, материал
Смена кадра при наведении
Быстрая покупка без ухода из списка
Избранное на каждой карточке
Карточка товара: размер решается до корзины
Две крупные фотографии слева, справа цвет, размер и ссылка на размерную сетку — вопрос посадки закрывается там же, где принимается решение. Ниже описание, ткань и уход, доставка и возврат — аккордеонами, чтобы страница не превращалась в простыню.
Под товаром идут «завершите образ», похожие вещи и подборка для вдохновения: одежду покупают комплектами, и сайт это учитывает.
Оформление заказа в один экран
Данные, доставка и оплата собраны на одной странице, без шагов и перезагрузок. Адрес подсказывается поиском, доставка — СДЭК курьером или в пункт выдачи, оплата картой или через СБП.
Справа всё время виден состав заказа с цветом, размером и количеством, там же поле для промокода. Человек не теряет из виду, за что платит.
Лента образов вместо блока «наш инстаграм»
Внизу главной бесконечно едет лента снимков в одежде бренда. Она не набрана из виджета соцсети, а собрана на сайте: движение считается покадрово, на телефоне ленту можно таскать пальцем.
Так блок остаётся живым, даже если аккаунт в соцсети недоступен, и не тянет на страницу чужие скрипты.
Телефон — не сжатый десктоп
Под узкий экран сделана своя раскладка: отдельные вертикальные кадры первого экрана, меню на всю высоту, карточка товара в одну колонку.
Фильтры уезжают в шторку, карточки выстраиваются в один столбец, а размер и цвет выбираются пальцем — без промахов по мелким кружкам.
Что получилось
Магазин, за которым не стоит чужая платформа: ни абонентской платы, ни ограничений шаблона, ни чужих скриптов на страницах.
Вся торговая механика на месте — каталог с фильтрами, размеры и цвета, избранное, корзина, доставка, оплата и личный кабинет с историей заказов.
Аналитика тоже своя: сайт не отправляет ни одного запроса на сторонние домены, а данные о посещениях и заказах собираются в собственной админке.
0
чужих скриптов на страницах
4
группы фильтров в каталоге
3
страны доставки
8
разделов админки
React 18
Vite
Chakra UI
TanStack Router
REST API
nginx
Спрашивают чаще всего
Почему не сделали на готовой платформе — вышло бы дешевле?
Дешевле на старте и дороже потом. Платформа берёт помесячно, ограничивает вёрстку своим шаблоном и тянет на страницы свои скрипты. Здесь весь магазин — свой код: внешний вид ничем не ограничен, ежемесячных платежей за движок нет, а данные о заказах и посетителях никуда не уходят.
Кто ведёт товары и заказы?
Своя админка: товары, категории, блоки главной, заказы, пользователи, аналитика и журнал действий. Загрузка фотографий там же. Разработчик для наполнения не нужен.
Что с доставкой и оплатой?
Доставка СДЭК — курьером или в пункт выдачи, с подсказкой адреса при вводе. Оплата картой либо через СБП. Всё это на одном экране оформления, без пошагового мастера.
Сколько стоит такой магазин?
Магазин с собственным бэкендом и админкой считается по объёму каталога и по тому, какая механика нужна: размеры и цвета, избранное, личный кабинет, интеграции с доставкой и оплатой. Напишите — посчитаем по вашей задаче.
Живые сайты, а не картинки в презентации
Команда Reut Art
сегодня
Здравствуйте, я владелец компании
производим входные двери
хотел обратиться за редизайном
Здравствуйте, Евгений!
Конечно, наша команда займется этим
Начнем обсуждение вашего лучшего проекта?
Подписаться на рассылку
Согласен получать письма о новых работах и статьях и на обработку персональных данных
Reut Art
ReutArt © 2026
ИП Реут Артём Юрьевич · ИНН 910402081314 · ОГРНИП 320911200026247