Модификации каталога товаров (категории, фильтры и поиск) на Тильде

Это сборник кода, модифицирующего каталог товаров (ST300, ST305N, ST310N, ST315N, ST320N, ST330), а именно: категории, фильтры и поиск на Тильде.

Любой код размещаем в t123 выше блока с каталогом, чтобы не было мерцания стилей.

Кастомные категории в ZeroBlock

Типсы
Все
Бутылки
Ремни
Кошельки
Инструкцию по установке - Кастомные категории товаров

Модификация фильтров на Тильде в виде ползунков

Подробнее про функционал читай в статье Фильтры на Тильде в виде ползунков вместо чекбоксов

Раскрытые фильтры и поиск в каталоге товаров на Тильде на мобильных устройствах

Код делает раскрытыми фильтры и поле поиска в каталоге товаров на Тильде на мобильной версии сайта.
<style>
@media screen and (max-width: 960px) {

        /* Стили для отображения фильтров и поиска на мобильных устройствах */
        .t-store__filter__options, 
        .t-store__filter__search-and-sort, 
        .t-store__filter__sort {
            display: block; /* Отображение в виде блоков */
        }

        /* Скрытие кнопки фильтров для мобильных */
        .t-store__filter__opts-mob-btn {
            display: none; /* Скрытие кнопки */
        }

        /* Скрытие кнопки поиска для мобильных */
        .t-store__filter__search-mob-btn {
            display: none; /* Скрытие кнопки */
        }
    }
</style>

Большое поле поиска в каталоге товаров Тильда на мобилке и компе

Нормальное и заметное поля поиска.

Данный код увеличивает размер поля поиска товаров в стандартном каталоге на Тильде и добавляет свой цвет, закругление поля поиска, размер шрифта и т.д.
<style>
    /* Стили для элементов поиска и фильтра */
    .t-store__filter__btn, 
    .t-store__filter__input {
        background-color: #f0f0f0 !important; /* Цвет фона */
        text-align: left !important;          /* Позиционирование текста слева */
        border: 2px solid #074600;            /* Цвет и толщина границы */
        border-radius: 10px !important;       /* Скругление углов */
        color: #000000 !important;            /* Цвет текста */
        padding-left: 20px !important;        /* Отступ слева (для размещения иконки поиска) */
        font-size: 18px;                      /* Размер шрифта */
        height: 50px;                         /* Высота поля */
    }
    
    /* Увеличиваем ширину поля поиска на десктопе */
    @media screen and (min-width: 440px) {
        .t-store__filter__input {
            width: 400px !important;
        }
    }

    /* Стили для иконки поиска */
    .t-store__search-icon {
        width: 20px !important;     /* Ширина иконки */
        height: 20px !important;    /* Высота иконки */
    }
    .t-store__search-icon path {
        fill: #074600 !important;  /* Цвет иконки */
    }
</style>
А чтобы зафиксировать фильтры и поиск можно сделать так:
  1. Создаем в Zero Block плашки с фильтром и поиском,
  2. Устанавливаем на них якорную ссылку на начало каталога и при нажатии они просто перебрасывают наверх к фильтрам.

Убрать раздел каталога "ВСЕ" на Тильда

Модификация убирает кнопку ВСЕ из списка категорий товаров. Но при этом оставляет все товары видимыми при заходе на сайт.

На выбор 2 варианта кода:
  1. Скрывает кнопку ВСЕ из категорий товаров на Тильде. При нажатии на любую категорию (например, Типсы), возвращает кнопку "ВСЕ" (делает ее видимой), чтобы можно было посмотреть все товары. При нажатии на кнопку "ВСЕ", скрывает ее, но отображает все товары.
  2. Полностью убирает кнопку ВСЕ из категорий товаров на Тильде. Кнопки просто не будет. Однако при первом заходе на сайт все товары из каталога отобразятся. После выбора категории не будет возможности вернуться ко всем товарам.

1 вариант - скрываем категорию ВСЕ, но отображаем ее при клике на другую категорию. Пример 1 варианта
<style>
    /* Скрываем кнопку "Все", но отображаем ее при клике на другую категорию */
    .js-store-parts-switcher.t-store__parts-switch-btn.t-name.t-name_xs.t-menu__link-item.t-store__parts-switch-btn-all.t-active {
      display: none !important;
    }
</style>
2 вариант - тотально скрываем категорию ВСЕ.
Пример 2 варианта
<style>
    /* Тотально скрываем кнопку "Все" */
    .js-store-parts-switcher.t-store__parts-switch-btn.t-name.t-name_xs.t-menu__link-item.t-store__parts-switch-btn-all {
      display: none !important;
    }
</style>
Больше кода для Tilda в ТГ-канале
Поблагодари за код - подпишись https://t.me/breeze_tilda