Кнопка «Купить» при прокрутке в Tilda: как закрепить плашку

Покупатель прочитал описание, посмотрел материалы и дошёл до отзывов. Товар ему подходит, но кнопка покупки осталась далеко наверху. Приходится возвращаться и искать её ещё раз.

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

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

На короткой карточке эффект может быть незаметен: основная кнопка и так рядом. Сначала пройдите путь покупателя и посмотрите, в каком месте ему действительно приходится искать покупку.

Проверьте исходную кнопку покупки и корзину Tilda. Выберите нужный вариант, измените количество и добавьте товар обычным способом. Мод использует существующую покупку, поэтому начинать с неработающей карточки не стоит.

Если нужен счётчик количества в плашке, у товара должно быть штатное поле количества. Для дополнительной покупки в один клик понадобится уже существующая кнопка или ссылка: в конструкторе указывается её селектор. Сама плашка не создаёт отдельный способ оформления с нуля.

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

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

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

Сравните плашку с закреплённым меню, уведомлением о cookies и другими плавающими элементами. Они не должны занимать одно и то же место. Проверьте нижнюю часть телефона: кнопка покупки должна оставлять достаточно пространства для чтения и обычных действий.

1. Откройте конструктор липкой плашки и настройте содержимое, положение и адаптивы.
2. Укажите существующее действие для покупки в один клик, если оно нужно.
3. Скопируйте код в T123 после блока товара и опубликуйте страницу.
4. Прокрутите вниз и вернитесь наверх. Сравните появление плашки с положением основной кнопки.
5. Поменяйте вариант и количество, затем добавьте товар через плашку и проверьте корзину.

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

Если плашка не показывает быстрый заказ, проверьте, найден ли элемент по указанному селектору. Если цена не соответствует ожиданию, сначала сравните её с обычной карточкой после смены варианта. Отдельно проверьте товар со скидкой и товар без неё.

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

Читайте также: Иконка корзины в Zero Block: счётчик и сумма заказа · Как поделиться корзиной в Tilda: товары одной ссылкой.