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

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

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

Модификация категорий товаров в виде табов
Раскрытые фильтры товаров в мобильной версии
Большое поле поиска товаров (увеличить поиск каталога на Тильде)

Категории каталога товаров в виде табов на Тильде

Код выделяет категории товаров, чтобы они были более заметны. В итоге категории товаров на Тильде образуют табы.

Данная модификация работает с блоками: ST300, ST305N, ST310N, ST315N, ST320N, ST330.
<style>
    /* Стили для переключателя категорий каталога */
    .js-store-parts-switcher {
        background-color: #f0f0f0;  /* Цвет фона */
        line-height: 60px;           /* Высота строки для вертикального выравнивания текста */
        padding-left: 22px;          /* Отступ слева */
        padding-right: 22px;         /* Отступ справа */
        border-radius: 10px;         /* Скругление углов */
        margin-right: 10px;          /* Отступ справа */
        margin-left: 0px;            /* Отступ слева */
        border: 0px solid #074600;   /* Обводка */
        font-weight: 700 !important;  /* Жирное начертание шрифта */
        font-size: 16px !important;   /* Размер шрифта */
        height: 60px !important;      /* Высота элемента */
        vertical-align: middle !important;
        box-sizing: content-box !important;
    }

    /* Стили для контейнера со всеми категориями */
    .t-store__parts-switch-wrapper {
        text-align: center;            /* Выравнивание табов по центру экрана (доступны настройки: left, right) */
        margin-bottom: 30px!important; /* Отступ снизу */
        margin-left: 0px!important;  /* Отступ слева */
        margin-right: 0px!important;  /* Отступ справа */
    }

    /* Стили для активной кнопки категории */
    .t-store__parts-switch-btn.t-active {
        opacity: 1;                  /* Полная непрозрачность */
        background-color: #074600 !important; /* Цвет фона активной кнопки */
        color: #ffffff !important;    /* Цвет текста на активной кнопке */
        border: 3px solid #074600 !important; /* Толщина и цвет рамки */
    }

    /* Стили для категории при наведении */
    .t-store__parts-switch-btn:hover {
        transition: 300ms !important; /* Плавный переход для изменений (доступны настройки: в ms - меняйте цифру */
        background-color: #ffffff !important; /* Цвет фона при наведении */
        color: #074600 !important;    /* Цвет текста при наведении */
        border: 3px solid #074600 !important; /* Цвет и толщина границы при наведении */
    }
</style>

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

Код делает раскрытыми фильтры и поле поиска в каталоге товаров на Тильде на мобильной версии сайта.
<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>
А чтобы зафиксировать фильтры и поиск я сделал в зеро блоке плашки с фильтром и поиском, которы при нажатии просто перебрасывают наверх к фильтрам.
Больше кода для Tilda в ТГ-канале
Поблагодари за код - подпишись https://t.me/breeze_tilda