---
title: "Añadir un paywall para vender productos"
description: "Crea y diseña paywalls en Adapty, luego añádelos a los placements para mostrar storefronts específicos a audiencias concretas."
---

:::info
Para continuar con esta guía, asegúrate de haber completado la [integración con el store](integrate-payments) y de haber creado al menos un producto tal como se describe en la [guía anterior sobre cómo añadir productos](quickstart-products).
:::

:::tip
¿Configurando Adapty de forma programática? Puedes completar este paso usando el [Developer CLI](developer-cli-quickstart).
:::

En Adapty, **los paywalls son la única forma de entregar productos a través de tu app**. Así puedes hacer un seguimiento fácil del rendimiento de diferentes conjuntos de productos entre grupos de usuarios y gestionar cómo se presentan visualmente.

Para sacarle el máximo partido a Adapty, en esta guía crearemos un paywall para vender el producto que añadiste en el paso anterior.

Cómo funciona:
- **Paywall**: Un paywall es un contenedor para uno o más productos. Puede incluir un paywall visual creado en el paywall builder, información del producto o una configuración JSON para usar en tu código. Obtén más información sobre los [paywalls](paywalls).
- **Placement**: Un placement es un punto concreto de tu app donde muestras un paywall, un onboarding o una prueba A/B. Los placements te permiten dirigirte a [audiencias](audience) específicas con tu paywall. Obtén más información sobre los [placements](placements).

:::note
Aunque no diseñes un paywall con Adapty, igualmente debes seguir esta guía y crear uno. Así podrás incluir tus productos en él y hacer seguimiento de las métricas de monetización.
:::

<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. Crear el paywall \{#1-build-paywall\}

Crear un paywall es cuestión de unos pocos clics:

1. Ve a [**Paywalls**](https://app.adapty.io/paywalls) en el menú principal de Adapty.
2. Haz clic en **Create paywall**.
3. Introduce un **Paywall name**. Es un identificador interno en el Adapty Dashboard.
4. Haz clic en **Add product** y elige los productos que quieres mostrar en el paywall.
5. Haz clic en **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 */
  }}
/>

### Diseñar el paywall \{#design-paywall\}

La forma más sencilla de diseñar un paywall es crearlo con el editor visual sin código de Adapty, que no requiere conocimientos de diseño ni de programación. Puedes elegir entre una amplia selección de plantillas diseñadas por profesionales o construir un paywall completamente personalizado para tu app.

:::note
Si no quieres usar el paywall builder, puedes implementar los paywalls manualmente usando [Remote Config](customize-paywall-with-remote-config) con payloads JSON personalizados. Más información sobre <InlineTooltip tooltip="implementar paywalls manualmente">Sigue la guía para tu plataforma: [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
Si tu app está publicada en el App Store, puedes crear un paywall único y de alta conversión adaptado a tu app en cuestión de segundos. Usa el generador de IA en la pestaña **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 */
  }}
/>

Vamos a diseñar tu primer paywall. Puedes crear paywalls atractivos con facilidad:

1. Abre **Builder & Generator** en la página del paywall.
2. Haz clic en **Build no-code paywall**.
3. Elige una plantilla y confirma tu elección.
4. Añade y personaliza los elementos según necesites.
5. Haz clic en **Save**.

Para más detalles, consulta el artículo completo sobre el [Paywall builder](adapty-paywall-builder#paywall-elements).

## 2. Añadir el paywall a un placement \{#2-add-paywall-to-placement\}

Ahora necesitas crear un <InlineTooltip tooltip="placement">Un placement es un punto concreto de tu app donde muestras un paywall, un onboarding o una prueba A/B. Los placements te permiten dirigirte a [audiencias](audience) específicas con tu paywall. Obtén más información sobre los [placements](placements).</InlineTooltip> con el paywall que acabas de crear.

Empecemos con el más esencial: el placement de onboarding. Más adelante podrás añadir más [placements con significado](choose-meaningful-placements) a lo largo del recorrido del usuario.

1. Ve a [**Placements**](https://app.adapty.io/placements/paywalls) en el menú principal de Adapty.
2. Haz clic en **Create placement**.
3. Introduce un **Placement name** (por ejemplo, `main` u `onboarding`). Es un identificador interno en el Adapty Dashboard.
4. Introduce un **Placement ID**. Usarás este ID en el SDK de Adapty para cargar el paywall del placement.
5. Haz clic en **Run Paywall** y elige el paywall que quieres mostrar.
6. Haz clic en **Save & publish**.

En el código de tu app solo tienes que incluir directamente los IDs de placement. Todo lo demás se configura en el Adapty Dashboard y puede modificarse en cualquier momento sin necesidad de actualizar la app.

:::tip
Adapty te da la flexibilidad de mostrar diferentes paywalls a distintos grupos de usuarios y analizar el rendimiento. Más información sobre [audiencias](audience) y [pruebas 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 */
  }}
/>

## Pasos siguientes \{#next-steps\}

Tras vincular tu paywall a un placement en Adapty, el siguiente paso es mostrarlo en un dispositivo. Pasemos a [integrar el SDK de Adapty](quickstart-sdk) en tu app.