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

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

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

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

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

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

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

1. Нажмите на пустую область холста, чтобы выбрать экран.
2. В разделе System UI отключите Safe area, чтобы фоновое изображение растянулось до краёв экрана.
3. В разделе Fill выберите Image и загрузите фоновое изображение.
4. В разделе Layout настройте направление, отступы и выравнивание, чтобы расположить контент в нужном месте. В этом шаблоне направление 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 внутри нижнего листа.
3. На панели Layers выберите кнопку Terms of Use. Откройте вкладку Interactions и вставьте URL условий использования в поле Open URL.
4. Повторите то же самое для кнопки Privacy Policy, указав ссылку на политику конфиденциальности.
5. Кнопку Restore Purchases оставьте без изменений — её действие уже настроено заранее.

7. Скрыть нижний лист

Теперь, когда содержимое листа готово, скройте его, чтобы он не отображался на экране по умолчанию. Пользователи смогут открыть его, нажав Show all plans на последнем шаге.

На панели Layers выберите нижний лист и установите его состояние 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 — это сохранит минимализм оформления и при этом позволит привязать действие.

Подробнее о действии «Показать/скрыть» — в разделе Actions — Show/hide elements.

Чтобы добавить ссылку:

1. Выбрав экран на панели Layers, нажмите + > Text > Button Label.
2. Выбрав текстовый элемент, измените поле Content на Show all plans.
3. Откройте вкладку Interactions и нажмите Add trigger > On tap > Add action.
4. Установите Action в значение Show и выберите элемент нижнего листа из выпадающего списка.

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

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