---
title: "Mostrar todos los planes en una hoja inferior"
description: "Crea un paywall principal con una única llamada a la acción, un enlace 'Mostrar todos los planes' y una hoja inferior que revela la lista completa de productos."
---

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 \{#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\}

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](paywall-layout-and-products#screen-settings).

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 \{#add-the-cta-heading\}

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 \{#add-the-bottom-sheet-and-its-title\}

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](builder-elements#layout).

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 \{#4-add-the-product-list-inside-the-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](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 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 \{#add-the-purchase-button-inside-the-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 \{#6-add-the-footer-links-inside-the-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 \{#hide-the-bottom-sheet\}

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 \{#add-the-main-subscribe-button\}

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 Variable icon 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' \{#add-the-show-all-plans-link\}

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](onboarding-actions#showhide-elements).

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 \{#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.