Зафиксировать фильтры для магазина в мобильной версии

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

<!-- Зафиксировать фильтры для магазина, подключенного к товарам, в мобильной версии | https://necodim.ru/tilda/shop-filters-fixing -->
<style>
@media screen and (max-width: 960px) {
    .t-store__filter {
        position: fixed;
        z-index: 9999;
        margin-left: 0px !important;
        margin-right: 35px !important;
        padding: 15px;
        top: 30px;
        left: 20px;
        background-color: #ffcc00;
    }
    .js-store-filter-mob-btn {
        color: #222222;
        margin-right: 5px;
    }
    .t-store__filter__opts-mob-btn-icon path,
    .t-store__filter__search-mob-btn-icon path {
        fill: #222222;
    }
    .t-store__filter__item-title::after {
        border-color: transparent #222222 #000000 transparent !important;
    }
}
</style>

Скопировать код

Таким образом пользователь сможет получить доступ к фильтрам и поиску по товарам в любом месте сайта.

Однако, список разделов при этом останется на месте. Да и фильтры будут ездить по всему сайту. Если же хочется, чтобы и разделы двигались вместе с фильтрами, и всё это двигалось только в рамках блока магазина, используйте этот код:

<!-- Зафиксировать фильтры и разделы для магазина, подключенного к товарам, в мобильной версии | https://necodim.ru/tilda/shop-filters-fixing -->
<style>
@media screen and (max-width: 960px) {
    #allrecords {
        overflow: unset !important;
    }
    .js-store-parts-select-container {
        display: block;
        position: -webkit-sticky;
        position: sticky;
        z-index: 100;
        top: 30px;
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        padding: 15px;
        margin: 0 20px;
        background-color: #ffcc00 !important;
    }
    .js-store-filter-mob-btn {
        color: #222222;
        margin-right: 5px;
    }
    .t-store__filter__opts-mob-btn-icon path,
    .t-store__filter__search-mob-btn-icon path {
        fill: #222222;
    }
    .t-store__filter__item-title::after {
        border-color: transparent #222222 #000000 transparent !important;
    }
}
</style>

Скопировать код