---
title: "Tạo paywall với tab"
description: "Xây dựng màn hình paywall với hai tab chuyển đổi giữa các danh sách tính năng, nhóm sản phẩm và hành động mua khác nhau."
---

Template này dùng tab để chuyển đổi giữa hai biến thể của cùng một ưu đãi trên một màn hình duy nhất. Mỗi tab chứa danh sách tính năng, danh sách sản phẩm và nút mua riêng. Nhấn vào tab sẽ thay thế nội dung hiển thị mà không cần rời khỏi màn hình — hữu ích khi phân chia các gói theo cấp độ, kỳ thanh toán, hoặc phân khúc đối tượng.

## 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 bố cục màn hình \{#1-set-up-the-screen-layout\}

Màn hình đóng vai trò là container cho nút đóng, tiêu đề, tab và nội dung tab. Trong ví dụ này, nền là hình ảnh, nhưng màu đơn hoặc gradient cũng hoạt động tương tự.

Để xem toàn bộ thuộc tính màn hình, xem [Màn hình và layers — Cài đặt màn hình](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.
2. Trong **System UI**, tắt **Safe area** để nền kéo dài đến mép màn hình.
3. Trong **Fill**, chọn loại nền và cấu hình nó. Ví dụ này dùng **Image** Image, nhưng màu đơn hoặc gradient cũng hoạt động tương tự.
4. Trong **Layout**, đặt hướng thành **Vertical** Vertical và cấu hình khoảng cách và căn chỉnh để các phần tử xếp chồng từ trên xuống với nội dung tab lấp đầy khoảng trống còn lại.

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

Nút đóng 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**.

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

Tiêu đề nằm cạnh nút đóng ở đầu màn hình. Để căn chỉnh ngang hai phần tử, hãy bọc chúng trong một horizontal container.

Để thêm tiêu đề:

1. Nhấp **+** > **Text** > **H1**.
2. Với H1 được chọn, mở tab **Design** và chỉnh sửa văn bản trong trường **Content**.

Để nhóm tiêu đề với nút đóng:

1. Trong bảng **Layers**, nhấp menu ba chấm Context menu trên layer nút đóng và chọn **Wrap** > **Wrap in Horizontal Stack**.

2. Kéo layer H1 vào horizontal container mới.

Để căn chỉnh hai phần tử:

1. Điều chỉnh kích thước nút đóng và cỡ chữ H1 để chúng nằm gọn trên cùng một dòng.
2. Với horizontal container được chọn, đặt căn chỉnh và phân bố trong bảng bên phải để các phần tử thẳng hàng đúng cách.

## 4. Thêm tab và cấu hình nhãn tab \{#4-add-the-tabs-and-configure-their-labels\}

Phần tử Tabs chia một phần màn hình thành các bảng nội dung có thể chuyển đổi. Mỗi tab có container nội dung riêng hiển thị khi người dùng chọn tab đó.

Để tìm hiểu thêm về phần tử Tabs, xem [Phần tử — Tabs](builder-elements#tabs). Để tìm hiểu thêm về các nhóm có thể chọn, xem [Phần tử và nhóm có thể chọn](flow-selectable-elements).

Để thêm tab:

1. Nhấp **+** > **Tabs** và chọn một preset — Segment control, Button Tabs, hoặc Underline.
2. Với tên mỗi tab được chọn trên canvas hoặc trong bảng **Layers**, chỉnh sửa trường **Content** trên tab **Design** để thay đổi nhãn — ví dụ: `Premium` và `Pro`.

## 5. Thêm danh sách tính năng vào tab đầu tiên \{#5-add-a-feature-list-to-the-first-tab\}

Danh sách tính năng ngắn gọn bên trong tab đầu tiên cho người dùng biết gói đó bao gồm những gì.

Để xem toàn bộ preset danh sách, xem [Phần tử — List](builder-elements#list).

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

1. Nhấp **+** > **List** và chọn một list preset. Icon List là dạng gọn nhất cho paywall. Phần tử xuất hiện ở cuối cây layer.
2. Với mỗi hàng được chọn, chỉnh sửa tiêu đề trong trường **Content**.

3. Trong bảng **Layers**, kéo danh sách vào container **Content** của tab đầu tiên.

## 6. Thêm danh sách sản phẩm vào tab đầu tiên \{#6-add-the-product-list-to-the-first-tab\}

Danh sách sản phẩm hiển thị các tùy chọn gói đăng ký cho tab đầu tiê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à tạo nhóm có thể chọn riêng của nó.

Để tìm hiểu thêm về 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 **+** > **Products** và chọn một layout preset. Vertical List phù hợp cho các gói xếp chồng. Phần tử xuất hiện ở cuối cây layer.
2. Chọn từng thẻ sản phẩm trên canvas và chọn sản phẩm từ menu dropdown trong tab **Design**.

3. Trong bảng **Layers**, kéo layer Products vào container **Content** của tab đầu tiên.

## 7. Thêm nút mua vào tab đầu tiên \{#7-add-the-purchase-button-to-the-first-tab\}

Nút mua khởi động in-app purchase cho sản phẩm mà người dùng đã chọn trong tab đầu tiên. Nhãn của nút sử dụng giá của sản phẩm được chọn để luôn đồng bộ với lựa chọn của người dùng.

Để tìm hiểu thêm về hành động Purchase, xem [Hành động — Purchase](onboarding-actions#purchase).

Để thêm và cấu hình nút mua:

1. Nhấp **+** > **Buttons** và chọn một button preset. Phần tử xuất hiện ở cuối cây layer.
2. Với nút được chọn, mở tab **Design** và đặt con trỏ vào trường **Content**. Nhấp biểu tượng variable Variable icon, chọn `products.selectedProduct`, sau đó chọn thuộc tính `prod_price` — biến đầy đủ sẽ là `products.selectedProduct.prod_price`. Bao quanh nó bằng phần còn lại của nhãn — ví dụ: `Subscribe for {prod_price}`.

3. Chuyển sang tab **Interactions** và nhấp **Add trigger** > **On tap** > **Add action**.
4. Đặt **Action** thành **Purchase** và **Product** thành `products.selectedProduct`.

5. Trong bảng **Layers**, kéo nút vào container **Content** của tab đầu tiên.

## 8. Sao chép nội dung tab đầu tiên sang tab thứ hai \{#8-copy-the-first-tabs-content-into-the-second-tab\}

Thay vì xây dựng lại cùng một cấu trúc từ đầu, hãy sao chép danh sách tính năng, danh sách sản phẩm và nút mua từ tab đầu tiên sang tab thứ hai. Bạn chỉ cần cập nhật các giá trị sau đó.

Để sao chép nội dung:

1. Trong bảng **Layers**, mở rộng container **Content** của tab đầu tiên.
2. Chọn từng phần tử bên trong (danh sách tính năng, sản phẩm, nút mua), sao chép bằng ⌘C / Ctrl+C, và dán bằng ⌘V / Ctrl+V. Các bản sao xuất hiện ở cuối cây layer.
3. Kéo từng phần tử đã sao chép vào container **Content** của tab thứ hai.

## 9. Cập nhật nội dung tab thứ hai \{#9-update-the-second-tabs-content\}

Tab thứ hai giờ đây phản chiếu tab đầu tiên. Cập nhật từng phần tử để phản ánh gói thứ hai.

Để cập nhật tab thứ hai:

1. Chỉnh sửa danh sách tính năng trong tab thứ hai để các hàng khớp với tính năng của gói thứ hai.
2. Chọn từng thẻ sản phẩm trong phần tử Products của tab thứ hai và gán sản phẩm của gói thứ hai từ menu dropdown. Phần tử Products này tự động trở thành một nhóm có thể chọn riêng (`products2`).
3. Chọn nút mua trong tab thứ hai. Trong trường **Content** của tab **Design**, thay đổi biến giá từ `products.selectedProduct.prod_price` thành `products2.selectedProduct.prod_price`.
4. Chuyển sang tab **Interactions** và cập nhật **Product** của hành động **Purchase** từ `products.selectedProduct` thành `products2.selectedProduct`.

## 10. Thêm các liên kết footer chung \{#10-add-the-shared-footer-links\}

Điều khoản sử dụng, chính sách quyền riêng tư và khôi phục mua hàng luôn hiển thị bất kể tab nào đang hoạt động. Thêm chúng ở cấp độ màn hình — bên ngoài cả hai container nội dung tab — để chúng được chia sẻ giữa các tab.

Để thêm liên kết footer:

1. Nhấp **+** > **Buttons** > **Links**. Thao tác này thêm một hàng với Restore Purchases, Terms of Use và Privacy Policy ở cuối cây layer, đúng vị trí bạn muốn — ở gốc của màn hình, không lồng trong tab.
2. Trong bảng **Layers**, chọn nút **Terms of Use**. Mở tab **Interactions** và dán URL điều khoản của bạn vào trường **Open URL**.
3. Lặp lại cho nút **Privacy Policy** với URL quyền riêng tư của bạn.
4. Để nguyên liên kết **Restore Purchases**. Hành động của nó đã được cấu hình sẵn.

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