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

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

• Tạo sản phẩm trong Adapty Dashboard.
• Kết nối Adapty với App Store và Google Play.

1. Thiết lập bố cục màn hình

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

Để xem danh sách đầy đủ các thuộc tính màn hình, hãy xem Màn hình và lớp — Cài đặt màn hình.

Để 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 để hero image mở rộng đến các cạnh màn hình.

   Warning

   Nếu flow của bạn nhắm đến iPhone Duo, hãy bật Safe area. Nếu không, thanh trạng thái ở cạnh bên của Duo có thể che mất văn bản và các nút.

3. Trong mục Fill, chọn Image và tải lên ảnh hero của bạn.

4. Trong mục 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 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

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ó

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.

Để 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

Đặ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.

Để 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

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

Đ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

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

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 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 ‘Hiển thị tất cả gói’

Một liên kết văn bản phía dưới nút đăng ký sẽ hiển thị bottom sheet khi nhấn vào. Thêm nó dưới dạng thành phần văn bản với kiểu Button Label giúp giao diện trông tối giản nhưng vẫn có thể gắn action.

Để tìm hiểu thêm về action Show element, xem Hiển thị hoặc ẩn một thành phần.

Để 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 element, rồi chọn bottom sheet từ dropdown Elements. Bottom sheet sẽ mở ngay lập tức với chuyển động trượt lên riêng của nó: các cài đặt Animation và Delay không áp dụng cho nó.

Các bước tiếp theo

• Lưu và xuất bản flow của bạn.
• Thêm flow vào một placement để bắt đầu hiển thị cho người dùng.