I'm available for business trips to other cities for projects lasting a month or longer.

Категории товаров в виде картинок

Типсы
Все
Бутылки
Ремни
Кошельки
Модификация связывает элементы в Zero Block c категориями товаров.

Инструкция, как сделать кастомные категории товаров в Тильда:
  1. Добавили в зеро блок свои элементы (в моем случае картинки и текст), наложили на каждый элемент прозрачный шейп и добавили ему имя CSS-класса - uc-custom-category1, uc-custom-category2 и т.д.
  2. Вставили код ниже в .t123 и заменили в нем Названия категорий.

Работает со стандартными блоками каталога товаров Тильды: ST300, ST305N, ST310N, ST315N, ST320N, ST330
Катагории товаров должны быть одинаковыми и в коде, и в настройках Каталога товаров Тильды. Включая регистр и пробелы. (более подробно ниже)

В Контент блока каталога товаров выбираем "Выводить товары из каталога" -> "Все товары из каталога".
<style>
.t-store__filter.js-store-filter, .t-store__parts-switch-wrapper { display: none !important; }
</style>
<script>
$(document).ready(function() {
    const categoryMap = {
        'uc-custom-category1': 'Все',  // Категорию Все можно удалить, если она вам не нужна
        'uc-custom-category2': 'Типсы',  // Поменяй название категории на свою из настроек Каталога Тильды
        'uc-custom-category3': 'Бутылки',  // Поменяй название категории на свою из настроек Каталога Тильды
        'uc-custom-category4': 'Ремни',  // Поменяй название категории на свою из настроек Каталога Тильды
        'uc-custom-category5': 'Кошельки'  // Поменяй название категории на свою из настроек Каталога Тильды
    };

    const customButtonsSelector = '[class*="uc-custom-category"]';

    const interval = setInterval(function() {
        const $tildaFilters = $('.js-store-parts-switcher');
        if ($tildaFilters.length > 0) {
            clearInterval(interval);
            const $customButtons = $(customButtonsSelector);
            $customButtons.on('click', function() {
                const $clickedButton = $(this);
                let targetCategoryName = '';
                let categoryIndex = 0;
                for (const className in categoryMap) {
                    if ($clickedButton.hasClass(className)) {
                        targetCategoryName = categoryMap[className];
                        categoryIndex = className.replace('uc-custom-category', '');
                        break;
                    }
                }
                if (!targetCategoryName || !categoryIndex) return;
                $tildaFilters.filter(function() {
                    return $(this).text().trim() === targetCategoryName;
                }).click();
                const targetBgSelector = '.uc-custom-category-bg' + categoryIndex;
                $('[class*="uc-custom-category-bg"]').removeClass('activechange');
                $(targetBgSelector).addClass('activechange');
            });
            // Поменяй цифру в конце CSS-класса .uc-custom-category1 на другую, если хочешь,
            // чтобы вместо категории Все при первой загрузке отображалась другая категория
            $('.uc-custom-category1').trigger('click');
        }
    }, 300);
});
</script>
Категории товаров в коде прописываем точно такие же, как в каталоге товаров Тильды:
  1. Зашли в Товары -> Разделы каталога
  2. Скопировали название раздела каталога и вставили его в код под нужным классом (классы мы добавляем в Зеро блоке на нужный элемент).

P.s.: Если надо больше категорий, то добавляем в код 'uc-custom-category6': 'Платья', 'uc-custom-category7': 'Шляпы' и т.д. Тут важна цифра после uc-custom-category.

P.s.: Если вам не нужна какая-то категория, то:
  1. В Контент блока каталога товаров выбираем "Выводить товары из каталога" -> "Все товары из каталога"
  2. В Зеро блок и коде просто не включаем эту категорию.
Больше кода для Tilda в ТГ-канале
Поблагодари за код - подпишись https://t.me/breeze_tilda