Модификации

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

2026-08-11 14:10 Каталог

Инструкция

По умолчанию товары в блоке ST305N располагаются в несколько рядов. Эта модификация выводит реальные товары из каталога Tilda в одну горизонтальную ленту с прокруткой.
  1. Добавьте на страницу блок ST305N из категории «Магазин».
  2. В настройках блока подключите нужные товары или раздел каталога. Используйте именно товары из каталога — не изображения-примеры и не карточки, добавленные вручную.
  3. Откройте «Настройки» блока и укажите в поле «CSS-класс блока»: onerowproducts
  4. Добавьте на страницу HTML-блок T123 и вставьте в него код модификации.
  5. Опубликуйте страницу и проверьте результат на опубликованном сайте.
Дополнительно:
Ширина каждой карточки задаётся в коде значением 200px, а расстояние между карточками — значением 20px. При необходимости эти значения можно изменить.

На мобильных устройствах товары прокручиваются горизонтально пальцем. Названия, цены, изображения и другие данные загружаются из каталога и обновляются вместе с ним.

Если модификация не работает, проверьте, что класс onerowproducts указан именно у блока ST305N, а после внесения изменений страница была опубликована.
<!-- Скрипт, который делает кликабельными пункты меню первого и второго уровня с выпадающими подпунктами на Tilda. Источник: bulgkate.ru -->
<style>

.uc-onerowproducts .js-store-grid-cont {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}


.uc-onerowproducts .js-store-grid-cont > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px;
}

.uc-onerowproducts .js-store-grid-cont .t-col, .uc-onerowproducts .js-store-grid-cont .t-store__card { 
    flex: 0 0 auto !important; 
    width: auto !important; 
    max-width: 200px; /* Или другой размер */ }


.uc-onerowproducts .js-store-grid-cont > div > .t-col,
.uc-onerowproducts .js-store-grid-cont > div > .t-store__grid-cont__col {
    flex: 0 0 auto !important;
}


.uc-onerowproducts .t-store__grid-separator { display: none !important; }
.uc-onerowproducts .t-store__card__textwrapper { height: auto !important; }
.uc-onerowproducts .js-store-prod-sold-out { display: none !important; }

.uc-onerowproducts .t-form__errorbox-wrapper { background-color: #ff37a7 !important; }
.uc-onerowproducts .t-form__errorbox-wrapper .t-text_md { font-size: 16px !important; }
</style>