Список продуктов пейвола

Список продуктов — ключевой элемент пейвола, который представляет ваши предложения в удобном и привлекательном виде. Он помогает направить пользователей к покупке.

Вкладка Content содержит продукты, которые будут отображаться на пейволе. Это те же продукты, которые вы добавили при его создании.

Список продуктов можно изменить — это повлияет на список во вкладке General пейвола.

После того как вы просмотрели список продуктов:

  1. Выберите продукт, который будет выбран по умолчанию, в поле Selected product.
  2. Задайте внешний вид продукта в выбранном и невыбранном состоянии во вкладке Style раздела Products.
  3. Настройте общий вид блока во вкладке Layout или добавьте группы продуктов для комбинирования макетов.

В этом разделе описывается новый Paywall Builder, который работает с iOS, Android и React Native SDK версии 3.0 и выше, а также с Flutter и Unity SDK версии 3.3.0 и выше. Информацию о старом Paywall Builder, совместимом с Adapty SDK v2.x и более ранними версиями, см. в разделе Продукты пейвола в устаревшем Paywall Builder.

Настройка внешнего вида продукта

Улучшение визуального оформления отдельных продуктов помогает перераспределить внимание пользователя. Выделение продукта или специального предложения побуждает пользователей сосредоточиться на нём. Рассмотрим основные варианты кастомизации.

Бейдж продукта

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

eedb135-PB_product_badge.webp

Чтобы добавить бейдж продукта:

  1. Включите переключатель Product badge в настройках нужного продукта.
2a5779d-PB_product_badge_config.webp
  1. Настройте внешний вид и текст бейджа под ваш дизайн.

Выбранный продукт

Для сценария покупки Products as list + purchase button можно предварительно выбрать продукт, чтобы ненавязчиво направить пользователя к нему. Это особенно эффективно для управления выбором пользователя.

Если вы добавляете несколько групп продуктов, параметр Selected product будет применён ко всем группам одновременно.

3f37969-PB_preselected_product.webp

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

  1. Откройте элемент Products.
da4e4c4-PB_preselect_product.webp
  1. На вкладке Content выберите нужный продукт из выпадающего списка Selected product.
  2. При необходимости настройте внешний вид выбранного продукта и вид остальных продуктов по умолчанию на вкладке Style.
ac7411e-PB_setup_selected_default_button.webp

Выделенный продукт

Для сценария покупки Products as purchase buttons можно выделить предпочтительный продукт, сделав его главным вариантом и сразу привлекая к нему внимание пользователя.

afc2882-PB_highlighted_product.webp

Чтобы выделить продукт:

  1. На левой панели выберите продукт, который хотите выделить.
a630507-PB_highlight_product.webp
  1. В подразделе Style настройте оформление, чтобы продукт лучше выделялся.

Офферы продукта

Для каждого продукта можно задать разный текст для офферов в подразделе Text. Вкладка Default содержит текст, который отображается без оффера.

Здесь удобно использовать:

Начните вводить текст с угловой скобки, и Adapty предложит доступные переменные тегов для вставки локализованных данных из сторов.

0de6871-PB_text.webp

Переключение между двумя наборами продуктов с помощью тогла

Чтобы сделать пользовательский опыт более гибким, можно дать пользователям возможность переключаться между двумя наборами продуктов с помощью тогла. Это особенно удобно для разграничения стандартных продуктов и триалов.

Чтобы добавить тогл:

  1. В элементе Products измените параметр Products grouping на Toggle (for free trials and other offers). Это добавит два подраздела: Toggle on и Toggle off.
d859a58-PB_turn_on_toggle.webp
  1. Добавьте продукты в оба подраздела, чтобы задать вид при включённом и выключенном тогле.
  2. В элементе Toggle установите Default state, чтобы выбрать, в каком состоянии тогл будет отображаться при открытии пейвола — включённом или выключенном.
4127a67-PB_toggle_default_state.webp

Переключение между наборами продуктов с помощью вкладок

Вкладки пейвола позволяют группировать продукты по категориям и наглядно показывать пользователям все доступные варианты. Они особенно полезны, если:

  • Приложение предлагает несколько недельных, месячных или годовых планов
  • У вас есть разные уровни, например Plus, Gold или Premium

Во вкладки также можно добавлять такие элементы, как списки возможностей, чтобы помочь пользователям увидеть разницу между уровнями.

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

  1. В элементе Products установите Products grouping в значение Tabs (for comparing plan groups). Продукты будут разделены на две начальные группы вкладок.

    paywall-tabs.webp
  2. Если нужно больше вкладок, нажмите Add tab group.

    add-tab-group.webp
  3. Распределите продукты по вкладкам.

    tabs-divided.webp
  4. Откройте первую группу вкладок и в поле Tab title введите название, которое будет отображаться на пейволе.

    tab-rename.webp
  5. Задайте внутреннее название вкладки в отдельном поле для удобства. Оно не будет отображаться на пейволе, но поможет вам идентифицировать вкладку в списках.

    tab-internal-rename.webp
  6. Повторите шаги 4–5 для каждой вкладки.

  7. Выберите вкладку, которая будет активна при открытии пейвола пользователем. Перейдите в Tab control и выберите нужную вкладку из списка Selected tab.

    tab-selected.webp

Отображение дополнительных продуктов под кнопкой

Чтобы упростить пейвол, можно скрыть часть продуктов или групп продуктов за кнопкой (например, «Посмотреть другие планы» или с любым другим текстом).

Это позволяет пользователям сначала сосредоточиться на главных предложениях, а при желании изучить дополнительные планы.

Такой подход делает пейвол чище и может улучшить конверсию.

Как это настроить:

  1. В элементе Products установите параметр Products grouping в значение Button (for more alternative plans). Продукты будут разделены на две группы: Shown и More plans.
view-more-plans.webp
  1. Распределите продукты между группами. Shown — для продуктов, которые отображаются сразу. More plans — для продуктов, скрытых за кнопкой и показываемых только после нажатия.

    divided-plans.webp
  2. Настройте текст и макет кнопки в элементе View more plans под свои нужды.

    view-more-plans-button.webp

Эти настройки помогут создать понятный и привлекательный список продуктов, направляющий пользователей к покупке.

Отображение дополнительных планов в нижнем листе

Чтобы упростить пейвол, можно скрыть часть продуктов и показывать их только при нажатии кнопки (например, «Посмотреть другие планы» или с любым другим текстом).

При нажатии открывается всплывающий нижний лист со скрытыми продуктами.

Такой подход позволяет пользователям сначала сосредоточиться на основных вариантах, а при желании изучить дополнительные планы.

Это эффективный способ сделать пейвол чище и потенциально повысить конверсию.

Как это настроить:

  1. В элементе Products установите параметр Products grouping в значение Bottom Sheet (for more alternative plans). Продукты будут разделены на две группы: Shown и More plans.
bottom-sheet.webp
  1. Распределите продукты между группами. Shown — для продуктов, которые отображаются сразу. More plans — для продуктов, изначально скрытых и показываемых только после нажатия кнопки.

    bottom-sheet-divided-plans.webp
  2. Настройте текст и макет кнопки в элементе View More Plans под свой дизайн и сообщение.

    bottom-sheet-button.webp
  3. Нижний лист автоматически использует тот же формат отображения списка продуктов, что и основной пейвол — будь то отдельные кнопки покупки или продукты, каждый из которых является кнопкой. Вы можете настроить макет, текст, стиль нижнего листа и выбор продукта по умолчанию.

bottom-sheet-layout.webp

Эти настройки помогут создать простой и удобный список продуктов.

Добавление группы продуктов

Если нужно применить вертикальный и горизонтальный макеты к разным продуктам или добавить текст между продуктами, можно добавить ещё одну группу продуктов.

Добавление группы продуктов отключает параметр Products grouping. Выберите: добавить ещё одну группу продуктов или сгруппировать продукты внутри одного блока.

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

  1. Нажмите Add element или + на Footer.
  2. Выберите Products.
  3. Добавьте продукты. Поскольку один и тот же продукт не может находиться в разных группах, сначала удалите его из другой группы.
product-group.png