Как исправить табы в карточке товара на Tilda

Владельцы интернет-магазинов на Tilda часто сталкиваются с проблемой: в стандартном блоке «Магазин» вкладки (табы) с описанием, характеристиками и отзывами «улетают» в самый низ карточки товара - под галерею и основное описание. Это нарушает логику интерфейса и ухудшает пользовательский опыт. В статье разберём причины, как реализовать правильное расположение табов с помощью кастомного кода и какие есть альтернативы.

Почему табы смещаются вниз?

Стандартный блок Tilda «Магазин» имеет жёсткую сетку: галерея изображений, затем текстовое описание, а после - блок с табами. При большом объёме текста или изображений табы автоматически оказываются внизу страницы. Попытки исправить это CSS-отступами или позиционированием неэффективны: при изменении контента вёрстка «ломается».

Решение: кастомный аккордеон внутри карточки

Один из рабочих вариантов - разместить внутри карточки товара блок с аккордеоном (раскрывающимися вкладками), который не зависит от стандартного блока табов Tilda. Для этого нужно:

• Создать в Tilda пустой блок (например, «Код» или «HTML-контейнер»).
• Поместить его в нужное место карточки товара (после галереи или описания) с помощью drag-and-drop.
• Вставить HTML-код аккордеона с уникальными ID для каждой вкладки.
• Добавить CSS-стили для оформления и JavaScript для переключения вкладок.

Пример простого аккордеона:

<div class="accordion">
  <button class="accordion-btn">Описание</button>
  <div class="accordion-content">Текст описания...</div>
  <button class="accordion-btn">Характеристики</button>
  <div class="accordion-content">Характеристики...</div>
</div>
<script>
  // код для переключения
</script>

Такой подход даёт полный контроль над расположением и стилизацией, не затрагивая стандартные блоки Tilda.

Альтернативные методы

Если аккордеон не подходит, можно использовать:

• Кастомные вкладки (табы) - аналогично аккордеону, но с отображением содержимого рядом, а не под заголовком.
• Модальные окна - для каждого раздела (описание, отзывы) открывается всплывающее окно.
• Горизонтальные табы - размещение вкладок слева/справа от контента (требует более сложной вёрстки).

Как добавить код на Tilda?

Для вставки кастомного кода:

1. Перейдите в редактор Tilda.
2. Добавьте блок «Код» (HTML, CSS, JavaScript) в нужное место.
3. Вставьте разметку и стили.
4. Убедитесь, что классы и ID не конфликтуют с другими элементами.
5. Опубликуйте страницу и проверьте работу на мобильных устройствах.

Рекомендации по SEO и UX

Правильное расположение табов улучшает поведенческие факторы: пользователи быстрее находят нужную информацию, увеличивается время на сайте и глубина просмотра. Для SEO важно, чтобы текстовый контент вкладок был доступен для индексации - не скрывайте его через display:none, используйте visibility или высоту.

Используя описанные методы, вы сможете гибко настроить карточку товара на Tilda под свои задачи, не прибегая к сложным доработкам.