---
title: "Показать все планы в нижнем листе"
description: "Создайте пейвол с одним основным предложением, ссылкой «Показать все планы» и нижним листом, раскрывающим полный список продуктов."
---

Этот шаблон сначала показывает одно выделенное предложение с ненавязчивой ссылкой на полный список планов. Нажатие **Show all plans** вызывает нижний лист с остальными продуктами, кнопкой покупки и ссылками в подвале.
Используйте этот вариант, когда один тариф конвертирует заметно лучше других — нижний лист держит альтернативы в одном касании, не загромождая основной экран.
## Перед началом работы \{#before-you-start\}

- [Создайте продукты](create-product) в дашборде Adapty.
- [Подключите Adapty к App Store и Google Play](integrate-payments).
## 1. Настройте макет экрана \{#set-up-the-screen-layout\}

Используйте hero-изображение как фон экрана, а остальной контент сгруппируйте внизу — так изображение займёт верхнюю часть экрана.

Полный список свойств экрана см. в разделе [Экраны и слои — Настройки экрана](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\}

Заголовок располагается в нижней части экрана, прямо над кнопкой подписки. Выше него занимает место hero-изображение.

1. Нажмите **+** > **Text** > **H1**.
2. Выделите H1, откройте вкладку **Design** и отредактируйте текст в поле **Content**.

## 3. Добавьте нижний лист и его заголовок \{#add-the-bottom-sheet-and-its-title\}

Нижний лист — это контейнер-компоновщик, который выезжает снизу экрана. Пока добавьте его видимым — в следующих шагах вы заполните его содержимым, а скроете, когда всё будет готово. Скрытые элементы нельзя редактировать, поэтому лист должен оставаться видимым, пока вы его не наполните.

Подробнее о нижних листах и других контейнерах-компоновщиках — в разделе [Элементы — Компоновка](builder-elements#layout).

Чтобы добавить нижний лист и его заголовок:
1. Нажмите **+** > **Layout** > **Bottom Sheet**.
2. На панели **Layers** разверните bottom sheet, выберите слой **Title** и отредактируйте поле **Content** на вкладке **Design** — например, `Choose your plan`.

## 4. Добавьте список продуктов в нижний лист \{#add-the-product-list-inside-the-bottom-sheet\}

Разместите все продукты внутри нижнего листа. Один из них также будет определять цену, отображаемую на основной кнопке CTA.

Подробнее об управлении продуктами см. в разделе [Настройка покупок](paywall-product-block).

Чтобы добавить и настроить продукты:

1. Нажмите **+** > **Products** и выберите пресет макета. В большинстве случаев хорошо подходит Vertical List. Элемент появится на экране, за пределами нижнего листа.
2. На панели **Layers** перетащите слой Products в контейнер **Content** внутри нижнего листа.
3. Выберите каждую карточку продукта на холсте и выберите продукт из выпадающего списка на вкладке **Design**.

## 5. Добавьте кнопку покупки в нижний лист \{#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** внутри bottom sheet.
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** кликните по экрану, чтобы новые элементы добавлялись в корень, а не внутрь bottom sheet.
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** и выберите элемент bottom sheet из выпадающего списка.

## Следующие шаги \{#next-steps\}

- [Сохраните и опубликуйте свой флоу](builder-save-publish).
- [Добавьте флоу в плейсмент](create-placement), чтобы начать показывать его пользователям.