Lista de productos del paywall
La lista de productos es un elemento clave de tu paywall que muestra tus ofertas de forma organizada y atractiva. Esta lista es fundamental para guiar a los usuarios hacia la compra.
La pestaña Content contiene los productos que se mostrarán en el paywall. Son los mismos productos que añadiste al paywall cuando lo creaste.
Puedes ajustar la lista de productos. Esto afectará a la lista de productos en la pestaña General del paywall.
Después de revisar la lista de productos:
- Elige qué producto debe estar preseleccionado por defecto en el campo Selected product.
- Define cómo debe verse un producto cuando está seleccionado o no en la pestaña Style de la sección Products.
- Configura la vista general del bloque en la pestaña Layout o añade grupos de productos para combinar diseños.
Esta sección describe el nuevo Paywall Builder, que funciona con los SDK de iOS, Android y React Native versión 3.0 o superior, y los SDK de Flutter y Unity versión 3.3.0 o superior. Para más información sobre el Paywall Builder antiguo compatible con el SDK de Adapty v2.x o anterior, consulta Productos del paywall en el Paywall Builder antiguo.
Personalización de la vista del producto
Mejorar el atractivo visual de determinados productos puede reorientar significativamente la atención del usuario. Destacar un producto o una oferta especial puede animar a los usuarios a centrarse en él. Veamos algunas opciones de personalización muy útiles.
Insignia del producto
Una insignia de producto es una pequeña etiqueta que se puede añadir a un producto. Esta insignia puede aportar información promocional adicional y orientar la elección del usuario. El tamaño de la insignia se ajusta automáticamente al texto, y su posición se optimiza según el diseño de tu paywall.
Para añadir una insignia de producto:
- Activa el interruptor Product badge en la configuración de un producto específico.
- Personaliza la vista y el texto de la insignia según tus necesidades de diseño.
Producto preseleccionado
Para el flujo de compra Products as list + purchase button, puedes preseleccionar un producto para orientar sutilmente a los usuarios hacia él. Esto puede ser especialmente eficaz para guiar la elección del usuario.
Si añades varios grupos de productos, la misma opción Selected product se aplicará a todos los grupos.
Para preseleccionar un producto:
- Abre el elemento Products.
- En la pestaña Content, elige el producto que quieres preseleccionar en la lista desplegable Selected product.
- Ajusta la vista del producto seleccionado y la vista predeterminada de los demás productos en la pestaña Style si es necesario.
Producto destacado
Para el flujo de compra Products as purchase buttons, puedes destacar un producto preferido para convertirlo en la opción principal y captar de inmediato la atención del usuario.
Para destacar un producto:
- En el panel izquierdo, elige el producto que quieres destacar.
- En la subsección Style, ajusta el diseño para que el producto destaque más.
Ofertas del producto
Cada producto puede mostrar texto diferente para las ofertas en la subsección Text. La pestaña Default contiene el texto que se muestra sin oferta.
Es un buen lugar para usar:
- variables de etiqueta para contenido dinámico y localizado
- etiquetas personalizadas para tu propio contenido dinámico
Empieza a escribir con un corchete angular y Adapty sugerirá las variables de etiqueta disponibles para insertar datos localizados de los stores.
Cambiar entre 2 conjuntos de productos con un interruptor de prueba
Para crear una experiencia de usuario más versátil, puedes permitir a los usuarios cambiar entre dos conjuntos de productos usando un interruptor. Esto es especialmente útil para diferenciar entre productos estándar y pruebas.
Para añadir un interruptor:
- En el elemento Products, cambia la opción Products grouping a Toggle (for free trials and other offers). Esto añadirá dos subsecciones: Toggle on y Toggle off.
- Añade productos a ambas subsecciones para crear las vistas para cuando el interruptor esté activado o desactivado.
- En el elemento Toggle, establece el Default state para elegir si el interruptor debe comenzar activado o desactivado en el paywall.
Cambiar entre conjuntos de productos por pestañas
Las pestañas del paywall te permiten agrupar tus productos por categorías, mostrando todas las opciones posibles a tus usuarios. Son especialmente útiles si:
- Tu app ofrece varios planes semanales, mensuales o anuales
- Tienes diferentes niveles como Plus, Gold o Premium
También puedes añadir elementos como listas de características en las pestañas para ayudar a los usuarios a ver las diferencias entre niveles.
Para añadir pestañas:
-
En el elemento Products, establece Products grouping en Tabs (for comparing plan groups). Esto dividirá tus productos en dos grupos de pestañas iniciales.
-
Si necesitas más pestañas, haz clic en Add tab group.
-
Organiza tus productos dentro de estas pestañas.
-
Abre el primer grupo de pestañas y en Tab title introduce el nombre que aparecerá en el paywall.
-
Asigna un nombre interno a la pestaña en un campo separado para facilitar su identificación. Este nombre no será visible en el paywall, pero puede ayudarte a identificar la pestaña en las listas.
-
Repite los pasos 4-5 para cada pestaña.
-
Elige qué pestaña estará activa cuando el usuario abra el paywall. Ve a Tab control y selecciona la pestaña predeterminada en la lista Selected tab.
Mostrar productos adicionales bajo un botón
Para mantener tu paywall simple, puedes ocultar algunos productos o grupos de productos bajo un botón (como “Ver más planes” o la etiqueta que prefieras).
Esto ayuda a los usuarios a centrarse primero en tus principales opciones y, al mismo tiempo, les da la posibilidad de explorar otros planes si lo desean.
Es una forma estupenda de hacer el paywall más limpio y mejorar las conversiones.
Así se hace:
- En el elemento Products, establece la opción Products grouping en Button (for more alternative plans). Esto dividirá tus productos en dos grupos: Shown y More plans.
-
Distribuye tus productos entre estos grupos. Shown es para los productos que quieres mostrar de inmediato. More plans es para los productos ocultos tras el botón, que solo se muestran cuando el usuario hace clic en él.
-
Personaliza el texto y el diseño del botón en el elemento View more plans según tus necesidades.
Estas opciones te ayudan a crear una lista de productos clara y visualmente atractiva que guía a los usuarios hacia la compra.
Mostrar planes adicionales en una hoja inferior
Para simplificar tu paywall, puedes ocultar algunos productos y mostrarlos solo cuando el usuario haga clic en un botón (como “Ver más planes” o la etiqueta que elijas).
Esta acción abre una hoja deslizante desde abajo con los productos ocultos.
Esta configuración ayuda a los usuarios a centrarse primero en tus opciones principales y, al mismo tiempo, les da flexibilidad para explorar planes adicionales si les interesa.
Es una forma eficaz de simplificar el paywall y potencialmente aumentar las conversiones.
Así se hace:
- En el elemento Products, establece la opción Products grouping en Bottom Sheet (for more alternative plans). Esto dividirá tus productos en dos grupos: Shown y More plans.
-
Distribuye tus productos entre estos grupos. Shown es para los productos que quieres mostrar de inmediato. More plans es para los productos que están ocultos inicialmente y solo se muestran cuando el usuario hace clic en el botón.
-
Personaliza el texto y el diseño del botón en el elemento View More Plans para adaptarlo a tu diseño y mensaje.
-
La hoja inferior usará automáticamente el mismo formato de visualización de la lista de productos que tu paywall principal, ya sean botones de compra independientes o cada producto actuando como un botón. Puedes personalizar el diseño, el texto, el estilo y la selección de producto predeterminada de la hoja inferior.
Estas opciones te ayudan a crear una lista de productos sencilla y fácil de usar.
Añadir un grupo de productos
Si quieres aplicar diseños tanto vertical como horizontal a diferentes productos o añadir texto entre productos, puedes añadir otro grupo de productos.
Añadir un grupo de productos desactiva la opción Agrupación de productos. Elige entre añadir otro grupo de productos o agrupar los productos dentro del mismo bloque.
Para añadir un grupo de productos:
- Haz clic en Add element o en + en el Footer.
- Selecciona Products.
- Añade productos. Como no puedes tener el mismo producto en grupos diferentes, primero debes eliminarlo del otro grupo.