此模板首先突出展示单个精选优惠，并提供一个低调的链接跳转到完整方案列表。点击 Show all plans 会从底部滑出一个弹窗，其中包含其他产品、购买按钮以及底部链接。 当某个方案的转化率特别突出时，可以使用这种方式——底部弹出面板让用户只需轻触一下即可查看其他选项，而不会让主界面显得拥挤。

开始之前

• 在 Adapty 看板中创建产品。
• 将 Adapty 连接到 App Store 和 Google Play。

1. 设置屏幕布局

将主图作为屏幕背景，将其余内容集中在底部，让图片填满屏幕上半部分。

屏幕属性的完整列表，请参阅屏幕与图层 — 屏幕设置。

配置屏幕的步骤如下：

1. 点击画布空白区域选中屏幕。
2. 在 System UI 下，禁用 Safe area，让主视觉图片延伸到屏幕边缘。
3. 在 Fill 下，选择 Image Image 并上传你的主视觉图片。
4. 在 Layout 下，配置方向、间距和对齐方式，将内容锚定到目标位置。对于此模板，选择 Vertical Vertical 方向，设置较小间距并选择 bottom-middle 对齐，可将标题和按钮组合在屏幕下方。

2. 添加 CTA 标题

标题位于屏幕下方，紧贴在订阅按钮上方，主视觉图片填充其上方区域。

1. 点击 + > Text > H1。
2. 选中 H1 后，打开 Design 标签页，在 Content 字段中编辑文本内容。

3. 添加底部弹出层及其标题

底部弹出层是一种从屏幕底部滑出的布局容器。现在先将它设为可见状态——接下来几步你会往里面填充内容，等内容填好后再将其隐藏。隐藏状态下的元素无法编辑，所以在填充完成之前，弹出层必须保持可见。

关于底部弹出层及其他布局容器的详细说明，请参阅元素——布局。

添加底部弹出层及其标题的步骤如下：

1. 点击 + > Layout > Bottom Sheet。
2. 在 Layers 面板中，展开底部弹窗，选择 Title 图层，然后在 Design 标签页的 Content 字段中输入内容——例如 Choose your plan。

4. 在底部弹窗中添加产品列表

将所有产品放置在底部弹窗中。其中一个产品还将驱动主 CTA 按钮上显示的价格。

有关管理产品的更多信息，请参阅设置购买。

添加和配置产品的步骤如下：

1. 点击 + > Products，选择一个布局预设。垂直列表适用于大多数情况。该元素会出现在屏幕上，位于底部弹窗之外。
2. 在 Layers 面板中，将 Products 图层拖入底部弹窗内的 Content 容器中。
3. 在画布上选择每个产品卡片，然后在 Design 标签页的下拉菜单中选择对应的产品。

5. 在底部弹窗中添加购买按钮

底部弹窗需要有自己的购买按钮，用于购买用户从列表中选择的方案。

1. 点击 + > Buttons，选择一个按钮预设。
2. 在 Layers 面板中，将新按钮拖入底部弹窗内的 Content 容器。

3. 选中该按钮后，打开右侧面板的 Interactions 标签。
4. 点击 Add trigger > On tap，然后点击 Add action。
5. 将 Action 设置为 Purchase，将 Product 设置为 products.selectedProduct。

6. 在底部弹窗中添加底部链接

使用条款、隐私政策和恢复购买链接放在弹窗底部，主界面保持整洁。

1. 点击 + > Buttons > Links，系统会添加一行，包含 Restore Purchases、Terms of Use 和 Privacy Policy。
2. 在 Layers 面板中，将 Links 行拖入底部弹层的 Content 容器内。
3. 选中 Terms of Use 链接，打开 Interactions 标签页，将你的条款 URL 粘贴到 Open URL 字段中。
4. 对 Privacy Policy 链接重复上述操作，填入你的隐私政策 URL。
5. Restore Purchases 链接保持不变，其操作已预先配置好。

7. 隐藏底部弹窗

底部弹窗的内容设置完成后，将其隐藏，使其默认不显示在屏幕上。用户在最后一步点击 Show all plans 后即可看到它。

在 Layers 面板中，选中底部弹窗，将其状态设置为 Hide Hide。弹窗仍保留在图层树中，但不会在画布上渲染。

8. 添加主订阅按钮

屏幕上的主按钮可让用户一键订阅月付方案。按钮文案使用月付产品的价格变量，这样按钮内容会自动与产品保持同步。

1. 在 Layers 面板中，点击屏幕，确保新元素添加到根层级，而不是底部弹出层内部。
2. 点击 + > Buttons，选择一个按钮预设。
3. 选中按钮后，打开 Design 标签页，将光标放在 Content 字段中。点击 并选择主产品的价格变量。在变量前后补充完整标签文字——例如 Subscribe for {price}/month。

4. 切换到 Interactions 标签，点击 Add trigger > On tap > Add action。
5. 将 Action 设置为 Purchase，将 Product 设置为所需的产品。与底部弹窗按钮不同，该按钮针对的是具体产品，而不是 products.selectedProduct。

9. 添加”显示所有方案”链接

订阅按钮下方的文字链接，点击后会展开底部弹层。将其设置为带有 Button Label 样式的文本元素，既能保持简洁的视觉效果，又能绑定操作。

关于显示/隐藏操作的更多内容，请参阅操作 — 显示/隐藏元素。

添加链接的步骤：

1. 在 Layers 面板中选中该屏幕，点击 + > Text > Button Label。
2. 选中文本元素后，将 Content 字段内容修改为 Show all plans。
3. 打开 Interactions 标签页，点击 Add trigger > On tap > Add action。
4. 将 Action 设置为 Show，并从下拉菜单中选择底部弹出层元素。

下一步

• 保存并发布您的流程。
• 将流程添加到版位，开始向用户展示。