---
title: "在底部弹窗中显示所有方案"
description: "构建一个带有单一 CTA、“显示所有方案”链接和底部弹窗的主推付费墙，底部弹窗中展示完整的产品列表。"
---

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

- 在 Adapty 看板中[创建产品](create-product)。
- [将 Adapty 连接到 App Store 和 Google Play](integrate-payments)。
## 1. 设置屏幕布局 \{#1-set-up-the-screen-layout\}

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

屏幕属性的完整列表，请参阅[屏幕与图层 — 屏幕设置](paywall-layout-and-products#screen-settings)。

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

## 2. 添加 CTA 标题 \{#add-the-cta-heading\}

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

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

## 3. 添加底部弹出层及其标题 \{#add-the-bottom-sheet-and-its-title\}

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

关于底部弹出层及其他布局容器的详细说明，请参阅[元素——布局](builder-elements#layout)。

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

## 4. 在底部弹窗中添加产品列表 \{#4-add-the-product-list-inside-the-bottom-sheet\}

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

有关管理产品的更多信息，请参阅[设置购买](paywall-product-block)。

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

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

## 5. 在底部弹窗中添加购买按钮 \{#add-the-purchase-button-inside-the-bottom-sheet\}

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

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

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

## 6. 在底部弹窗中添加底部链接 \{#add-the-footer-links-inside-the-bottom-sheet\}

使用条款、隐私政策和恢复购买链接放在弹窗底部，主界面保持整洁。
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. 隐藏底部弹窗 \{#hide-the-bottom-sheet\}

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

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

## 8. 添加主订阅按钮 \{#add-the-main-subscribe-button\}

屏幕上的主按钮可让用户一键订阅月付方案。按钮文案使用月付产品的价格变量，这样按钮内容会自动与产品保持同步。
1. 在 **Layers** 面板中，点击屏幕，确保新元素添加到根层级，而不是底部弹出层内部。
2. 点击 **+** > **Buttons**，选择一个按钮预设。
3. 选中按钮后，打开 **Design** 标签页，将光标放在 **Content** 字段中。点击 Variable icon 并选择主产品的价格变量。在变量前后补充完整标签文字——例如 `Subscribe for {price}/month`。

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

## 9. 添加"显示所有方案"链接 \{#add-the-show-all-plans-link\}

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

关于显示/隐藏操作的更多内容，请参阅[操作 — 显示/隐藏元素](onboarding-actions#showhide-elements)。

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

## 下一步 \{#next-steps\}

- [保存并发布您的流程](builder-save-publish)。
- [将流程添加到版位](create-placement)，开始向用户展示。