---
title: "Añadir texto condicional a un paywall"
description: "Usa texto condicional para cambiar listas de funciones según el producto que seleccione el usuario."
---

Esta plantilla usa texto condicional para destacar distintas listas de funciones según el plan. La pantalla muestra dos productos —por ejemplo, Pro y Pro+— y aparece una lista de funciones diferente dependiendo del producto que el usuario haya seleccionado. Un producto está marcado como predeterminado, por lo que su texto condicional se muestra al cargar la pantalla por primera vez.
## Antes de empezar \{#before-you-start\}

- [Crea productos](create-product) en el Adapty Dashboard.
- [Conecta Adapty con App Store y Google Play](integrate-payments).
## 1. Configura el diseño de la pantalla \{#1-set-up-the-screen-layout\}

La pantalla actúa como contenedor de todo lo que añades. En este ejemplo, el fondo es una imagen, pero un color sólido o un degradado funcionan igual.

Para ver la lista completa de propiedades de la pantalla, consulta [Pantallas y capas — Configuración de pantalla](paywall-layout-and-products#screen-settings).

Para configurar la pantalla:
1. Haz clic en un área vacía del canvas para seleccionar la pantalla.
2. En **System UI**, desactiva **Safe area** para que el fondo se extienda hasta los bordes de la pantalla.
3. En **Fill**, elige un tipo de fondo y configúralo. Este ejemplo usa una **Image** Image, pero un color sólido o un degradado funcionan igual.
4. En **Layout**, establece la dirección en **Vertical** Vertical y configura el espaciado y la alineación para que los elementos se apilen desde arriba con el contenido ocupando el espacio restante.

## 2. Añade el botón de cierre \{#2-add-the-close-button\}

El botón de cierre descarta el paywall. El preset **Close** viene preconfigurado — no es necesario configurar ninguna acción.

1. En el canvas, haz clic en **+**.
2. Selecciona **Buttons** > **Close**.

## 3. Añade el título y combínalo con el botón de cierre \{#add-the-title-and-pair-it-with-the-close-button\}

El título se coloca junto al botón de cierre en la parte superior de la pantalla. Para alinearlos horizontalmente, envuelve ambos en un stack horizontal.

Para añadir el título:

1. Haz clic en **+** > **Text** > **H1**.
2. Con el H1 seleccionado, abre la pestaña **Design** y edita el texto en el campo **Content**.

Para agrupar el título con el botón de cierre:
1. En el panel **Layers**, haz clic en el menú de tres puntos Context menu sobre la capa del botón de cierre y elige **Wrap** > **Wrap in Horizontal Stack**.

2. Arrastra la capa H1 al nuevo stack horizontal.

Para alinear los dos elementos:
1. Ajusta el tamaño del botón de cierre y el tamaño de fuente del H1 para que quepan cómodamente en la misma línea.
2. Con el stack horizontal seleccionado, configura la alineación y la distribución en el panel derecho para que los elementos queden correctamente alineados.

## 4. Añade la lista de productos \{#add-the-product-list\}

Añade los productos entre los que el usuario puede elegir. Marca uno como predeterminado para que la pantalla tenga un estado con sentido cuando se cargue por primera vez.

Para más información sobre cómo gestionar productos, consulta [Configurar compras](paywall-product-block).

Para añadir y configurar productos:
1. Haz clic en **+** > **Products** y elige un diseño predefinido. La Lista Vertical funciona bien para esta plantilla.
2. Selecciona cada tarjeta de producto en el lienzo y elige un producto en el menú desplegable de la pestaña **Design**.
3. Selecciona la tarjeta que quieres que esté seleccionada por defecto —por ejemplo, Pro+— y activa **Set as default product** en la pestaña **Design**.

## 5. Añade la lista de características del primer producto \{#5-add-the-feature-list-for-the-first-product\}

La primera lista de características describe el producto por defecto. Solo es visible cuando el usuario tiene seleccionado el primer producto.

Para más información sobre la visibilidad condicional, consulta [Visibilidad condicional](onboarding-element-visibility).

Para añadir y configurar la lista de características:
1. Haz clic en **+** > **List** y elige un preset de lista compacta. Icon List funciona bien para los paywalls.
2. Con cada fila seleccionada, edita el título en el campo **Content** para describir las características del primer producto.
3. Con la lista aún seleccionada, abre la pestaña **Design**. En **Visibility**, selecciona **Conditional** Conditional.
4. Configura la condición para que la lista se muestre solo cuando el primer producto sea el seleccionado en ese momento. Compara con la variable `products.selectedProduct.prod_title`. En **Value**, haz clic en el icono de variable `{}`, selecciona la tarjeta del primer producto y luego su atributo `prod_title` — la comparación se resuelve con el título de ese producto.

## 6. Añade la lista de características del segundo producto \{#add-the-feature-list-for-the-second-product\}

Repite el mismo proceso para el segundo producto. Las dos listas son mutuamente excluyentes: solo una es visible a la vez, según el producto seleccionado.

Para añadir la segunda lista de características:
1. Haz clic en **+** > **List** y elige el mismo preset compacto para mantener coherencia visual.
2. Edita cada fila para describir las características del segundo producto.
3. En **Visibility**, selecciona **Conditional** Conditional y configura la misma condición que en el paso 5, pero apunta el selector de variables **Value** al `prod_title` de la segunda tarjeta de producto.

## 7. Añadir el botón de compra \{#add-the-purchase-button\}

El botón de compra inicia la compra in-app del producto que el usuario haya seleccionado. Su etiqueta muestra el precio del producto seleccionado, por lo que se actualiza cuando el usuario cambia de plan.

Para más información sobre la acción de compra, consulta [Acciones — Purchase](onboarding-actions#purchase).

Para añadir y configurar el botón de compra:
1. Haz clic en **+** > **Buttons** y elige un preset de botón.
2. Con el botón seleccionado, abre la pestaña **Design** y coloca el cursor en el campo **Content**. Haz clic en el icono de variable Variable icon, selecciona `products.selectedProduct` y luego el atributo `prod_price` — la variable completa se resuelve como `products.selectedProduct.prod_price`. Rodéala con el resto de la etiqueta — por ejemplo, `Subscribe for {prod_price}`.

3. Cambia a la pestaña **Interactions** y haz clic en **Add trigger** > **On tap** > **Add action**.
4. Establece **Action** en **Purchase** y **Product** en `products.selectedProduct`.

## 8. Añade los enlaces del pie de página \{#add-the-footer-links\}

Los enlaces de condiciones de uso, política de privacidad y restaurar compras se sitúan debajo del contenido principal.

Para añadir los enlaces del pie de página:

1. Haz clic en **+** > **Buttons** > **Links**. Esto añade una fila con Restore Purchases, Terms of Use y Privacy Policy al final del árbol de capas.
2. Selecciona el enlace **Terms of Use**, abre la pestaña **Interactions** e introduce la URL de tus condiciones en el campo **Open URL**.
3. Repite el paso anterior para el enlace **Privacy Policy** con tu URL de privacidad.
4. Deja el enlace **Restore Purchases** tal como está. Su acción ya está preconfigurada.

## Próximos pasos \{#next-steps\}

- [Guarda y publica tu flow](builder-save-publish).
- [Añade el flow a un placement](create-placement) para empezar a mostrárselo a los usuarios.