Фильтр товаров на Tilda нужен, как только каталог перерастает 30-40 карточек: без него посетитель листает страницу за страницей и уходит к конкуренту, у которого можно сразу выбрать нужный размер или цвет. Я собирал фильтры для интернет-магазинов на Tilda больше пяти лет - от простой сортировки по цене до многоуровневой фильтрации с привязкой к 1С и остатками в реальном времени. В этой статье раскладываю по полочкам, что дает встроенный функционал платформы, чем полезны готовые скрипты и когда без кастомной разработки не обойтись.
Зачем каталогу на Tilda нужен фильтр по параметрам
Представьте магазин мебели на 250 товаров без фильтра по материалу, размеру и цене - посетитель откроет первую попавшуюся страницу каталога, пролистает три экрана и закроет вкладку. По моей практике на проектах с каталогом от 100 позиций конверсия в карточку товара падает почти вдвое, если нет возможности отсечь лишнее по цвету, цене или наличию.
Tilda изначально задумывалась как конструктор лендингов, и функция интернет-магазина появилась в ней позже как надстройка. Отсюда и ограничения: штатный каталог умеет сортировать по цене и категориям, но полноценной фильтрации по произвольным характеристикам (материал, размер, бренд, совместимость) из коробки долго не было. Ситуация улучшилась с обновлениями Tilda, но узкие места остались, и о них я расскажу дальше.
Встроенный фильтр Zero Block: что реально умеет
В блоках каталога линейки Store (Store2, Cart) Tilda дает базовую фильтрацию по:
- категориям и подкатегориям товаров;
- цене (слайдер с минимальным и максимальным значением);
- меткам товара (Label), которые можно использовать как теги-характеристики;
- наличию на складе, если включен учет остатков.
Этого достаточно для интернет-магазина на 50-80 товаров с одной-двумя категориями. Как только характеристик становится больше трех (размер + цвет + материал + бренд), встроенный фильтр начинает буксовать: метки превращаются в кашу, а сама Tilda не дает построить перекрестную фильтрацию “покажи красные диваны из экокожи дешевле 40 000 ₽”.
Еще один нюанс, с которым я сталкивался на проекте для магазина автозапчастей: фильтр по меткам в Tilda не индексируется поисковиками отдельными URL, то есть SEO-трафик на страницы “фильтр по бренду X” не получить - Tilda не создает под каждое сочетание фильтров уникальный адрес с уникальным заголовком.
Готовые решения для фильтрации каталога: маркетплейс Tilda и сторонние скрипты
На маркетплейсе Tilda и в паблике разработчиков есть готовые блоки и скрипты, которые расширяют штатную фильтрацию:
- плагины с мультивыбором характеристик (чекбоксы вместо одной метки);
- скрипты подсчета количества товаров в каждой категории фильтра;
- готовые связки “фильтр + сортировка + пагинация” одним JS-модулем.
Я регулярно ставлю клиентам такие скрипты, когда каталог до 150-200 товаров и характеристик не больше 4-5 - это быстрее и дешевле, чем писать логику с нуля. Стоимость подключения готового скрипта под конкретный каталог - от 3 000 ₽, если структура товаров в Tilda уже приведена к единому виду (одинаковые названия меток, единый формат цены).
Подборку рабочих скриптов для Tilda, включая варианты фильтрации каталога, я держу в библиотеке готовых решений - там же лежат скрипты для интеграции с СДЭК и Т‑Банк эквайрингом, которые часто нужны в связке с фильтром для интернет-магазина.
Минус готовых скриптов один: они рассчитаны на типовую структуру данных Tilda и плохо переживают нестандартные сценарии - например, фильтр по совместимости товаров (запчасть подходит к модели X и Y одновременно) или фильтр, который должен учитывать остатки из внешней 1С в реальном времени.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Кастомный фильтр товаров: когда встроенного и готового мало
К кастомной разработке фильтра я перехожу в трех случаях: каталог больше 300-500 товаров, нужна перекрестная фильтрация по 5+ параметрам одновременно, либо фильтр должен опираться на данные из внешней системы - 1С, СRM или Google Sheets (для небольших каталогов), которые обновляются чаще, чем раз в день.
Технически кастомный фильтр на Tilda - это JS-скрипт, который перехватывает рендер карточек товара через Tilda API (t‑store), строит собственный интерфейс фильтрации на data-атрибутах и скрывает/показывает карточки без перезагрузки страницы. Пример базовой логики фильтрации по одному атрибуту:
document.querySelectorAll('.filter-item').forEach(function (btn) {
btn.addEventListener('click', function () {
var value = btn.dataset.filterValue;
document.querySelectorAll('.js-product').forEach(function (card) {
var match = card.dataset.attrs.split(',').includes(value);
card.style.display = value === 'all' || match ? '' : 'none';
});
});
});В реальных проектах логика сложнее: нужно учитывать несколько активных фильтров сразу, считать количество совпадений для каждого значения и синхронизировать состояние с URL (чтобы фильтр сохранялся при обновлении страницы или шаринге ссылки). На проекте для магазина инструмента я делал именно такую связку - фильтр по бренду, мощности и цене одновременно, плюс подтягивание остатков из 1С через API раз в 15 минут.
Стоимость такой доработки у меня начинается от 40 000 ₽, если фильтр завязан на интеграцию с CRM, эквайрингом или складской системой - тут в цену закладывается не только JS на фронте, но и настройка обмена данными с внешним сервисом.
Сравнение: встроенный фильтр, готовый скрипт и кастомная разработка
| Критерий | Встроенный фильтр Tilda | Готовый скрипт | Кастомная разработка |
|---|---|---|---|
| Каталог до 80 товаров, 1-2 параметра | Подходит | Избыточно | Избыточно |
| Каталог 100-300 товаров, 3-5 параметров | Не хватает гибкости | Подходит | Оправдано при росте |
| Перекрестная фильтрация 5+ параметров | Не работает | Работает нестабильно | Подходит |
| Связь с 1С/CRM/остатками в реальном времени | Нет | Ограниченно | Подходит |
| Стоимость | Входит в тариф Tilda | от 3 000 ₽ | от 40 000 ₽ |
| Срок внедрения | 1 день | 1-3 дня | от 7 рабочих дней |
На рынке фрилансеров и в студиях стоимость кастомного фильтра для Tilda я видел в диапазоне 25 000-80 000 ₽ - разброс сильно зависит от того, входит ли в задачу интеграция с внешними системами или это чисто фронтенд-доработка.
Что учесть при внедрении: интеграция с оплатой, доставкой и CRM
Фильтр редко живет отдельно от остального интернет-магазина. На практике он тянет за собой смежные доработки:
- если товары привязаны к остаткам, фильтр “в наличии” должен обновляться синхронно со складом - иначе клиент отфильтрует товар как доступный, а на кассе окажется, что его нет;
- при подключении Т‑Банк эквайринга или СДЭК калькулятора важно, чтобы скрипт фильтра не конфликтовал со скриптами оплаты и доставки - все они висят на одной странице и могут перехватывать одни и те же события;
- для каталогов с частым обновлением цен и остатков имеет смысл настроить синхронизацию через n8n - сценарий забирает данные из 1С или CRM по расписанию и обновляет карточки в Tilda, не трогая логику фильтра.
Я обычно тестирую фильтр на паре десятков карточек с разными сочетаниями характеристик, прежде чем выкатывать на весь каталог - так проще поймать краевые случаи вроде товара без единой метки, из-за которого фильтр может просто “потерять” карточку.
Когда стандартных блоков не хватает
Кастомный скрипт
от 3 000 ₽
Подробнее →Частые вопросы
Можно ли сделать фильтр товаров на Tilda без программиста?
Для каталога до 50-80 товаров с одной-двумя категориями хватит встроенного блока Store - настраивается через панель Tilda без кода. Как только нужна фильтрация по 3+ параметрам одновременно или перекрестные сочетания, без JS-доработки результат будет нестабильным: метки начнут путаться, а количество товаров в каждом фильтре не будет пересчитываться корректно.
Почему встроенный фильтр Tilda не подходит для SEO-продвижения категорий?
Tilda не создает отдельные URL под каждое сочетание фильтров - вся фильтрация происходит на одной странице через JS без изменения адреса. Из-за этого страницы вида “диваны из экокожи до 40000 рублей” не индексируются поисковиками как отдельные посадочные страницы. Для SEO под конкретные фильтры нужна кастомная доработка с генерацией URL-параметров и метатегов под каждую комбинацию.
Сколько стоит кастомный фильтр для интернет-магазина на Tilda
Простая доработка встроенного фильтра или подключение готового скрипта под конкретную структуру каталога - от 3 000 ₽. Комплексный фильтр с интеграцией CRM, эквайринга или синхронизацией остатков из 1С - от 40 000 ₽, срок реализации от 7 рабочих дней в зависимости от количества параметров и внешних систем.
Как фильтр товаров влияет на скорость загрузки каталога Tilda
При каталоге свыше 300-400 товаров на одной странице JS-фильтр, который рендерит все карточки сразу и потом скрывает лишние, ощутимо замедляет первую загрузку - я замерял до 2-3 секунд лишней задержки на мобильных сетях. Решение - подгрузка карточек порциями (пагинация или бесконечная прокрутка) вместе с фильтром, а не рендер всего каталога целиком.