Фильтры каталога товаров в интернет-магазине: как спроектировать

Фильтры каталога товаров - то, что решает за 20 секунд, купит человек что-то или закроет вкладку. Я делал каталоги на WooCommerce, кастомных SPA на React и Tilda с самописными скриптами, и почти в каждом проекте фильтрация становится точкой, где заказчик экономит на этапе проектирования, а потом переделывает через полгода, когда ассортимент вырастает с 50 позиций до 500. Разберу, как подхожу к проектированию фильтров каталога товаров: структура атрибутов, техническая реализация, SEO и ошибки, которые встречаю чаще всего.

Зачем каталогу нужны фильтры и когда без них не обойтись

Пока в каталоге 20-30 товаров, достаточно категорий и сортировки по цене - фильтры только загромождают интерфейс. Порог, после которого без них не обойтись, я вижу на отметке 50-80 SKU в одной категории: пользователь физически не пролистывает десять экранов карточек, чтобы найти нужный размер или бренд.

На одном из проектов с автозапчастями страница каталога без фильтра по марке, модели и году выпуска давала долю отказов 68%. После внедрения фасетного фильтра с тремя связанными списками (марка → модель → год) отказы упали до 41% за два месяца, а средняя глубина просмотра выросла почти вдвое. Никакой магии - люди просто перестали листать 400 карточек руками.

Второй сценарий, где фильтры обязательны - интернет-магазины с вариативными атрибутами: одежда с размерами и цветами, стройматериалы с параметрами (толщина, длина, марка), электроника с техническими характеристиками. Здесь фильтр - не украшение интерфейса, а единственный способ сузить выбор до нескольких релевантных позиций.

Какие типы фильтров использовать: чекбоксы, диапазоны, теги и фасетный поиск

На практике использую четыре базовых типа, и почти всегда этого достаточно:

• Чекбоксы с мультивыбором - для категориальных атрибутов: бренд, цвет, материал. Обязательно показываю число товаров в скобках рядом с каждым значением - без счётчика человек кликает вслепую и упирается в пустую выдачу.
• Диапазонный слайдер - для цены, размера, объёма. Слайдер плюс два текстовых поля для ручного ввода границ: часть аудитории на мобильном тянет ползунок неточно.
• Переключатели (toggle) - для булевых признаков: «в наличии», «со скидкой», «доступен самовывоз через ПВЗ СДЭК». Это один из самых конвертящих фильтров в нишах с доставкой день-в-день.
• Фасетный поиск с зависимыми списками - когда один фильтр сужает варианты в другом. Выбрали марку авто - список моделей обновился, оставив только реальные пересечения по остаткам.

Правило, которое соблюдаю жёстко: на экране видно не больше 5-7 фильтров одновременно, остальные - под «Показать ещё». Больше десяти видимых блоков фильтрации в исследованиях по юзабилити e‑commerce стабильно снижают конверсию카талога - люди теряются в списке критериев, а не выбирают товар.

Как спроектировать структуру атрибутов для фильтрации товаров

Ошибка, которую вижу в половине магазинов, доставшихся мне на доработку - атрибуты хранятся текстом в описании товара, а не в отдельных полях. Фильтр по такому каталогу собрать нельзя в принципе, только парсить текст регулярками, что работает нестабильно и медленно.

Перед тем как писать код фильтра, я всегда прохожу три шага:

1. Разделяю атрибуты на фильтруемые и справочные

Не каждое поле карточки товара должно попадать в фильтр. Артикул, поставщик, внутренний код склада - справочные данные, в фильтр не идут. Бренд, цвет, размер, материал, наличие - фильтруемые, для них нужна отдельная нормализованная структура.

2. Нормализую значения

Если в одной карточке цвет записан как «красный», в другой - «Красный», а в третьей - «red», фильтр покажет три разных пункта вместо одного. На старте проекта завожу справочник допустимых значений для каждого атрибута и валидирую импорт товаров по нему - это экономит недели правок после того, как каталог наполнен на тысячу позиций.

3. Проектирую хранение под нагрузку

Для каталога до 5-10 тысяч товаров нормальная схема EAV (Entity-Attribute-Value) или JSON-колонка в PostgreSQL с GIN-индексом справляется без проблем. Как только каталог растёт до десятков тысяч SKU и фильтров становится больше 8-10 одновременно активных, обычные SQL-запросы с несколькими JOIN начинают тормозить - здесь я перехожу на отдельный поисковый движок (Meilisearch или Elasticsearch), который держит фасетные счётчики в памяти и отдаёт результат за миллисекунды вместо секунд.

Технические варианты: WooCommerce, Tilda и кастомная разработка

Выбор платформы определяет, сколько придётся дописывать руками.

На Tilda фильтр обычно собираю через встроенный JS-редактор, читая data-атрибуты карточек товара:

document.querySelectorAll('.t-store__filter-checkbox').forEach(input => {
  input.addEventListener('change', () => {
    const activeBrand = [...document.querySelectorAll('.t-store__filter-checkbox:checked')]
      .map(el => el.dataset.brand);
    document.querySelectorAll('.t-store__card').forEach(card => {
      const visible = !activeBrand.length || activeBrand.includes(card.dataset.brand);
      card.style.display = visible ? '' : 'none';
    });
  });
});

Готовые варианты таких скриптов под разные типы фильтров (чекбоксы, диапазон цены, комбинированный фасетный фильтр) я собрал в библиотеке готовых скриптов для Tilda - быстрее адаптировать под свою вёрстку, чем писать с нуля.

Если каталог синхронизируется с 1С или внешним складом, остатки и доступность для фильтра «в наличии» удобно подтягивать через n8n - настраиваю сценарий, который раз в 15-30 минут обновляет флаги наличия по товарам, и фильтр всегда показывает актуальную выдачу без ручных выгрузок. Такая автоматизация в n8n у меня стоит от 25 000 ₽.

Для магазинов, где фильтрация - это ядро бизнеса (маркетплейс, каталог на 20 000+ позиций с десятком атрибутов), выгоднее сразу закладывать кастомную архитектуру: интернет-магазин под ключ с продуманной структурой фильтров у меня стартует от 80 000 ₽, а отдельный веб-сервис или SPA-витрина с высоконагруженным поиском - от 300 000 ₽.

SEO для страниц фильтров: URL и дубли в индексе

Фильтры создают комбинаторный взрыв URL: цвет × размер × бренд × цена легко даёт тысячи вариантов адреса для одного и того же набора товаров. Если не ограничить индексацию, поисковик получает тысячи почти одинаковых страниц и распыляет вес сайта.

Правила, которых придерживаюсь:

• Комбинации из двух и более фильтров закрываю от индексации через noindex, follow - робот продолжает переходить по ссылкам, но не индексирует страницу как отдельный документ.
• Для популярных единичных фильтров с реальным спросом (например, «холодильники Samsung» или «кроссовки 42 размер») делаю отдельный индексируемый URL вида /catalog/holodilniki/samsung/ с уникальным title и текстом - это по сути мини-лендинг под запрос.
• Технические параметры сортировки и пагинации (?sort=price&page=2) всегда через canonical на базовую страницу категории, чтобы не плодить дубли в индексе.
• На страницы с активным фильтром не даю ссылок из футера и меню - только из самого интерфейса каталога, чтобы бот не тратил краулинговый бюджет на комбинации без спроса.

Частые ошибки при разработке фильтров каталога

Собрал список того, что регулярно чиню в чужих магазинах:

• Фильтр не пишет состояние в URL - при обновлении страницы или переходе назад все выбранные значения сбрасываются, пользователь теряет результат поиска.
• Нет счётчиков товаров рядом со значениями фильтра - человек выбирает комбинацию и получает пустую выдачу без объяснения.
• Пустой результат фильтрации не обрабатывается - вместо сообщения «ничего не найдено» с предложением сбросить часть условий человек видит белый экран.
• На мобильной версии фильтр открывается модальным окном без кнопок «Применить» и «Сбросить» - приходится закрывать окно и открывать заново, чтобы убрать одно значение.
• Запросы фильтрации идут без индексов по полям атрибутов в базе - на 10-15 тысячах товаров каждый клик по фильтру ждёт 2-3 секунды вместо десятых долей секунды.

Частые вопросы

Сколько стоит разработать фильтры для каталога товаров?

Зависит от платформы и сложности. Кастомный скрипт фильтрации под Tilda для простой доработки - от 3 000 ₽, комплексная интеграция с CRM, эквайрингом и складскими остатками - от 40 000 ₽. Интернет-магазин под ключ с продуманной структурой фильтров на WordPress или кастомной платформе - от 80 000 ₽.

Что лучше для фильтров - WooCommerce или Tilda?

WooCommerce даёт нативные атрибуты и фильтры без доработки с нуля, это быстрее для каталога до нескольких тысяч товаров. Tilda требует кастомного скрипта поверх T‑Store, зато подходит, если у вас уже есть сайт на этой платформе и не хочется переезжать на отдельный движок ради интернет-магазина.

Нужен ли Elasticsearch или Meilisearch для небольшого магазина?

При каталоге до 5-10 тысяч товаров и 4-5 активных фильтрах обычная SQL-база с правильными индексами справляется без отдельного поискового движка. Смысл переходить на Elasticsearch или Meilisearch появляется, когда фильтров становится больше восьми одновременно и каталог переваливает за 20-30 тысяч позиций.

Как фильтры каталога влияют на SEO магазина?

Сами по себе фильтры не вредят SEO, вредит бесконтрольная индексация всех их комбинаций - это плодит дубли и размывает вес сайта. Решение - закрывать многофильтровые URL через noindex, оставлять индексируемыми только страницы под реальные частотные запросы и следить, чтобы canonical везде указывал на нужную версию страницы.