---
title: "Tạo màn hình paywall cơ bản"
description: "Hướng dẫn từng bước để xây dựng màn hình paywall tiêu chuẩn trong Flow Builder."
---

Đây là mẫu paywall phổ biến nhất. Bạn có thể dùng nó như một màn hình độc lập, hoặc đặt ở cuối một [flow](adapty-flow-builder) nhiều màn hình.
Một màn hình paywall tiêu chuẩn bao gồm tiêu đề, mô tả giá trị, danh sách tính năng, danh sách sản phẩm, nút mua hàng và các liên kết ở phần cuối để khôi phục giao dịch, điều khoản sử dụng và chính sách bảo mật.
## Trước khi bắt đầu \{#before-you-start\}

- [Tạo sản phẩm](create-product) trong Adapty Dashboard.
- [Kết nối Adapty với App Store và Google Play](integrate-payments).

## 1. Thiết lập styles có thể tái sử dụng \{#set-up-reusable-styles\}

Styles có thể tái sử dụng cho phép bạn áp dụng cùng một kiểu chữ và màu sắc trên mọi màn hình chỉ với một cú nhấp. Mỗi flow mới đều có sẵn một bộ text styles mặc định (H1, Body, Button Label, v.v.) — hãy điều chỉnh chúng cho phù hợp với thiết kế của bạn trước khi bắt đầu thêm các phần tử. Thêm color styles cho các màu thương hiệu mà bạn sẽ dùng xuyên suốt màn hình.

Để xem hướng dẫn đầy đủ, tham khảo [Styles và giao diện — Styles có thể tái sử dụng](builder-styling#reusable-styles).

Để thiết lập styles:
1. Trong bảng bên trái, mở bảng **Styles** Styles.
2. Trong tab **Text**, nhấp vào một style hiện có để chỉnh sửa font, độ đậm, kích thước và màu sắc. Chỉ thêm style mới nếu các style mặc định không đáp ứng được nhu cầu của bạn.

3. Trong tab **Colors**, nhấp vào **Plus Create style** và thêm các màu bạn định tái sử dụng trên màn hình.

## 2. Thiết lập bố cục màn hình \{#2-set-up-the-screen-layout\}

Bản thân màn hình đóng vai trò như một container chứa mọi thứ bạn thêm vào. Hãy cấu hình bố cục, nền và padding trước để các phần tử bạn thêm vào sau này được phân bổ đúng cách.

Để xem danh sách đầy đủ các thuộc tính màn hình, xem [Screens and layers — Screen settings](paywall-layout-and-products#screen-settings).

Để cấu hình màn hình:
1. Nhấp vào vùng trống trên canvas để chọn màn hình. Bảng bên phải sẽ chuyển sang cài đặt màn hình.
2. Trong **System UI**, tắt **Safe area** để nội dung kéo dài đến mép màn hình.
3. Trong **Layout**, đặt hướng thành **Vertical** Vertical và phân phối thành **Space evenly**.

4. Trong mục **Fill**, chọn loại nền — màu đơn, gradient, hoặc hình ảnh. Ví dụ này dùng **Gradient** Gradient với hai điểm màu.

## 3. Thêm nút đóng \{#3-add-the-close-button\}

Nút đóng giúp người dùng thoát khỏi paywall. Preset **Close** đã được cấu hình sẵn — không cần thiết lập thêm hành động.

1. Trên canvas, nhấp **+**.
2. Chọn **Buttons** > **Close**.

## 4. Thêm tiêu đề và ghép với nút đóng \{#add-the-title-and-pair-it-with-the-close-button\}

H1 nằm cạnh nút đóng ở phía trên màn hình. Để căn chúng theo chiều ngang, hãy bọc cả hai vào một container ngang.

Để thêm tiêu đề:

1. Nhấn **+** > **Text** > **H1**.
2. Chọn H1, mở tab **Design** ở bảng bên phải và chỉnh nội dung trong trường **Content**.

Để nhóm tiêu đề với nút đóng:
1. Trong bảng **Layers**, nhấp vào menu ba chấm Context menu trên layer nút đóng và chọn **Wrap** > **Wrap in Horizontal Container**.

2. Kéo layer H1 vào container nằm ngang vừa tạo.

Để căn chỉnh hai phần tử:
1. Điều chỉnh kích thước nút đóng và cỡ chữ H1 sao cho chúng hiển thị thoải mái trên cùng một dòng.
2. Khi container ngang được chọn, thiết lập căn chỉnh và phân phối trong bảng bên phải để các phần tử hiển thị đúng vị trí.

## 5. Thêm mô tả giá trị \{#5-add-the-value-description\}

Một dòng body ngắn bên dưới tiêu đề giải thích những gì người dùng nhận được từ gói đăng ký.

1. Nhấp **+** > **Text** > **Body**.
2. Khi phần tử body được chọn, chỉnh sửa văn bản trong trường **Content** trên tab **Design**.

## 6. Thêm danh sách tính năng \{#add-the-feature-list\}

Danh sách tính năng làm nổi bật những gì người dùng nhận được khi mở khóa gói đăng ký. Mỗi hàng gồm một biểu tượng, tiêu đề tính năng và mô tả ngắn.

Xem toàn bộ các preset danh sách tại [Elements — List](builder-elements#list).

Để thêm danh sách tính năng:

1. Nhấn **+** > **List** và chọn một preset danh sách. Icon List là lựa chọn phổ biến nhất cho paywall.
2. Chọn từng hàng, sau đó chỉnh tiêu đề và mô tả trong trường **Content**.
3. Để thêm hoặc xóa hàng, chọn danh sách và dùng các điều khiển hàng trong bảng **Layers**.

## 7. Thêm danh sách sản phẩm \{#add-the-product-list\}

Danh sách sản phẩm hiển thị các tùy chọn gói đăng ký mà người dùng có thể lựa chọn. Phần tử Products hiển thị một thẻ cho mỗi sản phẩm được gán cho màn hình, và một thẻ sẽ tự động được đánh dấu là mặc định.

Để biết thêm về cách quản lý sản phẩm, xem [Thiết lập mua hàng](paywall-product-block).

Để thêm và cấu hình sản phẩm:
1. Nhấp vào **+** > **Products** và chọn một bố cục preset. Vertical List là phổ biến nhất.
2. Chọn từng thẻ sản phẩm trên canvas và chọn một sản phẩm từ dropdown trong tab **Design**. Dropdown hiển thị mọi sản phẩm đã được cấu hình trong Adapty Dashboard.
3. Để thay đổi lựa chọn mặc định, chọn thẻ bạn muốn và bật **Set as default product** trong tab **Design**.
4. Để tùy chỉnh badge giảm giá, mở rộng thẻ sản phẩm trong bảng **Layers**, chọn layer badge và chỉnh sửa văn bản của nó trong trường **Content**. Ẩn badge trên các thẻ khác bằng cách bật/tắt biểu tượng mắt Show bên cạnh mỗi layer badge.

## 8. Thêm nút mua hàng \{#add-the-purchase-button\}

Nút mua hàng sẽ khởi động in-app purchase cho sản phẩm mà người dùng đã chọn. Biến `products.selectedProduct` luôn trỏ đến sản phẩm đang được chọn trên màn hình.

Để thêm nút mua hàng:

1. Nhấn **+** > **Buttons** và chọn một kiểu nút.
2. Khi nút được chọn, mở tab **Interactions** ở bảng bên phải.
3. Nhấn **Add trigger** > **On tap**, sau đó nhấn **Add action**.
4. Đặt **Action** thành **Purchase** và **Product** thành `products.selectedProduct`.

## 9. Thêm liên kết footer \{#add-footer-links\}

Footer chứa các liên kết đến điều khoản sử dụng và chính sách bảo mật (bắt buộc theo yêu cầu của cửa hàng) và một nút để khôi phục các lần mua trước đó.

Để thêm liên kết footer:
1. Nhấn **+** > **Buttons** > **Links**. Thao tác này sẽ thêm một hàng gồm Restore Purchases, Terms of Use và Privacy Policy.
2. Trong bảng **Layers**, chọn nút **Terms of Use**. Mở tab **Interactions** — hành động **Open URL** đã được gắn sẵn. Nhấn vào hành động đó và nhập URL đích.
3. Lặp lại tương tự với nút **Privacy Policy** bằng URL chính sách bảo mật của bạn.
4. Giữ nguyên nút **Restore Purchases**. Hành động của nút này đã được cấu hình sẵn.

:::tip
Nếu vị trí của bất kỳ phần tử nào có vẻ quá cao hoặc quá thấp, hoặc nếu bạn muốn thêm khoảng cách ở bất kỳ đâu, hãy điều chỉnh margin và padding của phần tử đó.
:::

## 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.