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

• 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

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.

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

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

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

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.

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

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.

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

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

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.

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

Đ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

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