---
title: "Hiển thị giá bị gạch ngang kèm huy hiệu giảm giá"
description: "Gạch ngang giá của gói tháng bên cạnh giá hiệu quả hàng tháng của gói năm để người dùng nhìn thấy mức giảm giá ngay lập tức."
---

Một mức giá bị gạch ngang đặt cạnh giá thực sẽ giúp người dùng nhận ra ngay mức chiết khấu. Recipe này chỉnh sửa thẻ sản phẩm theo năm để hiển thị giá gói tháng — được gạch ngang — bên cạnh giá hiệu quả hàng tháng của gói năm, phía trên có thêm huy hiệu giảm giá.
Định dạng gạch ngang áp dụng cho toàn bộ một phần tử văn bản — bạn không thể gạch ngang một biến số bên trong một đoạn văn bản lớn hơn. Đó là lý do giá bị gạch ngang nằm trong phần tử văn bản riêng của nó, đặt cạnh giá đã giảm trong một container nằm ngang.

## Trước khi bắt đầu \{#before-you-start\}

- Xây dựng màn hình paywall với các sản phẩm — ví dụ, hãy làm theo [Tạo màn hình paywall cơ bản](basic-paywall-screen). Hướng dẫn này giả định paywall có cung cấp gói đăng ký hàng năm và hàng tháng.
## 1. Xếp chồng các dòng giá \{#1-stack-the-price-rows\}

Thẻ hàng năm bắt đầu với một dòng giá duy nhất — biến `prod_price` của sản phẩm hàng năm theo sau là `/year`, hiển thị như `$29.99/year`. Thêm một dòng thứ hai phía trên để hiển thị giá hàng tháng.
1. Trong bảng **Layers**, chọn text giá bên trong thẻ sản phẩm hàng năm. Text này đã nằm trong container dọc của thẻ, vì vậy bản sao sẽ xếp bên dưới nó.
2. Nhấn vào menu ba chấm Context menu trên layer và chọn **Duplicate**. Bản sao xuất hiện bên dưới bản gốc. Ở bước tiếp theo, text phía trên sẽ là dòng giá hàng tháng; text phía dưới giữ nguyên giá hàng năm.

## 2. Tách hàng tháng thành hai mức giá \{#2-split-the-monthly-row-into-two-prices\}

Hàng tháng chứa hai phần tử văn bản: giá gói tháng bị gạch ngang và giá mỗi tháng của gói năm.

:::important
Bộ chọn biến chỉ hiển thị giá của các sản phẩm có mặt trên một màn hình flow. Để tham chiếu đến một sản phẩm không có trong flow, hãy tạo một màn hình trống, thêm phần tử **Products** vào đó và gán sản phẩm cho nó. Đảm bảo không có hành động điều hướng nào dẫn đến màn hình đó.
:::
1. Chọn phần tử văn bản ở trên cùng, nhấp vào menu ba chấm và chọn **Wrap** > **Wrap in Horizontal Container**.
2. Nhấp vào menu ba chấm trên layer văn bản bên trong container mới và chọn **Duplicate**.

   
3. Chọn phần tử văn bản đầu tiên và xóa trường **Content**. Nhấp vào biểu tượng biến Variable icon, chọn sản phẩm theo tháng, rồi chọn thuộc tính `prod_price_per_month` của nó. Gõ `/month` sau biến.
4. Trong tab **Design**, mục **Typography**, đặt **Decoration** thành **Strikethrough** Strikethrough (xem [Định dạng phần tử — Decoration](builder-styling#decoration)).
5. Chọn phần tử văn bản thứ hai và thay thế nội dung theo cách tương tự, nhưng chọn thuộc tính `prod_price_per_month` của sản phẩm theo năm. Gõ `/month` sau biến.

## 3. Làm nhạt giá theo năm \{#tone-down-the-yearly-price\}

Các mức giá theo tháng được nhân đôi đã kế thừa kiểu định dạng giá gốc, nên cả ba mức giá hiện đang có cùng kích thước và độ đậm. Hãy làm cho giá theo năm trông nhẹ hơn để hàng theo tháng nổi bật hơn.

1. Trên canvas, chọn phần tử văn bản ở dưới cùng — giá theo năm.
2. Trong thanh công cụ phía trên phần tử, mở dropdown kiểu chữ và chọn một kiểu nhẹ hơn — ví dụ, **Caption**. Hoặc chọn kiểu khác trong phần **Typography** trên tab **Design**.

## 4. Thêm huy hiệu giảm giá \{#add-the-discount-badge\}

Huy hiệu này làm nổi bật mức tiết kiệm bên cạnh giá.

1. Nhấn **+** > **Badge**.
2. Trong bảng **Layers**, kéo huy hiệu vào bên trong sản phẩm theo năm, giữa container dọc chứa các mức giá và nút radio.
3. Chọn layer văn bản của huy hiệu và chỉnh trường **Content** — ví dụ: `Save 75%`.

Không có biến nào cho phần trăm giảm giá — bạn cần tự tính từ giá của mình và nhập dưới dạng văn bản tĩnh.

Giờ đây thẻ yearly neo giá của mình theo gói monthly: giá monthly bị gạch ngang, giá monthly hiệu quả của gói yearly, và badge giảm giá nằm trên một dòng, với giá yearly đầy đủ bên dưới.

## Các bước tiếp theo \{#next-steps\}

- [Lưu và xuất bản flow của bạn](builder-save-publish).
- [Thêm flow vào một placement](create-placement) để bắt đầu hiển thị cho người dùng.