---
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
变量选择器仅显示当前流程屏幕中已有产品的价格。如需引用不在流程中的产品，请创建一个空白屏幕，在其中添加**产品**元素并将该产品分配给它，同时确保没有任何导航操作会跳转到该屏幕。
:::
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**。或者，在 **Design** 标签页的 **Typography** 下选择其他样式。

## 4. 添加折扣徽章 \{#add-the-discount-badge\}

徽章用于在价格旁边突出显示节省金额。

1. 点击 **+** > **Badge**。
2. 在 **Layers** 面板中，将徽章拖入年度产品内部，放在包含价格的垂直容器与单选按钮之间。
3. 选中徽章的文本图层，编辑 **Content** 字段——例如填入 `Save 75%`。

折扣百分比没有对应的变量——请根据你的实际价格计算后，以静态文本方式输入。

现在，年度卡片以月度套餐为参照价格：划线的月价、年度套餐折算的月均价，以及折扣徽章并排显示在同一行，完整年价显示在下方。

## 后续步骤 \{#next-steps\}

- [保存并发布您的流程](builder-save-publish)。
- [将流程添加到版位](create-placement)，开始向用户展示。