Esta plantilla muestra primero una oferta destacada con un enlace discreto a la lista completa de planes. Al pulsar Show all plans se desliza hacia arriba una hoja inferior que contiene los demás productos, un botón de compra y los enlaces del pie de página. Úsalo cuando un plan convierte de forma desproporcionada — el panel inferior mantiene las alternativas a un toque de distancia sin saturar la pantalla principal.

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

Usa la imagen hero como fondo de pantalla y agrupa el resto del contenido en la parte inferior, de modo que la imagen ocupe la parte superior de la pantalla.

Para ver la lista completa de propiedades de pantalla, consulta Pantallas y capas — Ajustes 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 la imagen hero se extienda hasta los bordes de la pantalla.
3. En Fill, elige Image Image y sube tu imagen hero.
4. En Layout, configura la dirección, el espaciado y la alineación para anclar el contenido donde quieras. Para esta plantilla, una dirección Vertical Vertical con un espacio pequeño y alineación bottom-middle agrupa el encabezado y los botones en la parte inferior de la pantalla.

2. Añade el encabezado del CTA

El encabezado se sitúa en la parte inferior de la pantalla, justo encima del botón de suscripción. La imagen hero ocupa el área superior.

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

3. Añade la hoja inferior y su título

La hoja inferior es un contenedor de diseño que se desliza desde la parte inferior de la pantalla. Añádela visible por ahora — la rellenarás en los próximos pasos y la ocultarás una vez que el contenido esté en su lugar. Los elementos ocultos no se pueden editar, así que la hoja debe permanecer visible hasta que termines de añadir su contenido.

Para más información sobre hojas inferiores y otros contenedores de diseño, consulta Elementos — Diseño.

Para añadir la hoja inferior y su título:

1. Haz clic en + > Layout > Bottom Sheet.
2. En el panel Layers, despliega el bottom sheet, selecciona la capa Title y edita el campo Content en la pestaña Design — por ejemplo, Choose your plan.

4. Añade la lista de productos dentro del bottom sheet

Coloca todos los productos dentro del bottom sheet. Uno de ellos también determinará el precio que aparece en el botón CTA principal.

Para más información sobre la gestión de productos, consulta Configura compras.

Para añadir y configurar productos:

1. Haz clic en + > Products y elige un diseño predefinido. La lista vertical funciona bien en la mayoría de los casos. El elemento aparece en la pantalla, fuera del bottom sheet.
2. En el panel Layers, arrastra la capa Products al contenedor Content dentro del bottom sheet.
3. Selecciona cada tarjeta de producto en el canvas y elige un producto del desplegable en la pestaña Design.

5. Añadir el botón de compra dentro del bottom sheet

El bottom sheet necesita su propio botón de compra para adquirir el plan que el usuario seleccione de la lista.

1. Haz clic en + > Buttons y elige un preset de botón.
2. En el panel Layers, arrastra el nuevo botón al contenedor Content dentro del bottom sheet.

3. Con el botón seleccionado, abre la pestaña Interactions en el panel derecho.
4. Haz clic en Add trigger > On tap y luego en Add action.
5. Establece Action en Purchase y Product en products.selectedProduct.

6. Añade los enlaces del pie dentro del bottom sheet

Los enlaces de términos de uso, política de privacidad y restaurar compras se colocan en la parte inferior del sheet, de modo que la pantalla principal queda despejada.

1. Haz clic en + > Buttons > Links. Esto añade una fila con Restore Purchases, Terms of Use y Privacy Policy.
2. En el panel Layers, arrastra la fila Links al contenedor Content dentro del bottom sheet.
3. Selecciona el enlace Terms of Use, abre la pestaña Interactions y pega la URL de tus términos en el campo Open URL.
4. Repite el proceso para el enlace Privacy Policy con tu URL de privacidad.
5. Deja el enlace Restore Purchases tal como está. Su acción está preconfigurada.

7. Ocultar la hoja inferior

Con el contenido de la hoja ya listo, ocúltala para que no aparezca en pantalla por defecto. Los usuarios la verán al pulsar Show all plans en el último paso.

En el panel Layers, selecciona la hoja inferior y establece su estado en Hide Hide. La hoja permanece en el árbol de capas, pero deja de renderizarse en el canvas.

8. Añade el botón principal de suscripción

El botón principal de la pantalla suscribe al usuario al plan mensual con un solo toque. Su etiqueta usa la variable de precio del producto mensual para que el botón siempre esté sincronizado con el producto.

1. En el panel Layers, haz clic en la pantalla para que los nuevos elementos se añadan a la raíz, no dentro del bottom sheet.
2. Haz clic en + > Buttons y elige un preset de botón.
3. Con el botón seleccionado, abre la pestaña Design y coloca el cursor en el campo Content. Haz clic en y selecciona la variable de precio del producto principal. Rodéala con el resto de la etiqueta, por ejemplo: Subscribe for {price}/month.

4. Cambia a la pestaña Interactions y haz clic en Add trigger > On tap > Add action.
5. Establece Action en Purchase y Product en el producto que necesites. A diferencia del botón del bottom sheet, este apunta a un producto específico en lugar de products.selectedProduct.

9. Añade el enlace ‘Ver todos los planes’

Un enlace de texto debajo del botón de suscripción muestra el bottom sheet al tocarlo. Añadirlo como elemento de texto con el estilo Button Label mantiene un aspecto minimalista sin dejar de permitirte asociarle una acción.

Para más información sobre la acción Mostrar/Ocultar, consulta Acciones — Mostrar/ocultar elementos.

Para añadir el enlace:

1. Con la pantalla seleccionada en el panel Layers, haz clic en + > Text > Button Label.
2. Con el elemento de texto seleccionado, edita el campo Content para que diga Show all plans.
3. Abre la pestaña Interactions y haz clic en Add trigger > On tap > Add action.
4. Establece Action en Show y selecciona el elemento bottom sheet en el desplegable.

Próximos pasos

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