01
Витрина и каталог
На витрине только то, что есть в наличии: закончившийся товар прячется сам и сам возвращается со следующей поставкой. Фильтры «Кому», «Тип», бренд, цена и размеры, разведённые по шкалам — обувь, одежда, рост.
Кейс ЯРЧЕ · интернет-магазин · обмен с 1С · 2026
4team.by ↗Вы внутри кейса, собранного из самого магазина: та же сцена с фигурами, те же кнопки и карточки. Только вместо товаров — история проекта.
Задача
Магазин, который живёт от 1С
4TEAM — минский экипировочный центр: розница и опт для команд и клубов. Больше десяти лет компания одевает сборные, клубы и корпоративных клиентов, а в магазине держит кроссовки, одежду и аксессуары в наличии.
Мы начали с живого прототипа на реальных товарах магазина — он и стал основой. Дальше прототип оброс всем, что нужно настоящей торговле: обменом с 1С, заказами, оплатой картой, доставкой и переездом со старых адресов без потери поисковых позиций.
Что должно было получиться
- светлая редакционная витрина, где главный герой — фото товара;
- цены и остатки по размерам приходят из 1С сами, без ручного ввода;
- заказ с сайта сразу встаёт резервом в учётной системе магазина;
- отдельный вход для оптовых клиентов и посадочные под каждый вид спорта.
Брендбук
Чёрное на белом и один кобальт. Нажмите на цвет — покажем, где он работает в карточке товара. Размеры и кнопки в карточке живые.
Текст, заголовки и главная кнопка. Почти чёрный на белом — вся система держится на этой паре. Тёмным фоном он становится только в узких акцентных полосах: промо-строка, оптовый блок, футер.
Фон всего магазина. Светлая редакционная витрина — осознанный выбор: страницу делают ритм, типографика и настоящие фото товара, а не спецэффекты на тёмном.
Нейтральная плитка под фото товара — без теней и рамок. Товар стоит на ней, как на студийном фоне, и плитки каталога складываются в ровную сетку.
Разделители, границы кнопок размеров и полей ввода. Один пиксель и прямой угол: скруглений в системе нет вообще.
Артикул, расцветка, подписи полей. Подобран так, чтобы мелкий текст проходил по контрасту и на белом, и на подложке.
Единственный акцент, и тратится скупо: бейдж AI, фокус, кобальтовая дорожка под заголовком раздела. Там, где его видно, — интерактив или работа нейросети.
Скидки и дефицит. «Этого размера мало» с пульсирующим квадратным маркером — магазин показывает уровень остатка, а не голое число со склада.
Каталог / Мужчины / Обувь / Сланцы
Сланцы Adilette Aqua
Артикул F35543 · Цвет: чёрный / белый
92,00 BYN
В наличии
Размер · UK 10Этого размера очень мало
Таблица размеровТовар настоящий, с витрины. Уровни остатка у размеров здесь условные — на сайте они приходят из 1С.
Твоя экипировка
Oswald 600–700
Заголовки. Узкий гротеск прописными, плотный трекинг, крупно — до 108 px в хиро. Голос спортивного постера.
твоя опора.
Oswald, контур
Фирменный приём: вторая строка заголовка — контуром в 2 px. Один раз на страницу, чтобы не превратился в узор.
92,00 BYN · Артикул F35543 · UK 8
Inter 400–600
Интерфейс, цены и артикулы. 14 px в карточке, подписи — 11–12 px прописными с трекингом.
Экраны в наличии
Каждая карточка — живая страница магазина. Листайте ленту, открывайте в новой вкладке.
01Главная: сцена с фигурами и подборки
/
Хиро · новинки · скидки · опт
6 фигур — 6 входов в спорт
02Каталог: фильтры и типографическая шапка
/catalog/muzhchiny/obuv
Кому · тип · бренд · размер · цена
Партиями по 24 товара
03Карточка товара: галерея, расцветки, размеры
/product/f35543
Артикул рядом с фото · AI-примерка
Остаток — уровнем, не числом
04Посадочная вида спорта
/sport/futbol
Постер серии + полноценный каталог
13 видов спорта
05Опт: командам и клубам
/opt
Условия · контакты отдела · клиенты
32 логотипа в ленте клиентов
06Примерочная
/primerka
Фото покупателя + товар с витрины
Бейдж AI — только на функциях
07Сток: отдельная витрина распродажи
/stock
Свой вход из шапки
Рядом — раздел Sale
08Блог: размерные таблицы и уход
/blog/obzory-tovarov/adidas_sizes
Оглавление · таблицы · микроразметка
Адреса статей — один в один
Кейс / Состав проекта
Состав проекта
15 блоков · от витрины до аналитики
02
Карточка товара
Галерея с фото производителя, переключатель расцветок, артикул под названием, размеры с уровнем остатка и ссылка на размерную таблицу именно этого бренда. Ниже — серия модели и похожие товары.
03
Посадочные по видам спорта
Тринадцать разделов — от бега и футбола до тенниса и единоборств. Постер серии сверху, под ним полноценный каталог вида спорта с фильтрами; кнопки в хиро — готовые пресеты.
04
Мгновенный поиск
Открывается из шапки и по Ctrl+K, ищет по названию, артикулу и с транслитом: «дурамо» находит Duramo. Стрелки и Enter — без мыши.
05
Корзина и оформление
Четыре шага, четыре способа доставки — самовывоз, курьер по Минску, Белпочта и Европочта. Оплата при получении или картой онлайн. Цены и остатки при оформлении сервер берёт из базы, а не из корзины.
06
AI-примерочная
Покупатель загружает своё фото и видит вещь с витрины на себе. Нейросеть получает два реальных кадра товара и тип вещи, а результат перед показом проходит автоматический контроль.
07
Обмен с 1С
Цены, остатки по размерам, бренд и группа приходят из 1С; заказы уходят в 1С документами. Сайт владеет текстами и фото, 1С — номенклатурой и цифрами. Всё пишется в журнал обмена.
08
Заказы и Telegram
Новый заказ и полученная оплата сразу приходят в Telegram-чат магазина — с составом, доставкой и ссылкой в админку. Покупателю на каждую смену статуса уходит письмо.
09
Админка
Товары с живым поиском, вкладками и массовыми действиями, заказы со сменой статуса, тексты разделов, сезонный «Выбор 4TEAM», переключатели блоков главной. AI-описание товара — одной кнопкой, черновиком в форму.
10
Опт для команд
Отдельный вход для клубов, федераций и компаний: условия, контакты оптового отдела и лента из 32 логотипов клиентов. На главной — наклонный оптовый блок с ходовыми игровыми майками.
11
Переезд со старых адресов
Карта из 955 адресов прежнего сайта: товар ведёт в товар, раздел — в раздел, акции — в сток, новости — в блог. Проверка всей карты стоит последним шагом каждого деплоя.
12
SEO-каркас
Свой canonical у каждой страницы, пагинация, понятная роботу, микроразметка товара с ценой и доставкой, sitemap с картинками товаров и 77 текстов разделов, написанных по их составу.
13
Товарные фиды
Два фида для рекламы — Google Merchant Center и Meta. Позиция фида — размер в наличии; цена, скидка и остаток обновляются сами вслед за витриной.
14
Аналитика
Собственный счётчик Umami на сервере магазина — без кук, данные остаются у магазина. Рядом — контейнер GTM и Яндекс Метрика с событиями воронки: просмотр, корзина, оформление, покупка.
15
Блог и размерные таблицы
Пять статей: размерные таблицы двух брендов, уход за обувью и текстилем, технологии. Адреса статей сохранены один в один, у каждой — оглавление, время чтения и микроразметка.
Сайт и учётная система магазина
1С: обмен без рук
Все соединения начинает 1С — сайт только отвечает. Номенклатурой, ценами и остатками владеет 1С, текстами и фото — сайт: выгрузка не перезаписывает то, что магазин отредактировал в админке.
01
Каталог
Цены и остатки по размерам приходят из 1С сами: изменения — каждые 3 минуты, полная сверка — раз в час.
02
Заказ
Заказ с сайта ложится в 1С документом и сразу встаёт в резерв. Заказ с оплатой картой уходит в 1С после подтверждения банка.
03
Статусы
Статусы и отмены ходят в обе стороны: касса пробила чек — на сайте «Выдан», покупателю ушло письмо.
04
Сторож остатков
Сайт сам сверяет остатки с заказами: заказали пару — обмен должен прийти на пару меньше. Иначе — сигнал в Telegram.
Нейросети — по делу
Примерочная
AIКнопка «Примерить онлайн» стоит в карточке одежды, обуви и головных уборов — там, где примерка имеет смысл. Фото покупателя приводится к норме, в нейросеть уходят два настоящих кадра товара, готовый результат проверяется ещё одной моделью.
Открыть примерочную →Описания товаров
AIВ редакторе товара — кнопка «Сгенерировать»: модель смотрит на фото, название и раздел и кладёт черновик описания в форму. Публикует его человек. Реальные фото товара генерацией не подменяются нигде.
Посмотреть в карточке →831
товар на витрине сегодня — только то, что в наличии
955
адресов прежнего сайта ведут на новые страницы
13
посадочных по видам спорта
3 мин
шаг обмена цен и остатков с 1С
Результат
Что появилось у магазина
- витрина, которая сама следует за складом: цены, остатки и новые поступления приходят из 1С;
- заказ, который без перепечатывания проходит путь от корзины до документа в 1С и письма покупателю;
- уведомления о заказах и оплатах в Telegram и админка, где тексты, фото и блоки главной магазин ведёт сам;
- тринадцать посадочных по видам спорта и отдельный вход для оптовых клиентов;
- прежние адреса, которые продолжают работать, товарные фиды для рекламы и собственная аналитика.
Разработано в
Дизайн-система, магазин, обмен с 1С и переезд — под ключ.