Этот шаблон сначала показывает одно выделенное предложение с ненавязчивой ссылкой на полный список планов. Нажатие Show all plans вызывает нижний лист с остальными продуктами, кнопкой покупки и ссылками в подвале. Используйте этот вариант, когда один тариф конвертирует заметно лучше других — нижний лист держит альтернативы в одном касании, не загромождая основной экран.

Перед началом работы

• Создайте продукты в дашборде Adapty.
• Подключите Adapty к App Store и Google Play.

1. Настройте макет экрана

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

Полный список свойств экрана см. в разделе Экраны и слои — Настройки экрана.

Чтобы настроить экран:

1. Нажмите на пустую область холста, чтобы выбрать экран.
2. В разделе System UI отключите Safe area, чтобы изображение-герой растянулось до краёв экрана.
3. В разделе Fill выберите Image Image и загрузите изображение-герой.
4. В разделе Layout настройте направление, отступ и выравнивание, чтобы расположить контент в нужном месте. Для этого шаблона направление Vertical Vertical с небольшим отступом и выравниванием bottom-middle группирует заголовок и кнопки в нижней части экрана.

2. Добавьте заголовок CTA

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

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

3. Добавьте нижний лист и его заголовок

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

Подробнее о нижних листах и других контейнерах-компоновщиках — в разделе Элементы — Компоновка.

Чтобы добавить нижний лист и его заголовок:

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

4. Добавьте список продуктов в нижний лист

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

Подробнее об управлении продуктами см. в разделе Настройка покупок.

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

1. Нажмите + > Products и выберите пресет макета. В большинстве случаев хорошо подходит Vertical List. Элемент появится на экране, за пределами нижнего листа.
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 внутри bottom sheet.
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 кликните по экрану, чтобы новые элементы добавлялись в корень, а не внутрь bottom sheet.
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 и выберите элемент bottom sheet из выпадающего списка.

Следующие шаги

• Сохраните и опубликуйте свой флоу.
• Добавьте флоу в плейсмент, чтобы начать показывать его пользователям.