03 / Data → interface

Сайт-каталог: данные, фильтры, выбор

Каталог начинается с модели данных. Интерфейс, SEO и подборки становятся следствием понятной структуры товара.

Обсудить каталог Смотреть прототип

IM Fashion / B2B catalog

Live / product filter

Фильтр следует за данными

Проверьте, как один набор полей превращается в разные подборки.

Core Hoodie

30 цветов

от 100 шт.

Artist Bar

12 вкусов

карточка + story

Sea Ritual

3 шага ухода

подбор по задаче

Private Label

контрактное производство

бриф → расчёт

Fiber Build

6 типов работ

зона обслуживания

Starter Kit

готовая серия

быстрый checkout

Каталог — это интерфейс над системой данных

Каталог должен решать две задачи одновременно. Пользователь должен быстро найти подходящий товар, а поисковая система — понять ассортимент, категории и различия между страницами. Я проектирую структуру данных, категории, карточки, фильтры, подборки и контент как единую систему. Это позволяет масштабировать каталог без ручного копирования и создавать тысячи понятных поисковых точек входа.

CTA: Обсудить архитектуру каталога

CSV / API→Валидация→Категории→Карточки→SEO / Feed

Сначала данные, потом интерфейс

Каталог начинается не с дизайна карточки, а с модели данных. Я определяю обязательные поля, варианты, характеристики, изображения, цены, наличие, материалы, размеры и связи между товарами. После этого становится понятно, какие фильтры действительно помогают выбору, какие параметры нужно вынести в таблицы и какие данные использовать для автоматической генерации метатегов, alt и XML-фидов.

Категории, фильтры и подборки

Не каждый фильтр должен становиться индексируемой страницей. Я разделяю навигационные фильтры и самостоятельные поисковые посадочные. Категория отвечает на широкий запрос, подкатегория — на более точный, подборка объединяет товары по задаче, аудитории или сценарию использования. Такой подход снижает количество дублей и помогает создавать страницы с реальной ценностью, а не бесконечные комбинации параметров.

IM Fashion B2BКаталог работает как коммерческая система, а не как набор карточек.

Карточка товара

Карточка должна содержать не только название и цену. Важны понятное описание, характеристики, варианты, способы нанесения или комплектации, сроки, минимальная партия, изображения, связанные товары и ответы на вопросы. Для похожих товаров требуется достаточно уникальная информация, чтобы поисковая система не воспринимала страницы как копии. Если ассортимент большой, тексты и метаданные строятся из структурированных данных и редактируемых смысловых блоков.

SEO, изображения и товарные фиды

В проект входят человекопонятные URL, Title, Description, H1, canonical, Schema.org, sitemap.xml и внутренняя перелинковка между категориями, карточками, статьями и кейсами. Изображения получают содержательные имена и alt. При необходимости создаются CSV, JSON или XML-выгрузки для Pinterest, торговых площадок, социальных сетей и внешних систем.

Как обновляется каталог без тяжёлой CMS

Товарные данные можно хранить в таблице, CSV, JSON, базе внешнего сервиса или системе учёта. На их основе генерируются статические HTML-страницы. Это позволяет сохранить скорость и простоту frontend, но не заставляет вручную редактировать каждую карточку. Сценарий обновления выбирается под объём ассортимента и реальные процессы компании.

Вопросы и ответы

Можно ли загрузить несколько тысяч товаров?

Да. Для большого ассортимента используется структурированный источник данных и автоматическая генерация страниц.

Нужны ли все фильтры в поиске?

Нет. Индексируются только страницы с самостоятельным спросом и полезным содержанием. Остальные фильтры остаются инструментом навигации.

Можно ли добавить оплату позже?

Да. Каталог можно запустить без корзины, а затем подключить заказ и оплату через внешние сервисы или API.

Как избежать дублей карточек?

Нужно правильно разделять товар, вариант, объём и комплектацию, использовать canonical и добавлять содержательные различия между индексируемыми страницами.

Дмитрий Лаврушин — автор и разработчик проекта — Дмитрий Лаврушин / product · sales · web systems

Personal approach / 01

Каталог проектирую как модель выбора

Смотрю на исходные таблицы, варианты товара и будущие обновления. Поля данных становятся фильтрами, подборками, шаблонами и SEO-страницами.

01модель данных
02правила фильтрации
03шаблоны карточек

Обсудить задачу Обо мне

Selected work / видео и сайты

Примеры можно не только прочитать, но и открыть

Запись экрана показывает логику и движение интерфейса. Рядом — подробный кейс или действующий сайт.

01 / project

IM Fashion B2B

B2B-каталог производства: ассортимент, private label и маршрут запроса партии.

Разобрать кейс →

02 / project

ZIMATHERM Sea Origin

Визуальная витрина косметической серии с продуктовым каталогом и системой бренда.