С помощью этой модификации можно изменить внешний вид фильтра "Цвет" в каталоге на Тильде. По умолчанию цвета отображаются в виде цветных кружков — модификация заменяет их на выпадающий список. Работает с блоками магазина ST300, ST305N, ST310N, ST315N, ST320N, ST330
Инструкция по установке
- Копируем код в HTML блок T123. Блок Т123 размещаем на странице с каталогом.
- В коде можно указать цвет для текста в при наведении;
<!--TICODE --><!-- Фильтр "цвет" в виде выпадающего списка в каталоге тильда | https://ticode.dev -->
<style>
.t-store__filter__item-controls-container {
display: flex !important;
gap: 5px !important;
}
.t-store__filter__checkbox {
display: block !important;
}
.t-store__filter__checkmark {
display: none !important;
}
.t-store__filter__title_color {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
.t-store .t-store__filter__checkbox_buttons.t-store__filter__checkbox_color {
width: 100% !important;
}
.t-store .t-store__filter__item-controls-container_buttons .t-store__filter__checkbox_color:hover {
color: #000000; /* Указываем цвет текста в списке при наведении */
padding:0;
bottom:0;
background-color: transparent;
-webkit-transform: translateX(0);
transform: translateX(0);
position: relative;
}
</style>Если у вас многостраничный сайт или несколько страниц с каталогами, лучше всего добавить код в глобальный CSS сайта — предварительно удалив обёртку <style></style> в начале и в конце.
Где найти: Настройки сайта / Еще / Пользовательские CSS-стили
Другие модификации для каталога на Тильда
Горизонтальный скролл разделов в блоках магазина: удобно для компактного размещения категорий и экономии вертикального пространства.
Вывод остатка товара в каталоге: помогает создать эффект ограниченности и стимулирует покупку.
Кнопка «Загрузить ещё» в блоках магазина: костюмная кнопка подгрузки товаров
Скрытие длинного текста в карточках товара: сохраняет аккуратный внешний вид и делает карточки компактнее.
