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

• 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

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.

Để 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 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 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 ‘Show all plans’

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.

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

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