---
title: "Hiển thị tất cả gói trong một bottom sheet"
description: "Xây dựng một paywall hero với một CTA duy nhất, một liên kết 'Hiển thị tất cả gói', và một bottom sheet hiển thị toàn bộ danh sách sản phẩm."
---

Template này hiển thị một ưu đãi nổi bật duy nhất trước, kèm theo một liên kết nhỏ dẫn đến danh sách gói đầy đủ. Nhấn **Show all plans** sẽ kéo lên một bottom sheet chứa các sản phẩm còn lại, nút mua hàng và các liên kết footer.

Dùng template này khi một gói chuyển đổi tốt hơn đáng kể — bottom sheet giữ các lựa chọn khác chỉ một lần nhấn mà không làm màn hình chính bị lộn xộn.

## 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\}

Dùng ảnh hero làm nền màn hình và nhóm phần còn lại của nội dung ở phía dưới, để ảnh lấp đầy phần trên của màn hình.

Để xem toàn bộ danh sách 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ấn vào vùng trống trên canvas để chọn màn hình.
2. Trong **System UI**, tắt **Safe area** để ảnh hero mở rộng đến các cạnh màn hình.
3. Trong **Fill**, chọn **Image** Image và tải ảnh hero lên.
4. Trong **Layout**, cấu hình hướng, khoảng cách và căn chỉnh để neo nội dung vào vị trí bạn muốn. Với template này, hướng **Vertical** Vertical với khoảng cách nhỏ và căn chỉnh **bottom-middle** sẽ nhóm tiêu đề và các nút ở phần dưới màn hình.

## 2. Thêm tiêu đề CTA \{#2-add-the-cta-heading\}

Tiêu đề nằm ở phần dưới màn hình, ngay phía trên nút đăng ký. Ảnh hero lấp đầy khu vực phía trên.

1. Nhấn **+** > **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**.

## 3. Thêm bottom sheet và tiêu đề của nó \{#3-add-the-bottom-sheet-and-its-title\}

Bottom sheet là một container bố cục trượt lên từ phía dưới màn hình. Thêm nó ở trạng thái hiển thị trước — bạn sẽ điền nội dung vào các bước tiếp theo và ẩn nó sau khi đã có nội dung đầy đủ. Các phần tử bị ẩn không thể chỉnh sửa, vì vậy sheet phải ở trạng thái hiển thị cho đến khi bạn điền xong.

Để biết thêm về bottom sheet và các container bố cục khác, xem [Elements — Layout](builder-elements#layout).

Để thêm bottom sheet và tiêu đề của nó:

1. Nhấn **+** > **Layout** > **Bottom Sheet**.
2. Trong bảng **Layers**, mở rộng bottom sheet, chọn layer **Title** và chỉnh sửa trường **Content** trong tab **Design** — ví dụ: `Choose your plan`.

## 4. Thêm danh sách sản phẩm vào bottom sheet \{#4-add-the-product-list-inside-the-bottom-sheet\}

Đặt tất cả sản phẩm vào bên trong bottom sheet. Một trong số chúng cũng sẽ điều khiển giá hiển thị trên nút CTA chính.

Để biết thêm về quản lý sản phẩm, xem [Set up purchases](paywall-product-block).

Để thêm và cấu hình sản phẩm:

1. Nhấn **+** > **Products** và chọn một preset bố cục. Vertical List phù hợp với hầu hết các trường hợp. Phần tử xuất hiện trên màn hình, bên ngoài bottom sheet.
2. Trong bảng **Layers**, kéo layer Products vào container **Content** bên trong bottom sheet.

3. Chọn từng thẻ sản phẩm trên canvas và chọn sản phẩm từ dropdown trong tab **Design**.

## 5. Thêm nút mua hàng vào bottom sheet \{#5-add-the-purchase-button-inside-the-bottom-sheet\}

Bottom sheet cần nút mua hàng riêng để mua bất kỳ gói nào người dùng chọn từ danh sách.

1. Nhấn **+** > **Buttons** và chọn một preset nút.
2. Trong bảng **Layers**, kéo nút mới vào container **Content** bên trong bottom sheet.

3. Với nút được chọn, mở tab **Interactions** ở bảng bên phải.
4. Nhấn **Add trigger** > **On tap**, rồi nhấn **Add action**.
5. Đặt **Action** thành **Purchase** và **Product** thành `products.selectedProduct`.

## 6. Thêm các liên kết footer vào bottom sheet \{#6-add-the-footer-links-inside-the-bottom-sheet\}

:::important
Đừng dùng [inline links](onboarding-text#inline-link) cho văn bản lồng trong nút. Thay vào đó, hãy thiết lập hành động **Open URL** trực tiếp trên nút.
:::

Điều khoản sử dụng, chính sách bảo mật và khôi phục mua hàng nằm ở cuối sheet — màn hình chính vẫn gọn gàng.

1. Nhấn **+** > **Buttons** > **Links**. Thao tác này thêm một hàng với Restore Purchases, Terms of Use và Privacy Policy.
2. Trong bảng **Layers**, kéo hàng Links vào container **Content** bên trong bottom sheet.
3. 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**.
4. Lặp lại cho nút **Privacy Policy** với URL chính sách bảo mật của bạn.
5. Giữ nguyên liên kết **Restore Purchases**. Hành động của nó đã được cấu hình sẵn.

## 7. Ẩn bottom sheet \{#7-hide-the-bottom-sheet\}

Sau khi nội dung của sheet đã đầy đủ, hãy ẩn nó để nó không xuất hiện trên màn hình theo mặc định. Người dùng sẽ hiển thị nó bằng cách nhấn **Show all plans** ở bước cuối.

Trong bảng **Layers**, chọn bottom sheet và đặt trạng thái của nó thành **Hide** Hide. Sheet vẫn còn trong cây layer nhưng không còn hiển thị trên canvas.

## 8. Thêm nút đăng ký chính \{#8-add-the-main-subscribe-button\}

Nút chính trên màn hình đăng ký người dùng vào gói hàng tháng chỉ với một lần nhấn. Nhãn của nó sử dụng biến giá của sản phẩm hàng tháng để nút luôn đồng bộ với sản phẩm.

1. Trong bảng **Layers**, nhấn vào màn hình để các phần tử mới được thêm vào root, không phải bên trong bottom sheet.
2. Nhấn **+** > **Buttons** và chọn một preset nút.
3. Với nút được chọn, mở tab **Design** và đặt con trỏ vào trường **Content**. Nhấn Variable icon và chọn biến giá cho sản phẩm chính. Bao quanh nó bằng phần còn lại của nhãn — ví dụ: `Subscribe for {price}/month`.

4. Chuyển sang tab **Interactions** và nhấn **Add trigger** > **On tap** > **Add action**.
5. Đặt **Action** thành **Purchase** và **Product** thành sản phẩm bạn cần. Không giống nút trong bottom sheet, nút này nhắm đến một sản phẩm cụ thể thay vì `products.selectedProduct`.

## 9. Thêm liên kết 'Show all plans' \{#9-add-the-show-all-plans-link\}

Một liên kết văn bản bên dưới nút đăng ký hiển thị bottom sheet khi nhấn. Thêm nó dưới dạng phần tử văn bản với style **Button Label** giữ giao diện tối giản trong khi vẫn cho phép bạn gắn hành động.

Để biết thêm về hành động Show/Hide, xem [Actions — Show/hide elements](onboarding-actions#showhide-elements).

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

1. Với màn hình được chọn trong bảng **Layers**, nhấn **+** > **Text** > **Button Label**.
2. Với phần tử văn bản được chọn, chỉnh sửa trường **Content** thành `Show all plans`.
3. Mở tab **Interactions** và nhấn **Add trigger** > **On tap** > **Add action**.
4. Đặt **Action** thành **Show** và chọn phần tử bottom sheet từ dropdown.

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