Mostrar diferentes características por producto

Esta plantilla usa visibilidad condicional para destacar distintas listas de características según el plan. La pantalla muestra dos productos —por ejemplo, Pro y Pro+— y la lista de características cambia dependiendo del producto que el usuario haya seleccionado. Un producto está marcado como predeterminado, por lo que su lista de características es visible cuando se carga la pantalla por primera vez.

Antes de empezar

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 , pero un color sólido o un degradado funcionan igual.
  4. En Layout, establece la dirección en Vertical y configura el espaciado y la alineación para que los elementos se apilen desde arriba con el contenido ocupando el espacio restante.
Configuración de pantalla con relleno de imagen y diseño vertical

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.
Botón de cierre añadido a la pantalla

3. Añade el título y combínalo 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, envuelve ambos en un contenedor 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.
H1 añadido a la pantalla con el campo Content a la derecha

Para agrupar el título con el botón de cierre:

  1. En el panel Layers, haz clic en el menú de tres puntos del layer del botón de cerrar y elige Wrap > Wrap in Horizontal Container.
Close button wrapped in a horizontal stack
  1. Arrastra el layer H1 al nuevo contenedor horizontal.
Close button and H1 grouped in a horizontal container

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 contenedor horizontal seleccionado, configura la alineación y la distribución en el panel derecho para que los elementos queden bien colocados.
Botón de cierre y H1 alineados en el contenedor horizontal

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.
Dos productos en la pantalla con uno marcado como predeterminado

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.

En lugar de dos listas separadas, puedes añadir una única lista y hacer que los elementos de texto dentro de ella sean condicionales, de modo que una sola lista se adapte al producto seleccionado. Consulta Añadir texto 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 .
  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.
Primera lista de características con visibilidad condicional vinculada al primer 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 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.
Segunda lista de características con visibilidad condicional vinculada al segundo 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 Variable icon, 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}.
Botón de compra con la variable del precio del producto seleccionado en la etiqueta
  1. Cambia a la pestaña Interactions y haz clic en Add trigger > On tap > Add action.
  2. Establece Action en Purchase y Product en products.selectedProduct.
Botón de compra con la variable del precio del producto seleccionado en la etiqueta

Los enlaces de términos de uso, política de privacidad y restaurar compras van 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. 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.
  3. Repite el proceso para el botón Privacy Policy con tu URL de privacidad.
  4. Deja el enlace Restore Purchases tal como está. Su acción ya está preconfigurada.
Enlaces del pie de página en la parte inferior de la pantalla

Próximos pasos