Как редактировать блок st300 tilda
В библиотеке Тильды появился новый блок в категории «Магазин» — ST320N «Карточки продуктов с кнопками и фильтрами слева и поп-ап с подробной информацией».
Особенность нового блока — расположение фильтров слева от карточек. Такой вариант дизайна может быть привычнее или удобнее для пользователей интернет-магазина.
Смотреть, как работает блок на демостранице
В блоке ST320N вы можете настраивать все элементы под себя, как и в других блоках на платформе. Например, для фильтров можно изменить фон боковой панели, шрифт, насыщенность и межбуквенное расстояние, а также цвет заголовков и названий на панели.
Помимо фильтров можно настроить вид и количество карточек в ряд, размер, цвет и количество кнопок. Расположите элементы поп-апа по вертикали или по горизонтали в два клика, измените цвет фона или кнопки закрытия, поработайте с типографикой, если это необходимо.
Настраивайте элементы блока, как вам нравится
Добавьте секцию «Смотрите также», чтобы рекомендовать похожие товары или сопутствующие из других категорий. Это позволит увеличить средний чек онлайн-магазина.
Секция «Смотрите также»
Если вы используете каталог, добавьте новый блок на сайт и во вкладке «Контент» выберете раздел, из которого необходимо показать товары. Они моментально отобразятся в редакторе. Опубликуйте страницу, чтобы изменения увидели посетители сайта.
В Тильде есть несколько блоков, где фильтры расположены сверху: ST300, ST305N, ST310N, ST315N. Их легко найти через поиск в библиотеке блоков.
Как добавить таблицу, лэйбл, вторую кнопку и блок последовательность покупки блок ST300 в Tilda
Основа примера это блок магазина ST300
Этапы покупки сделали через блок Этапы►HW302
Остальное добавили через код
Пример не работает с каталогом
1. Создали блок ST300 и наполнили его контентом
2. Создали блок HW302 и наполнили его контентом
Добавили код 1 — Этапы на страницу в блок Другое►Т123
#rec68205726 — заменили на свой ID блока с этапами HW302
3. Добавили вторую кнопку в карточку , вставив код 2 — Вторая кнопка
В коде изменили стили на нужные нам и прописали свою ссылку и надпись:
href=»#»
Control Price — ссылка
4. Добавили метку HIT и ярлычок на фото товара. вставив код 3 — Label
Изменили надпись метки на HIT
5. Добавили таблицу в описание товара , вставив код 4 — Таблица
6. Добавили фото платёжных систем в карточку товара, вставив код 5 — Pay
Прописали путь до своей картинки https://clck.ru/ESZgz
Все коды были вставлены в блок Другое►Т123