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

• Crea productos en el Adapty Dashboard.
• Conecta Adapty con App Store y Google Play.

1. Configura el diseño de la pantalla

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.

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

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

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

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.

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

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.

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

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

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.

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 , 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

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

• Guarda y publica tu flow.
• Añade el flow a un placement para empezar a mostrárselo a los usuarios.