Top.Mail.Ru
Loading...
-50% до 31 августа
открой полную свободу творчества с GPT-5
AI-ассистент для Тильды
No-code платформа для интеграции с российскими сервисами
Адаптер
Мы в соцсетях
Ответим на вопросы
Техподдержка
Образовательные курсы и гайды для IT-специалистов
Академия
Клиентам
О нас
Плагин для Тильды
Партнерам
Скачать расширение
Техподдержка
Модификации
AI-ассистент
Обучение
Профиль
Подписка
Партнерка
Новости
Шаблоны
Услуги
-50% до 31 августа
открой полную свободу творчества с GPT-5
AI-ассистент для Тильды
NLM217 • ВРЕМЯ НАСТРОЙКИ: 2 МИНУТЫ

Как настроить разделы каталога товаров в зеро блоке на тильде?

Модификация позволяет настраивать разделы каталога товаров с индивидуальным дизайном и выводить из Зеро блока в 4 вариантах: из текста, кнопки, шейпа и картинки. Это решение идеально подходит для интернет-магазинов с большим ассортиментом и разными категориями товаров, обеспечивая удобную настройку и привлекательный внешний вид каталога.
Инструкция

Шаг 1:
Подготовка стандартного каталога и Зеро блока
  • Добавьте стандартный блок каталога товаров (например, ST305N).
  • Подготовьте Зеро блок с будущими кликабельными разделами (в генераторе кода нужно будет верно выбрать тип элемента: кнопка, текст, шейп или картинка)

Шаг 2:
Откройте генератор кода для модификации.
  • Укажите ID блока каталога
  • В поле «Активный раздел по умолчанию» впишите название раздела, который будет отображаться первым при загрузке страницы
Настройте внешний вид кнопок разделов:
• «Непрозрачность неактивных кнопок»: выберите уровень прозрачности для неактивных кнопок (например, 50%).
• «Непрозрачность активного пункта»: выберите уровень прозрачности для активной кнопки (например, 100%).
• «Тип элемента»: выберите тип оформления кнопки.
• «Цвет текста активного пункта»: задайте цвет текста для активной кнопки (например, #0058ff) – доступны при выборе типа «кнопка».
• «Фон активного пункта»: задайте цвет фона для активной кнопки (например, #ffffff) – доступны при выборе типа «кнопка».
• «Регулировка позиции иконки по высоте (px)»: укажите смещение иконки по вертикали, если используете иконки (доступны при выборе типа «кнопка»).

Добавьте кнопки для разделов каталога
• Нажмите «+ Добавить кнопку», чтобы создать новую кнопку для раздела.
• В поле «Класс кнопки» укажите уникальный CSS-класс для каждой кнопки (например, button1, button2).
• В поле «Название раздела» впишите название соответствующего раздела каталога (важно указать название раздела так, как он прописан в разделах сайта).
• Добавьте столько кнопок, сколько у вас разделов в каталоге.
Скопируйте сгенерированный HTML-код.

Шаг 3:
На страницу Tilda добавьте блок T123 («Другое» → «HTML-код»).
Вставьте скопированный код в «Контент» этого блока.

Шаг 4:
Сохраните и опубликуйте страницу.
Проверьте работу поиска на опубликованном сайте.

Имейте ввиду:
В блоке каталога товаров должны быть выведены все товары из каталога. Разделы каталога в этом блоке должны быть видны (не включайте галочку «Спрятать список разделов каталога»).

Смотрите, как быстро установить модификацию

Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Копируем ID товара
Вставляем ID товара в блок ST200 на странице.
+ нажимаем "Заполнить поля данными товара из каталога и сохранить."