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

:::info
Прежде чем приступить к этому гайду, убедитесь, что вы завершили [интеграцию со стором](integrate-payments) и создали хотя бы один продукт, как описано в предыдущем [гайде по добавлению продуктов](quickstart-products).
:::

:::tip
Настраиваете Adapty программно? Этот шаг можно выполнить с помощью [Developer CLI](developer-cli-quickstart).
:::

В Adapty **пейволы — единственный способ доставлять продукты в приложение**. Так вы легко отслеживаете эффективность разных наборов продуктов для разных групп пользователей и управляете визуальным представлением продуктов.

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

Как это работает:
- **Пейвол**: контейнер для одного или нескольких продуктов. Может содержать визуальный пейвол, созданный в Paywall Builder, информацию о продуктах или JSON-конфигурацию для использования в коде. Подробнее о [пейволах](paywalls).
- **Плейсмент**: конкретная точка в приложении, где вы показываете пейвол, онбординг или A/B-тест. Плейсменты позволяют нацеливать пейвол на определённые [аудитории](audience). Подробнее о [плейсментах](placements).

:::note
Даже если вы не планируете оформлять пейвол через Adapty, всё равно нужно пройти этот гайд и создать его. Это позволит разместить в нём продукты и отслеживать аналитику монетизации.
:::

<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/e4o7Z2tUGL8?si=ipwbW3VVN0fIg0R0"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>

## 1. Создайте пейвол \{#1-build-paywall\}

Создать пейвол — дело нескольких кликов:

1. Откройте раздел [**Paywalls**](https://app.adapty.io/paywalls) в главном меню Adapty.
2. Нажмите **Create paywall**.
3. Введите **Paywall name** — это внутренний идентификатор в дашборде Adapty.
4. Нажмите **Add product** и выберите продукты для отображения на пейволе.
5. Нажмите **Create as a draft**.

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

### Оформите пейвол \{#design-paywall\}

Проще всего оформить пейвол с помощью no-code конструктора Adapty — без навыков дизайна и программирования. Выбирайте из широкого набора профессиональных шаблонов или создайте полностью кастомный пейвол под ваше приложение.

:::note
Если вы не хотите использовать Paywall Builder, можно реализовать пейволы вручную с помощью [Remote Config](customize-paywall-with-remote-config) и кастомных JSON-данных. Подробнее об <InlineTooltip tooltip="реализации пейволов вручную">Следуйте гайду для вашей платформы: [iOS](ios-implement-paywalls-manually), [Android](android-implement-paywalls-manually), [React Native](react-native-implement-paywalls-manually), [Flutter](flutter-implement-paywalls-manually), [Unity](unity-implement-paywalls-manually).</InlineTooltip>.
:::

:::tip
Если ваше приложение опубликовано в App Store, вы можете создать уникальный, высококонверсионный пейвол под ваше приложение буквально за секунды. Воспользуйтесь AI-генератором на вкладке **Builder & Generator**.
:::

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

Давайте оформим ваш первый пейвол. Создавать привлекательные пейволы очень просто:

1. Откройте **Builder & Generator** на странице пейвола.
2. Нажмите **Build no-code paywall**.
3. Выберите шаблон и подтвердите выбор.
4. Добавьте и настройте нужные элементы.
5. Нажмите **Save**.

Подробнее — в статье о [Paywall Builder](adapty-paywall-builder#paywall-elements).

## 2. Добавьте пейвол в плейсмент \{#2-add-paywall-to-placement\}

Теперь нужно создать <InlineTooltip tooltip="плейсмент">Плейсмент — это конкретная точка в приложении, где вы показываете пейвол, онбординг или A/B-тест. Плейсменты позволяют нацеливать пейвол на определённые [аудитории](audience). Подробнее о [плейсментах](placements).</InlineTooltip> с только что созданным пейволом.

Начнём с самого важного — плейсмента онбординга. Позже вы сможете добавить больше [значимых плейсментов](choose-meaningful-placements) на пути пользователя.

1. Откройте раздел [**Placements**](https://app.adapty.io/placements/paywalls) в главном меню Adapty.
2. Нажмите **Create placement**.
3. Введите **Placement name** (например, `main` или `onboarding`) — это внутренний идентификатор в дашборде Adapty.
4. Введите **Placement ID** — этот идентификатор используется в SDK Adapty для загрузки пейвола плейсмента.
5. Нажмите **Run Paywall** и выберите пейвол, который хотите показывать.
6. Нажмите **Save & publish**.

В коде приложения вы жёстко прописываете только идентификаторы плейсментов. Всё остальное настраивается в дашборде Adapty и может быть изменено в любой момент без обновления приложения.

:::tip
Adapty даёт гибкость: показывайте разные пейволы разным группам пользователей и анализируйте эффективность. Подробнее об [аудиториях](audience) и [A/B-тестах](ab-tests).
:::

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

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

После привязки пейвола к плейсменту в Adapty следующий шаг — отобразить его на устройстве. Переходите к [интеграции SDK Adapty](quickstart-sdk) в ваше приложение.