Фильтр товаров на сайте — главный инструмент подбора в каталоге, где позиций больше нескольких сотен. Хороший фильтр показывает только те параметры, по которым клиент реально выбирает, пересчитывает доступные значения после каждого клика и никогда не приводит к пустой выдаче. Плохой — выводит сотню свойств из учётной системы и отправляет человека к менеджеру с вопросом «а у вас есть такое?». В этом гайде разбираем, как спроектировать подбор по характеристикам и как те же фильтры превращаются в страницы под поисковые запросы.
ПРАВИЛОФильтр проектируют от вопросов покупателя, а не от списка свойств в 1С.
Зачем каталогу фильтр, если есть поиск
Поиск работает, когда человек знает, что ищет: артикул, модель, точное название. Фильтр нужен, когда он знает только требования — диаметр от 50 до 80 мм, нержавеющая сталь, наличие в Алматы. Это типичная ситуация для B2B-закупок и технических товаров: у закупщика есть спецификация, но нет названия позиции в вашем ассортименте.
Без фильтра такой клиент листает раздел из двух тысяч позиций или звонит. С фильтром — за три клика сужает выдачу до десятка подходящих вариантов и сам собирает заявку. Поэтому, когда мы делаем сайт-каталог с подбором по характеристикам, поиск и фильтры проектируются вместе: поиск с подсказками понимает и названия, и артикулы, а фасетные фильтры работают по характеристикам из 1С.
Какие параметры выводить в фильтр каталога
Самый частый вопрос на старте проекта — сколько фильтров нужно. Правильный ответ: столько, сколько параметров реально влияют на выбор в этой категории. Для кабеля это сечение, число жил и материал, для насосов — напор и производительность, для спецодежды — размер, сезон и класс защиты. У каждой категории свой набор, и общий фильтр «на весь каталог» почти всегда бесполезен.
Как отобрать параметры
- Соберите вопросы клиентовЧто спрашивают менеджеров по телефону и в мессенджерах, по каким параметрам уточняют заказ.
- Посмотрите поисковые запросыКак люди формулируют потребность: «трубы стальные 57 мм», «насос для скважины 50 метров». Это готовый список параметров.
- Сверьте со справочником свойствКакие из нужных параметров уже есть в учёте и заполнены у большинства товаров, а какие придётся дозаполнить.
- Отсейте лишнееСвойства, которые есть у трёх товаров из тысячи, или служебные поля учёта в фильтр не попадают — их можно показать только в карточке.
- Расставьте приоритетДва-три главных параметра — раскрыты сверху, остальные — свёрнуты ниже.
Решение, какие свойства становятся фильтрами, а какие просто показываются в карточке, мы принимаем на аналитике каталога, в первую неделю проекта. Если сделать это позже, приходится переделывать и обмен с 1С, и интерфейс.
Выводить в фильтр всё, что есть в базе. Результат — сто параметров в левой колонке, половина с одним значением, а покупатель на телефоне не доходит до нужного. Длинный фильтр выглядит «богатым» на макете, но мешает выбирать.
Умный фильтр каталога: как он устроен
«Умным» обычно называют фасетный фильтр — тот, что пересчитывает доступные значения после каждого выбора. Отметили «нержавеющая сталь» — из списка диаметров исчезли те, которых в нержавейке нет. Рядом с каждым значением видно число подходящих товаров. Так покупатель никогда не упирается в пустую выдачу.
| Элемент | Как сделать правильно | Что бывает без этого |
|---|---|---|
| Пересчёт значений | Недоступные значения скрываются или становятся неактивными | Пустая выдача и уход со страницы |
| Числовые параметры | Ползунок или поля «от — до» в нужных единицах | Список из двухсот значений диаметра |
| Выбранные значения | Видны над выдачей, каждое снимается одним кликом | Клиент не понимает, почему товаров мало |
| Наличие | Отдельный фильтр по складу или городу | Подбор находит то, чего нет |
| Мобильная версия | Фильтр в выезжающей панели с кнопкой «показать N товаров» | Фильтр занимает три экрана над товарами |
Технически пересчёт на большом каталоге — это нагрузка на сервер. Поэтому вместе с фильтрами проектируют кеширование: в наших каталогах фасетные фильтры и поиск с подсказками работают без тормозов на объёмах до 50 000 позиций, а проверены на каталогах от 20 000 SKU.
Подбор по параметрам на сайте: интерфейс и сценарии
Фильтр — это экран, а не просто список чекбоксов. Его удобство решает, дойдёт ли человек до карточки. Несколько решений, которые мы закладываем в прототип:
- Разные фильтры для разных категорий. В разделе «Трубы» — диаметр и стенка, в разделе «Фитинги» — тип соединения и угол.
- Подбор по задаче, а не по параметру. Для неподготовленных клиентов иногда лучше работает пошаговый подборщик: «для чего», «какой объём», «где монтаж» — с выдачей подходящих моделей.
- Сохранение состояния. После перехода в карточку и возврата назад выбранные фильтры остаются на месте.
- Понятные названия значений. Не «ст. 12Х18Н10Т», а «нержавеющая сталь 12Х18Н10Т», если клиенты ищут именно так.
Такие решения проверяют на прототипе, до дизайна и разработки. Если каталог сложный, например со множеством ролей или пошаговым подбором, имеет смысл заказать полноценный UX/UI-дизайн интерфейса каталога: в формате «Магазин / сервис» проектируются каталог, карточка, чекаут и все состояния экранов, с UX-тестами на людях.
Фильтры каталога и SEO: посадочные страницы из комбинаций
Фильтр — это ещё и способ собрать поисковый спрос. Запрос «трубы стальные 57 мм» — это категория плюс значение свойства. Если комбинация открыта для индексации, имеет свой адрес без параметров, свой заголовок и мета-теги, она становится отдельной посадочной страницей и может попасть в выдачу.
- Сотни и тысячи целевых страниц без ручного создания разделов.
- Запросы «бренд + категория» и «свойство + категория» часто коммерческие и конкурируют слабее общих.
- Покупатель из поиска сразу попадает на нужную подборку.
- Если открыть все комбинации, индекс засоряется тысячами пустых и дублирующих страниц.
- Нужны шаблоны мета-тегов и текстов, иначе страницы одинаковые.
- Требует семантики: без неё не понятно, какие комбинации открывать.
Правило простое: полезные комбинации с поисковым спросом делаем посадочными, мусорные — сортировки, параметры вроде ?sort=, сочетания без спроса — закрываем каноникалами и noindex. В крупном каталоге так получается тысяча посадочных и больше. Эту работу системно ведёт SEO-продвижение интернет-магазинов и каталогов: семантика по категориям, брендам и свойствам, шаблоны мета и чистка дублей.
Данные для фильтров: где обычно всё ломается
Даже идеально спроектированный фильтр не работает на грязных данных. Если в 1С свойство «материал» заполнено как «нерж.», «нержавейка» и «AISI 304» у похожих товаров, фильтр покажет три значения вместо одного, и часть товаров выпадет из подбора.
Поэтому до запуска фильтров проводят чистку справочника свойств: объединяют дубли значений, приводят единицы к одному виду, дозаполняют ключевые параметры у приоритетных товаров. Мы делаем это на правилах обмена, не переделывая учёт в 1С. Если в учёте хаос, это выясняется на аналитике в первую неделю — и честно говорим, где нужна доработка на вашей стороне.
Как проверить, что фильтр работает после запуска
Фильтр — не разовая настройка. Ассортимент меняется, появляются новые свойства и категории, и подбор, который был удобным на старте, через год может обрасти лишними параметрами. Поэтому после запуска полезно смотреть на несколько простых сигналов в веб-аналитике и в работе менеджеров.
- Какими фильтрами пользуются. Если параметром не пользуется почти никто, его можно свернуть или убрать.
- Где выдача пустая или слишком большая. Это сигнал, что значения заполнены неравномерно или не хватает ключевого параметра.
- Какие вопросы остались у менеджеров. Если клиенты по-прежнему уточняют по телефону один и тот же параметр, его стоит добавить в фильтр.
- Какие посадочные из фильтров собирают трафик. Их усиливают текстом и ссылками, мёртвые — закрывают.
Как запустить подбор по характеристикам за один проект
Фильтры нельзя «докрутить потом» без последствий: от них зависят обмен с 1С, интерфейс листинга и SEO-структура. Поэтому лучший момент заложить их — при создании или переделке каталога.
- Выберите три-пять самых важных категорий и опишите для каждой параметры подбора.
- Проверьте заполненность этих свойств в 1С или Excel.
- Соберите запросы, по которым вас ищут, и отметьте, какие из них — комбинации категории и свойства.
- Утвердите фильтры на прототипе листинга вместе с карточкой.
- Определите, какие комбинации открыть для индексации на старте.
Всё это входит в разработку сайта-каталога под ключ: аналитика каталога, UX фильтров и карточек, умные фильтры и поиск по характеристикам, техническая SEO-база с ЧПУ и микроразметкой. Как фильтры влияют на продвижение и бюджет, мы разбирали в статье о бюджете на SEO интернет-магазина.
Что такое умный фильтр в каталоге?
Это фасетный фильтр, который после каждого выбора пересчитывает доступные значения и количество товаров. Он не допускает пустых выдач и показывает только реальные варианты.
Сколько параметров должно быть в фильтре?
Столько, сколько влияет на выбор в конкретной категории, — обычно от трёх до десяти. Главные раскрыты сверху, второстепенные свёрнуты.
Нужно ли открывать фильтры для индексации?
Только комбинации с поисковым спросом, например бренд плюс категория или свойство плюс категория. Остальные закрывают, чтобы не засорять индекс дублями.
Откуда берутся данные для фильтров?
Из характеристик товаров в 1С или Excel. На аналитике решаем, какие свойства становятся фильтрами, и при необходимости чистим значения на правилах обмена.