---
title: "Показать зачёркнутую цену со значком скидки"
description: "Зачеркните цену месячного плана рядом с эффективной месячной ценой годового плана, чтобы скидка была видна с первого взгляда."
---

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

## Перед началом работы \{#before-you-start\}

- Создайте экран пейвола с продуктами — например, следуя гайду [Создание базового экрана пейвола](basic-paywall-screen). В этом рецепте предполагается, что пейвол предлагает годовой и месячный продукт.
## 1. Добавьте строки с ценами \{#1-stack-the-price-rows\}

Карточка годовой подписки начинается с одной строки цены — переменная `prod_price` продукта, за которой следует `/year`, что отображается, например, как `$29.99/year`. Добавьте вторую строку выше — с ценой за месяц.
1. На панели **Layers** выберите текст с ценой внутри карточки годового продукта. Он уже находится в вертикальном контейнере карточки, поэтому копия разместится под ним.
2. Нажмите меню с тремя точками Context menu на слое и выберите **Duplicate**. Копия появится под оригиналом. На следующем шаге верхний текст станет строкой с месячной ценой, нижний — оставит годовую.

## 2. Разделите строку с ценой за месяц на два элемента \{#2-split-the-monthly-row-into-two-prices\}

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

:::important
В выборщике переменных отображаются только цены продуктов, присутствующих на экране флоу. Чтобы использовать продукт, которого нет во флоу, создайте пустой экран, добавьте на него элемент **Products** и назначьте нужный продукт. Убедитесь, что ни одно навигационное действие не ведёт на этот экран.
:::
1. Выберите верхний текстовый элемент, нажмите на его меню с тремя точками и выберите **Wrap** > **Wrap in Horizontal Container**.
2. Нажмите на меню с тремя точками на текстовом слое внутри нового контейнера и выберите **Duplicate**.

   
3. Выберите первый текстовый элемент и очистите его поле **Content**. Нажмите на иконку переменной Variable icon, выберите ежемесячный продукт, затем его атрибут `prod_price_per_month`. Введите `/month` после переменной.
4. На вкладке **Design** в разделе **Typography** установите **Decoration** в значение **Strikethrough** Strikethrough (см. [Стилизация элементов — Decoration](builder-styling#decoration)).
5. Выберите второй текстовый элемент и замените его содержимое аналогичным образом, но выберите атрибут `prod_price_per_month` годового продукта. Введите `/month` после переменной.

## 3. Приглушите цену годовой подписки \{#tone-down-the-yearly-price\}

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

1. На канвасе выберите нижний текстовый элемент — цену годовой подписки.
2. В панели инструментов над элементом откройте выпадающий список стилей текста и выберите более скромный стиль — например, **Caption**. Или выберите другой стиль в разделе **Typography** на вкладке **Design**.

## 4. Добавьте значок скидки \{#add-the-discount-badge\}

Значок выделяет размер экономии рядом с ценами.

1. Нажмите **+** > **Badge**.
2. На панели **Layers** перетащите значок внутрь годового продукта — между вертикальным контейнером с ценами и радиокнопкой.
3. Выберите текстовый слой значка и отредактируйте поле **Content** — например, `Save 75%`.

Переменной для процента скидки нет — рассчитайте её из своих цен и введите как статичный текст.

Теперь карточка годового плана сравнивает цену с месячным: зачёркнутая цена месячного плана, эффективная ежемесячная цена годового плана и значок скидки — всё в одной строке, а полная годовая цена — ниже.

## Следующие шаги \{#next-steps\}

- [Сохраните и опубликуйте флоу](builder-save-publish).
- [Добавьте флоу в плейсмент](create-placement), чтобы начать показывать его пользователям.