Привет, я Максим, веб-разработчик. Фильтры в каталоге интернет-магазина — один из тех элементов, которые либо продают за вас, либо тихо отпугивают клиентов. Плохие фильтры — это когда человек ищет «красные кроссовки Nike 42 размера», а получает пятьсот нерелевантных результатов, среди которых белые сандалии и зимние ботинки. Хорошие фильтры — когда три клика сужают каталог до десяти идеально подходящих товаров. Разбираю подробно: какие фильтры нужны, как реализовать AJAX-фильтрацию, как работать с мобильными и как избежать SEO-проблем.

Почему хорошие фильтры критичны для продаж

Чем больше каталог — тем важнее фильтрация. Магазин с пятьюдесятью товарами обойдётся без фильтров — пользователь просмотрит все позиции за минуту. Магазин с пятью тысячами товаров без качественных фильтров — фактически мёртв для конверсии. Человек не будет пролистывать двести страниц каталога, чтобы найти нужный товар. Он уйдёт к конкуренту, у которого можно за три клика сузить выборку до десяти релевантных позиций.

По данным Baymard Institute, 42% крупных интернет-магазинов имеют серьёзные проблемы с юзабилити фильтров: невозможно отфильтровать по нужному параметру, фильтры возвращают пустые результаты без предупреждения, нет сброса, неудобная мобильная версия. Каждая такая проблема — это прямые потери в продажах.

На моём проекте — интернет-магазин одежды с 3 500 позициями — переработка системы фильтров (добавление фильтра по размеру с индикатором наличия, AJAX-обновление без перезагрузки, мобильная панель фильтров) увеличила глубину просмотра каталога на 35% и конверсию из каталога в карточку товара — на 22%.

Какие фильтры нужны: универсальные и нишевые

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

Цена — самый используемый фильтр в любом магазине. Реализуется как ползунок с диапазоном «от — до» и полями для ручного ввода крайних значений. Ползунок должен визуально показывать распределение товаров по ценовым диапазонам (гистограмма) — так пользователь видит, где сосредоточена основная масса товаров.

Бренд — чекбоксы с возможностью выбрать несколько брендов одновременно. Если брендов больше двадцати — обязательно добавьте поле поиска внутри списка. Никто не будет скроллить список из ста брендов.

Наличие — простая галочка «Только в наличии». Критически важная: нет ничего хуже для пользователя, чем найти идеальный товар, обрадоваться, кликнуть на карточку — и увидеть «Нет в наличии». Фильтр по наличию должен быть включён по умолчанию или максимально заметен.

Категория-специфичные фильтры — то, что отличает хороший каталог от посредственного. Для одежды: размер, цвет, материал, сезон, пол. Для электроники: диагональ экрана, объём памяти, разрешение камеры, тип процессора. Для мебели: ширина, высота, глубина, материал, стиль. Для стройматериалов: толщина, плотность, класс прочности. Чем точнее фильтры соответствуют критериям выбора покупателя — тем выше конверсия.

AJAX-фильтрация: стандарт 2026 года

Страница не должна перезагружаться при каждом изменении фильтра. В 2026 году AJAX-фильтрация — абсолютный стандарт, но я до сих пор встречаю магазины, где каждый клик по фильтру вызывает полную перезагрузку страницы. Это убивает пользовательский опыт: человек выбрал бренд — ждёт три секунды перезагрузки, выбрал размер — ещё три секунды. При настройке пяти параметров он потратит пятнадцать секунд на ожидание.

Правильная реализация: пользователь отмечает чекбокс или двигает ползунок → AJAX-запрос отправляется на сервер → список товаров обновляется мгновенно (200–500 миллисекунд) → URL обновляется через History API (pushState). Обновление URL критично для двух целей: чтобы пользователь мог поделиться отфильтрованной ссылкой с коллегой, и чтобы поисковой робот мог видеть параметры фильтрации.

Счётчик результатов — обязательный элемент. Рядом с каждым значением фильтра отображайте количество товаров: «Nike (42)», «Adidas (18)», «Puma (7)». Пользователь сразу видит, есть ли товары по его критериям, и не тратит время на бессмысленные комбинации. А внизу панели фильтров — общий счётчик: «Найдено: 42 товара».

Мобильные фильтры: отдельная задача, которую нельзя игнорировать

На мобильных устройствах фильтры невозможно разместить сбоку от каталога — ширина экрана не позволяет. Они должны быть в отдельной панели, которая открывается по кнопке «Фильтры» (обычно рядом с кнопкой «Сортировка» над списком товаров).

Я делаю мобильные фильтры как полноэкранную панель, которая выезжает снизу (bottom sheet pattern). Внутри — аккордеон с категориями фильтров: пользователь раскрывает нужную группу, выбирает значения, закрывает. В нижней части экрана — фиксированная кнопка «Показать N товаров» с динамическим обновлением счётчика. Эта кнопка всегда видна и мотивирует нажать — пользователь видит, что его фильтрация дала результат.

Важный нюанс для мобильных: на десктопе фильтры могут применяться мгновенно при каждом изменении. На мобильных лучше накапливать выбор пользователя и применять всё разом по кнопке. Иначе каждый тап будет вызывать перезагрузку списка товаров — а при медленном мобильном интернете это дёрганое и раздражающее поведение.

SEO и фильтры: как не создать бесконечный кроулинг

Фильтрация генерирует тысячи комбинаций URL: бренд + размер + цвет + ценовой диапазон — это огромное количество уникальных адресов. Если не управлять этим, поисковый робот попадёт в ловушку бесконечного обхода, тратя crawl budget на бессмысленные страницы.

Мой подход двухуровневый. Для значимых комбинаций фильтров, по которым люди реально ищут в Яндексе (определяю через Вордстат), я создаю отдельные статические посадочные страницы с уникальным title, description и SEO-текстом. «Красные кроссовки Nike мужские» — это не просто URL с параметрами, а полноценная страница, оптимизированная под конкретный запрос. Такие страницы ранжируются отлично.

Все остальные комбинации (а их тысячи) закрываю от индексации: через meta noindex на страницах с фильтрующими параметрами или через блокировку в robots.txt. Canonical всех отфильтрованных вариантов указывает на основную страницу категории без фильтров. Это предотвращает раздувание индекса и концентрирует ссылочный вес на нужных страницах.

Типичные ошибки, которые убивают конверсию фильтров

Фильтры, которые не сбрасываются одним кликом. Кнопка «Сбросить все фильтры» должна быть заметной и всегда доступной — в верхней части панели фильтров. Пользователь зашёл в тупик с пустыми результатами — ему нужен быстрый путь назад.

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

Отсутствие индикации активных фильтров. Пользователь выбрал три фильтра, прокрутил каталог, видит странные результаты — и не помнит, какие фильтры активны. Всегда показывайте активные фильтры в виде тегов над списком товаров с крестиком для удаления каждого.

Хорошие фильтры — это навигатор по каталогу, который не ограничивает выбор, а помогает найти именно то, что нужно. Инвестиция в их проработку окупается ростом конверсии и снижением показателя отказов на страницах каталога.