Процент скидки в Tilda: плашка рядом с ценой товара

Зачёркнутая старая цена показывает, что товар стал дешевле. Но посетителю ещё приходится считать, насколько. Небольшая плашка «−25%» делает разницу заметнее и понятнее.

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

В товаре должны быть старая и текущая цена. Старая цена должна быть больше новой. Например, было 4 000 ₽, стало 3 000 ₽: разница составляет 1 000 ₽, или четверть старой цены.

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

Расчёт простой: из старой цены вычитается новая, разница делится на старую цену и умножается на 100. Для 4 000 и 3 000 получится 25%. Мод округляет результат до целого процента.

Поэтому у некоторых цен вы увидите округлённое значение. Это подсказка о размере скидки. Стоимость покупки определяется ценой товара в Tilda. У позиции без подходящей старой цены плашка не выводится.

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

В конструкторе настройте шрифт, размер, скругление, внутренние отступы и расстояние до цены. Стрелку можно отключить. На одной странице проверьте короткое «−5%» и более широкое значение: плашка должна выглядеть аккуратно в обоих случаях.

1. Заполните старую и новую цену в Tilda.
2. Откройте конструктор скидки и подберите оформление.
3. Введите пример своих цен в превью, чтобы увидеть расчёт.
4. Скопируйте код в T123 после блока магазина.
5. Опубликуйте страницу и проверьте настоящие карточки.

Если на сайте уже есть другой скрипт с таким же ярлыком, оставьте один вариант. Две плашки рядом не делают предложение понятнее.

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

• Старая цена больше текущей — процент отображается.
• Старой цены нет — лишней плашки нет.
• Цены одинаковые — скидка не обещается.
• После выбора другого варианта цена и плашка не расходятся.

Для дорогих товаров покупателю иногда понятнее сумма экономии: «На 5 000 ₽ дешевле». Для этой задачи существует отдельный мод с лейблом выгоды. Процент и сумма отвечают на похожий вопрос, но занимают разное место в карточке.

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

Читайте также: Сравнение товаров в Tilda: как сделать удобную таблицу · Табы и таблица характеристик товара.