---
title: "Список продуктов пейвола"
description: "Узнайте, как настраивать блоки продуктов на пейволе в Adapty, чтобы оптимизировать встроенные покупки."
---

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

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

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

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

1. Выберите продукт, который будет выбран по умолчанию, в поле **Selected product**.
2. Задайте внешний вид продукта в выбранном и невыбранном состоянии во вкладке **Style** раздела **Products**.
3. Настройте общий вид блока во вкладке **Layout** или [добавьте группы продуктов](#add-products-group) для комбинирования макетов.

:::warning

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

:::

## Настройка внешнего вида продукта \{#product-view-customisation\}

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

### Бейдж продукта \{#product-badge\}

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

  <img src="/assets/shared/img/eedb135-PB_product_badge.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

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

1. Включите переключатель **Product badge** в настройках нужного продукта.

  <img src="/assets/shared/img/2a5779d-PB_product_badge_config.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. Настройте внешний вид и текст бейджа под ваш дизайн.

### Выбранный продукт \{#selected-product\}

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

Если вы добавляете несколько [групп продуктов](#add-products-group), параметр **Selected product** будет применён ко всем группам одновременно.

  <img src="/assets/shared/img/3f37969-PB_preselected_product.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

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

1. Откройте элемент **Products**.

  <img src="/assets/shared/img/da4e4c4-PB_preselect_product.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. На вкладке **Content** выберите нужный продукт из выпадающего списка **Selected product**.
3. При необходимости настройте внешний вид выбранного продукта и вид остальных продуктов по умолчанию на вкладке **Style**.

  <img src="/assets/shared/img/ac7411e-PB_setup_selected_default_button.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Выделенный продукт \{#highlighted-product\}

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

  <img src="/assets/shared/img/afc2882-PB_highlighted_product.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

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

1. На левой панели выберите продукт, который хотите выделить.

  <img src="/assets/shared/img/a630507-PB_highlight_product.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. В подразделе **Style** настройте оформление, чтобы продукт лучше выделялся.

### Офферы продукта \{#product-offers\}

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

Здесь удобно использовать:
- [переменные тегов](paywall-builder-tag-variables) для динамического локализованного контента
- [пользовательские теги](custom-tags-in-paywall-builder) для собственного динамического контента

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

  <img src="/assets/shared/img/0de6871-PB_text.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Переключение между двумя наборами продуктов с помощью тогла \{#switch-between-2-product-sets-by-trial-toggle\}

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

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

1. В элементе **Products** измените параметр **Products grouping** на **Toggle (for free trials and other offers)**. Это добавит два подраздела: **Toggle on** и **Toggle off**.

  <img src="/assets/shared/img/d859a58-PB_turn_on_toggle.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. Добавьте продукты в оба подраздела, чтобы задать вид при включённом и выключенном тогле.
3. В элементе **Toggle** установите **Default state**, чтобы выбрать, в каком состоянии тогл будет отображаться при открытии пейвола — включённом или выключенном.

  <img src="/assets/shared/img/4127a67-PB_toggle_default_state.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Переключение между наборами продуктов с помощью вкладок \{#switch-between-product-sets-by-tab\}

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

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

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

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

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

   
     <img src="/assets/shared/img/paywall-tabs.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

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

   
     <img src="/assets/shared/img/add-tab-group.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

3. Распределите продукты по вкладкам.

   
     <img src="/assets/shared/img/tabs-divided.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

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

   
     <img src="/assets/shared/img/tab-rename.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

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

   
     <img src="/assets/shared/img/tab-internal-rename.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

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

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

   
     <img src="/assets/shared/img/tab-selected.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

## Отображение дополнительных продуктов под кнопкой \{#show-extra-products-under-a-button\}

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

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

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

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

1. В элементе **Products** установите параметр **Products grouping** в значение **Button (for more alternative plans)**. Продукты будут разделены на две группы: **Shown** и **More plans**.

  <img src="/assets/shared/img/view-more-plans.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. Распределите продукты между группами. **Shown** — для продуктов, которые отображаются сразу. **More plans** — для продуктов, скрытых за кнопкой и показываемых только после нажатия.

   
     <img src="/assets/shared/img/divided-plans.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

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

   
     <img src="/assets/shared/img/view-more-plans-button.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

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

## Отображение дополнительных планов в нижнем листе \{#show-extra-plans-in-a-bottom-sheet\}

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

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

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

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

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

1. В элементе **Products** установите параметр **Products grouping** в значение **Bottom Sheet (for more alternative plans)**. Продукты будут разделены на две группы: **Shown** и **More plans**.

  <img src="/assets/shared/img/bottom-sheet.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. Распределите продукты между группами. **Shown** — для продуктов, которые отображаются сразу. **More plans** — для продуктов, изначально скрытых и показываемых только после нажатия кнопки.

   
     <img src="/assets/shared/img/bottom-sheet-divided-plans.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

3. Настройте текст и макет кнопки в элементе **View More Plans** под свой дизайн и сообщение.

   
     <img src="/assets/shared/img/bottom-sheet-button.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

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

  <img src="/assets/shared/img/bottom-sheet-layout.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

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

## Добавление группы продуктов \{#add-products-group\}

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

:::note
Добавление группы продуктов отключает параметр [Products grouping](#switch-between-2-product-sets-by-trial-toggle). Выберите: добавить ещё одну группу продуктов или сгруппировать продукты внутри одного блока.
:::

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

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

  <img src="/assets/shared/img/product-group.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>