Выгода в рублях в Tilda: как показать сумму экономии у товара

Цена изменилась с 5 000 до 4 200 рублей. Процент скидки можно посчитать, но посетителю иногда проще увидеть конкретную разницу: «Выгода 800 ₽». Такая плашка дополняет цену и помогает сравнить предложение.

Мод берёт старую и текущую цену из Tilda и показывает их разницу. Саму скидку он не назначает и сумму заказа не меняет. Разберём настройку и случаи, когда плашка не должна появляться.

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

Например, при старой цене 5 000 и новой 4 200 разница составляет 800. Если цены равны или новая выше старой, положительной выгоды нет и плашка не показывается. Не пытайтесь исправить это цветом или подписью конструктора: сначала нужно проверить исходные значения товара. Плашка лишь объясняет уже настроенное предложение.

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

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

Вставьте {amount} в текст плашки, например «Выгода: {amount} ₽». Вместо этой записи подставляется сумма разницы. Обозначение валюты и пояснение вы задаёте сами, поэтому проверьте, что они соответствуют ценам магазина.

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

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

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

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

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

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

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

Если всё совпадает, можно использовать ту же настройку для остальных подходящих товаров.

Читайте также: Процент скидки в Tilda: плашка рядом с ценой товара · Сравнение товаров в Tilda: как сделать удобную таблицу.