Esta plantilla usa pestañas para alternar entre dos variantes de la misma oferta en una sola pantalla. Cada pestaña contiene su propia lista de características, lista de productos y botón de compra. Al tocar una pestaña, el contenido visible cambia sin salir de la pantalla — ideal para separar planes por nivel, período de facturación o segmento de audiencia.

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 del botón de cierre, el encabezado, las pestañas y el contenido de cada pestaña. En este ejemplo, el fondo es una imagen, aunque un color sólido o un degradado funcionan igual.

Para ver la lista completa de propiedades de pantalla, consulta Pantallas y capas — Configuración de pantalla.

Para configurar la pantalla:

1. Haz clic en un área vacía del lienzo 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. En este ejemplo se 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 espacio y la alineación para que los elementos se apilen desde arriba y el contenido de las pestañas ocupe 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ñadir el título y agruparlo con el botón de cierre

El encabezado aparece junto al botón de cierre en la parte superior de la pantalla. Para alinearlos horizontalmente, envuélvelos 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 de 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 bien alineados.

4. Añadir las pestañas y configurar sus etiquetas

El elemento Tabs divide una sección de la pantalla en paneles de contenido intercambiables. Cada pestaña tiene su propio contenedor de contenido que aparece cuando el usuario la selecciona.

Para más información sobre el elemento Tabs, consulta Elementos — Tabs. Para más información sobre los grupos seleccionables, consulta Elementos y grupos seleccionables.

Para añadir las pestañas:

1. Haz clic en + > Tabs y elige un preset: Segment control, Button Tabs o Underline.
2. Con el nombre de cada pestaña seleccionado en el lienzo o en el panel Layers, edita el campo Content en la pestaña Design para cambiar la etiqueta; por ejemplo, Premium y Pro.

5. Añade una lista de características a la primera pestaña

Una lista de características breve y compacta dentro de la primera pestaña indica a los usuarios qué incluye ese plan.

Para ver el conjunto completo de ajustes de lista, consulta Elementos — Lista.

Para añadir la lista de características:

1. Haz clic en + > List y elige un ajuste de lista. Icon List es el más compacto para paywalls. El elemento aparece al final del árbol de capas.
2. Con cada fila seleccionada, edita el título en el campo Content.

3. En el panel Layers, arrastra la lista al contenedor Content de la primera pestaña.

6. Añade la lista de productos al primer tab

La lista de productos muestra las opciones de suscripción del primer tab. El elemento Products renderiza una tarjeta por cada producto asignado a la pantalla y crea su propio grupo seleccionable.

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 preset de diseño. Vertical List funciona bien para planes apilados. El elemento aparece al final del árbol de capas.
2. Selecciona cada tarjeta de producto en el canvas y elige un producto del desplegable en la pestaña Design.

3. En el panel Layers, arrastra la capa Products al contenedor Content de la primera pestaña.

7. Añadir el botón de compra a la primera pestaña

El botón de compra inicia la compra in-app del producto que el usuario haya seleccionado en la primera pestaña. Su etiqueta muestra el precio del producto seleccionado para mantenerse sincronizada con la elección del usuario.

Para más información sobre la acción de compra, consulta Acciones — Compra.

Para añadir y configurar el botón de compra:

1. Haz clic en + > Buttons y elige un preset de botón. El elemento aparece al final del árbol de capas.
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.

5. En el panel Layers, arrastra el botón al contenedor Content de la primera pestaña.

8. Copia el contenido del primer tab en el segundo tab

En lugar de reconstruir la misma estructura desde cero, copia la lista de características, la lista de productos y el botón de compra del primer tab al segundo. Solo tendrás que actualizar los valores después.

Para copiar el contenido:

1. En el panel Layers, expande el contenedor Content de la primera pestaña.
2. Selecciona cada elemento que haya dentro (lista de funciones, productos, botón de compra), cópialo con ⌘C / Ctrl+C y pégalo con ⌘V / Ctrl+V. Las copias aparecerán al final del árbol de capas.
3. Arrastra cada elemento copiado al contenedor Content de la segunda pestaña.

9. Actualiza el contenido de la segunda pestaña

La segunda pestaña ahora es un espejo de la primera. Actualiza cada elemento para que refleje el segundo plan.

Para actualizar la segunda pestaña:

1. Edita la lista de características dentro de la segunda pestaña para que las filas coincidan con las características del segundo plan.
2. Selecciona cada tarjeta de producto en el elemento Products de la segunda pestaña y asigna los productos del segundo plan desde el desplegable. Este elemento Products se convierte automáticamente en un grupo seleccionable separado (products2).
3. Selecciona el botón de compra en la segunda pestaña. En el campo Content de la pestaña Design, cambia la variable de precio de products.selectedProduct.prod_price a products2.selectedProduct.prod_price.
4. Cambia a la pestaña Interactions y actualiza el Product de la acción Purchase de products.selectedProduct a products2.selectedProduct.

10. Añadir los enlaces del pie de página compartidos

Los enlaces de términos de uso, política de privacidad y restaurar compras son visibles independientemente de la pestaña activa. Añádelos a nivel de pantalla —fuera de los dos contenedores de contenido de pestañas— para que sean compartidos entre las pestañas.

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, que es justo donde la necesitas: en la raíz de la pantalla, no anidada dentro de una pestaña.
2. Selecciona el enlace Terms of Use, abre la pestaña Interactions y pega la URL de tus términos en el campo Open URL.
3. Repite el proceso 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.