Esta plantilla muestra primero una única oferta destacada, con un enlace discreto a la lista completa de planes. Al pulsar Show all plans se desliza hacia arriba un bottom sheet que contiene los demás productos, un botón de compra y los enlaces del pie de página. Use it when one plan converts disproportionately well — the bottom sheet keeps the alternatives one tap away without crowding the main screen.

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 principal como fondo de pantalla y agrupa el resto del contenido en la parte inferior, de modo que la imagen ocupe la parte superior.

Para consultar 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 la imagen principal se extienda hasta los bordes de la pantalla.
3. En Fill, elige Image y sube tu imagen principal.
4. En Layout, configura la dirección, el espaciado y la alineación para anclar el contenido donde quieras. En esta plantilla, una dirección Vertical con un espaciado 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ñadir el bottom sheet y su título

El bottom sheet es un contenedor de diseño que se desliza hacia arriba desde la parte inferior de la pantalla. Por ahora añádelo visible — lo rellenarás en los próximos pasos y lo ocultarás una vez que el contenido esté en su lugar. Los elementos ocultos no se pueden editar, así que el sheet debe permanecer visible hasta que termines de completarlo.

Para más información sobre bottom sheets y otros contenedores de diseño, consulta Elementos — Layout.

Para añadir el bottom sheet 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. Agrega 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 se muestra en el botón CTA principal.

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

Para agregar y configurar productos:

1. Haz clic en + > Products y elige un preset de diseño. Vertical List 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 lienzo y elige un producto del desplegable en la pestaña Design.

5. Añade 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 de página dentro del bottom sheet

Los términos de uso, la política de privacidad y la restauración de compras se colocan al final del sheet, para que la pantalla principal quede 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. En el panel Layers, selecciona el botón Terms of Use. Abre la pestaña Interactions y pega la URL de tus términos en el campo Open URL.
4. Repite el mismo proceso para el botón Privacy Policy con tu URL de privacidad.
5. Deja el enlace Restore Purchases tal como está. Su acción ya viene 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 . 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 y 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 sitúa el cursor en el campo Content. Haz clic en y elige la variable de precio del producto principal. Añade el resto de la etiqueta alrededor — 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 necesitas. 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 ‘Mostrar todos los planes’

Un enlace de texto bajo el botón de suscripción muestra el bottom sheet al pulsarlo. Añadirlo como elemento de texto con el estilo Button Label mantiene un aspecto minimalista sin renunciar a la posibilidad de asignarle 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 muestre 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.