---
title: "Hiển thị các tính năng khác nhau theo sản phẩm"
description: "Hiển thị danh sách tính năng khác nhau tùy thuộc vào sản phẩm người dùng chọn, sử dụng chế độ hiển thị có điều kiện."
---

Template này sử dụng chế độ hiển thị có điều kiện để làm nổi bật các danh sách tính năng khác nhau cho từng gói. Màn hình hiển thị hai sản phẩm — ví dụ Pro và Pro+ — và danh sách tính năng tương ứng sẽ xuất hiện tùy theo sản phẩm người dùng đang chọn. Một sản phẩm được đánh dấu là mặc định, vì vậy danh sách tính năng của nó sẽ hiển thị khi màn hình mới tải.

## 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 chứa mọi thứ bạn thêm vào. Trong ví dụ này, nền là một hình ảnh, nhưng màu đặc hoặc gradient cũng hoạt động tương tự.

Để xem toàn bộ danh sách thuộc tính màn hình, xem [Màn hình và layer — 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. Dưới **System UI**, tắt **Safe area** để nền kéo dài đến các cạnh màn hình.
3. Dưới **Fill**, chọn loại nền và cấu hình nó. Ví dụ này sử dụng **Image** Image, nhưng màu đặc hoặc gradient cũng hoạt động tương tự.
4. Dưới **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 lấp đầy không gian còn lại.

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

Nút đóng sẽ đóng paywall. Preset **Close** đã được cấu hình sẵn — không cần thiết lập 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 chúng theo chiều ngang, bọc cả hai trong một container ngang.

Để 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 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 ngang 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 sao cho chúng nằm thoải mái trên cùng một dòng.
2. Với container ngang được chọn, đặt căn chỉnh và phân phối trong bảng bên phải để các phần tử xếp thẳng hàng.

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

Thêm các sản phẩm mà người dùng có thể lựa chọn. Đánh dấu một sản phẩm làm mặc định để màn hình có trạng thái có nghĩa khi mới tải.

Để biết 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 preset bố cục. Vertical List phù hợp với template này.
2. Chọn từng thẻ sản phẩm trên canvas và chọn sản phẩm từ dropdown trong tab **Design**.
3. Chọn thẻ bạn muốn được chọn mặc định — ví dụ Pro+ — và bật **Set as default product** trong tab **Design**.

## 5. Thêm danh sách tính năng cho sản phẩm đầu tiên \{#5-add-the-feature-list-for-the-first-product\}

Danh sách tính năng đầu tiên mô tả sản phẩm mặc định. Nó chỉ hiển thị khi người dùng đã chọn sản phẩm đầu tiên.

Để biết thêm về chế độ hiển thị có điều kiện, xem [Chế độ hiển thị có điều kiện](onboarding-element-visibility).

:::tip
Thay vì hai danh sách riêng biệt, bạn có thể thêm một danh sách duy nhất và đặt các phần tử văn bản bên trong nó theo điều kiện, để một danh sách thích ứng với sản phẩm được chọn. Xem [Thêm văn bản có điều kiện](onboarding-text#add-conditional-text).
:::

Để thêm và cấu hình danh sách tính năng:

1. Nhấp **+** > **List** và chọn một preset danh sách nhỏ gọn. Icon List phù hợp với paywall.
2. Với mỗi hàng được chọn, chỉnh sửa tiêu đề trong trường **Content** để mô tả các tính năng của sản phẩm đầu tiên.
3. Với danh sách vẫn được chọn, mở tab **Design**. Dưới **Visibility**, chọn **Conditional** Conditional.
4. Thiết lập điều kiện để danh sách chỉ hiển thị khi sản phẩm đầu tiên đang được chọn. So sánh với biến `products.selectedProduct.prod_title`. Với **Value**, nhấp vào biểu tượng biến `{}`, chọn thẻ sản phẩm đầu tiên, rồi chọn thuộc tính `prod_title` của nó — phép so sánh sẽ được giải thành tiêu đề của sản phẩm đó.

## 6. Thêm danh sách tính năng cho sản phẩm thứ hai \{#6-add-the-feature-list-for-the-second-product\}

Lặp lại cách tiếp cận tương tự cho sản phẩm thứ hai. Hai danh sách này loại trừ lẫn nhau — chỉ một danh sách hiển thị tại một thời điểm, dựa trên sản phẩm đang được chọn.

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

1. Nhấp **+** > **List** và chọn cùng preset nhỏ gọn để đồng nhất về mặt hình thức.
2. Chỉnh sửa từng hàng để mô tả các tính năng của sản phẩm thứ hai.
3. Dưới **Visibility**, chọn **Conditional** Conditional và thiết lập cùng điều kiện như ở bước 5, nhưng trỏ bộ chọn biến **Value** vào `prod_title` của thẻ sản phẩm thứ hai.

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

Nút mua hàng bắt đầu in-app purchase cho sản phẩm mà người dùng đã chọn. Nhãn của nó sử dụng giá của sản phẩm được chọn, vì vậy nó sẽ cập nhật khi người dùng chuyển đổi giữa các gói.

Để biết 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 hàng:

1. Nhấp **+** > **Buttons** và chọn một preset nút.
2. Với nút được chọn, mở tab **Design** và đặt con trỏ vào trường **Content**. Nhấp vào biểu tượng biến Variable icon, chọn `products.selectedProduct`, rồi chọn thuộc tính `prod_price` — biến đầy đủ được giải thành `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`.

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

Điều khoản sử dụng, chính sách bảo mật và khôi phục giao dịch nằm phía dưới nội dung chính.

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

1. Nhấp **+** > **Buttons** > **Links**. Thao tác này thêm một hàng có Restore Purchases, Terms of Use và Privacy Policy ở cuối cây layer.
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 với nút **Privacy Policy** và URL chính sách bảo mậ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.