NLM217 • Время настройки: 2 минуты
Разделы каталога товаров в Zero Block на Тильде
Модификация позволяет настраивать разделы каталога товаров с индивидуальным дизайном и выводить из Зеро блока в 4 вариантах: из текста, кнопки, шейпа и картинки. Это решение идеально подходит для интернет-магазинов с большим ассортиментом и разными категориями товаров, обеспечивая удобную настройку и привлекательный внешний вид каталога.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Инструкция
Шаг 1:
Подготовка стандартного каталога и Зеро блока
Откройте генератор кода для модификации.
• «Непрозрачность неактивных кнопок»: выберите уровень прозрачности для неактивных кнопок (например, 50%).
• «Непрозрачность активного пункта»: выберите уровень прозрачности для активной кнопки (например, 100%).
• «Тип элемента»: выберите тип оформления кнопки.
• «Цвет текста активного пункта»: задайте цвет текста для активной кнопки (например, #0058ff) — доступны при выборе типа «кнопка».
• «Фон активного пункта»: задайте цвет фона для активной кнопки (например, #ffffff) — доступны при выборе типа «кнопка».
• «Регулировка позиции иконки по высоте (px)»: укажите смещение иконки по вертикали, если используете иконки (доступны при выборе типа «кнопка»).
Добавьте кнопки для разделов каталога
• Нажмите «+ Добавить кнопку», чтобы создать новую кнопку для раздела.
• В поле «Класс кнопки» укажите уникальный CSS-класс для каждой кнопки (например, button1, button2). Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс, что и в генераторе.
• В поле «Название раздела» впишите название соответствующего раздела каталога (важно указать название раздела так, как он прописан в разделах сайта).
• Добавьте столько кнопок, сколько у вас разделов в каталоге.
Скопируйте сгенерированный HTML-код.
Шаг 3:
На страницу Tilda добавьте блок T123 («Другое» → «HTML-код»).
Вставьте скопированный код в «Контент» этого блока.
Шаг 4:
Сохраните и опубликуйте страницу.
Проверьте работу поиска на опубликованном сайте.
Имейте ввиду:
Подготовка стандартного каталога и Зеро блока
- Добавьте стандартный блок каталога товаров (например, ST305N).
- Подготовьте Зеро блок с будущими кликабельными разделами (в генераторе кода нужно будет верно выбрать тип элемента: кнопка, текст, шейп или картинка).
Откройте генератор кода для модификации.
- Укажите ID блока каталога
- В поле «Активный раздел по умолчанию» впишите название раздела, который будет отображаться первым при загрузке страницы
• «Непрозрачность неактивных кнопок»: выберите уровень прозрачности для неактивных кнопок (например, 50%).
• «Непрозрачность активного пункта»: выберите уровень прозрачности для активной кнопки (например, 100%).
• «Тип элемента»: выберите тип оформления кнопки.
• «Цвет текста активного пункта»: задайте цвет текста для активной кнопки (например, #0058ff) — доступны при выборе типа «кнопка».
• «Фон активного пункта»: задайте цвет фона для активной кнопки (например, #ffffff) — доступны при выборе типа «кнопка».
• «Регулировка позиции иконки по высоте (px)»: укажите смещение иконки по вертикали, если используете иконки (доступны при выборе типа «кнопка»).
Добавьте кнопки для разделов каталога
• Нажмите «+ Добавить кнопку», чтобы создать новую кнопку для раздела.
• В поле «Класс кнопки» укажите уникальный CSS-класс для каждой кнопки (например, button1, button2). Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс, что и в генераторе.
• В поле «Название раздела» впишите название соответствующего раздела каталога (важно указать название раздела так, как он прописан в разделах сайта).
• Добавьте столько кнопок, сколько у вас разделов в каталоге.
Скопируйте сгенерированный HTML-код.
Шаг 3:
На страницу Tilda добавьте блок T123 («Другое» → «HTML-код»).
Вставьте скопированный код в «Контент» этого блока.
Шаг 4:
Сохраните и опубликуйте страницу.
Проверьте работу поиска на опубликованном сайте.
Имейте ввиду:
- В блоке каталога товаров должны быть выведены все товары из каталога. Разделы каталога в этом блоке должны быть видны (не включайте галочку «Спрятать список разделов каталога»).
Смотрите, как быстро установить модификацию
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Заявка на следующий поток
P.S. Внимание, это фейковая кнопка, мы не принимаем заявки на следующий поток
Копируем ID товара
Вставляем ID товара в блок ST200 на странице.
+ нажимаем "Заполнить поля данными товара из каталога и сохранить."
Разделы каталога в Zero Block Тильда — 4 варианта вывода
Стандартные разделы каталога Tilda работают, но выглядят ограниченно: чаще всего это обычные текстовые кнопки над товарами. Для простого магазина этого достаточно. Но если каталог — важная часть дизайна, разделы тоже должны выглядеть как часть интерфейса, а не как системный элемент.
Модификация NLM217 от Nolim позволяет вывести разделы каталога товаров в Zero Block четырьмя способами: через текст, кнопку, шейп или картинку. Логика остаётся стандартной: пользователь нажимает на раздел, а каталог показывает товары из нужной категории.
Модификация NLM217 от Nolim позволяет вывести разделы каталога товаров в Zero Block четырьмя способами: через текст, кнопку, шейп или картинку. Логика остаётся стандартной: пользователь нажимает на раздел, а каталог показывает товары из нужной категории.
Где использовать разделы каталога в Zero Block
Такая настройка полезна для интернет-магазинов, где категории должны быть заметной частью дизайна. Например, в магазинах косметики, одежды, мебели, декора, детских товаров, курсов, цифровых продуктов или подарочных наборов.
Вместо обычного списка разделов можно сделать визуальную навигацию: карточки с фотографиями категорий, крупные кнопки, иконки, плашки с акцентным фоном или минималистичные текстовые табы. Пользователь быстрее понимает структуру каталога и сразу переходит к нужной группе товаров.
Вместо обычного списка разделов можно сделать визуальную навигацию: карточки с фотографиями категорий, крупные кнопки, иконки, плашки с акцентным фоном или минималистичные текстовые табы. Пользователь быстрее понимает структуру каталога и сразу переходит к нужной группе товаров.
Что даёт выбор из четырёх вариантов
Текст подходит для минималистичных каталогов, где важна лёгкость и чистая навигация. Кнопки удобны для промо-страниц и магазинов с небольшим количеством категорий. Шейпы помогают собрать нестандартные плашки и визуальные переключатели. Картинки лучше работают там, где категорию проще показать, чем объяснить словами.
Например, разделы «Лицо», «Тело», «Волосы» в магазине косметики можно сделать карточками с изображениями. А для каталога курсов удобнее использовать кнопки или текстовые вкладки: «Для новичков», «Для дизайнеров», «Для бизнеса».
Например, разделы «Лицо», «Тело», «Волосы» в магазине косметики можно сделать карточками с изображениями. А для каталога курсов удобнее использовать кнопки или текстовые вкладки: «Для новичков», «Для дизайнеров», «Для бизнеса».
Чем это отличается от стандартных разделов Tilda
Стандартные разделы управляют фильтрацией товаров, но почти не дают свободы в дизайне. NLM217 не ломает эту логику, а переносит управление разделами в Zero Block. Фильтрация остаётся нативной: товары переключаются по категориям так же, как в стандартном каталоге.
Разница в том, что внешний вид разделов ты собираешь сам. Можно настроить прозрачность неактивных пунктов, выделение активного раздела, цвет текста, фон активной кнопки, иконки и отступы. В итоге разделы выглядят не как технический список, а как полноценная часть дизайна магазина.
Разница в том, что внешний вид разделов ты собираешь сам. Можно настроить прозрачность неактивных пунктов, выделение активного раздела, цвет текста, фон активной кнопки, иконки и отступы. В итоге разделы выглядят не как технический список, а как полноценная часть дизайна магазина.
Что проверить после публикации
После установки проверь, что названия разделов в генераторе полностью совпадают с названиями в каталоге Tilda. Даже лишний пробел или другое написание может привести к тому, что раздел не будет переключать товары.
Отдельно проверь активный раздел по умолчанию, мобильную версию и все варианты клика: по тексту, кнопке, шейпу или картинке. Если разделов много, лучше не перегружать первый экран — оставь понятную навигацию, а не набор мелких элементов, в которые сложно попасть с телефона.
Отдельно проверь активный раздел по умолчанию, мобильную версию и все варианты клика: по тексту, кнопке, шейпу или картинке. Если разделов много, лучше не перегружать первый экран — оставь понятную навигацию, а не набор мелких элементов, в которые сложно попасть с телефона.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Используй модификацию NLM217 от Nolim. В генераторе укажи ID каталога Tilda, выбери тип вывода раздела (текст, кнопка, шейп или картинка) и цветовые параметры. Скопируй код и вставь в блок «HTML-код». Разделы каталога появятся с кастомным дизайном прямо в твоём Zero Block.
Стандартные разделы каталога Tilda имеют ограниченный дизайн — простые текстовые кнопки. Zero Block даёт полную свободу: разделы могут быть картинками с наведением, кастомными кнопками с анимацией, шейпами с текстом. Это позволяет создать уникальный дизайн каталога.
Да. Модификация NLM217 работает с нативной системой разделов каталога Tilda — при нажатии на кастомный раздел каталог фильтрует товары точно так же, как стандартные разделы. Дизайн кастомный, логика — стандартная Tilda.
Было: магазин косметики использовал стандартные текстовые разделы — пользователи не сразу понимали структуру.
Стало: после установки NLM217 разделы стали карточками-картинками (лицо, тело, волосы) с фото. Кликабельность по разделам выросла на 55%, глубина просмотра каталога — на 2 страницы в среднем.
Стало: после установки NLM217 разделы стали карточками-картинками (лицо, тело, волосы) с фото. Кликабельность по разделам выросла на 55%, глубина просмотра каталога — на 2 страницы в среднем.