---
title: "Lista de productos del paywall"
description: "Descubre cómo configurar los bloques de productos del paywall en Adapty para optimizar las compras in-app."
---

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:

1. Elige qué producto debe estar preseleccionado por defecto en el campo **Selected product**.
2. Define cómo debe verse un producto cuando está seleccionado o no en la pestaña **Style** de la sección **Products**.
3. Configura la vista general del bloque en la pestaña **Layout** o [añade grupos de productos](#add-products-group) para combinar diseños.

:::warning

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

:::

## Personalización de la vista del producto \{#product-view-customisation\}

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

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.

  <img src="/assets/shared/img/eedb135-PB_product_badge.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Para añadir una insignia de producto:

1. Activa el interruptor **Product badge** en la configuración de un producto específico.

  <img src="/assets/shared/img/2a5779d-PB_product_badge_config.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. Personaliza la vista y el texto de la insignia según tus necesidades de diseño.

### Producto preseleccionado \{#selected-product\}

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](#add-products-group), la misma opción **Selected product** se aplicará a todos los grupos.

  <img src="/assets/shared/img/3f37969-PB_preselected_product.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Para preseleccionar un producto:

1. Abre el elemento **Products**.

  <img src="/assets/shared/img/da4e4c4-PB_preselect_product.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. En la pestaña **Content**, elige el producto que quieres preseleccionar en la lista desplegable **Selected product**.
3. Ajusta la vista del producto seleccionado y la vista predeterminada de los demás productos en la pestaña **Style** si es necesario.

  <img src="/assets/shared/img/ac7411e-PB_setup_selected_default_button.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Producto destacado \{#highlighted-product\}

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.

  <img src="/assets/shared/img/afc2882-PB_highlighted_product.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Para destacar un producto:

1. En el panel izquierdo, elige el producto que quieres destacar.

  <img src="/assets/shared/img/a630507-PB_highlight_product.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. En la subsección **Style**, ajusta el diseño para que el producto destaque más.

### Ofertas del producto \{#product-offers\}

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](paywall-builder-tag-variables) para contenido dinámico y localizado
- [etiquetas personalizadas](custom-tags-in-paywall-builder) 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.

  <img src="/assets/shared/img/0de6871-PB_text.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Cambiar entre 2 conjuntos de productos con un interruptor de prueba \{#switch-between-2-product-sets-by-trial-toggle\}

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:

1. 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**.

  <img src="/assets/shared/img/d859a58-PB_turn_on_toggle.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. Añade productos a ambas subsecciones para crear las vistas para cuando el interruptor esté activado o desactivado.
3. En el elemento **Toggle**, establece el **Default state** para elegir si el interruptor debe comenzar activado o desactivado en el paywall.

  <img src="/assets/shared/img/4127a67-PB_toggle_default_state.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Cambiar entre conjuntos de productos por pestañas \{#switch-between-product-sets-by-tab\}

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:

1. En el elemento **Products**, establece **Products grouping** en **Tabs (for comparing plan groups)**. Esto dividirá tus productos en dos grupos de pestañas iniciales.

   
     <img src="/assets/shared/img/paywall-tabs.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

2. Si necesitas más pestañas, haz clic en **Add tab group**.

   
     <img src="/assets/shared/img/add-tab-group.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

3. Organiza tus productos dentro de estas pestañas.

   
     <img src="/assets/shared/img/tabs-divided.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

4. Abre el primer grupo de pestañas y en **Tab title** introduce el nombre que aparecerá en el paywall.

   
     <img src="/assets/shared/img/tab-rename.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

5. 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.

   
     <img src="/assets/shared/img/tab-internal-rename.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

6. Repite los pasos 4-5 para cada pestaña.

7. 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**.

   
     <img src="/assets/shared/img/tab-selected.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

## Mostrar productos adicionales bajo un botón \{#show-extra-products-under-a-button\}

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:

1. 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**.

  <img src="/assets/shared/img/view-more-plans.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. 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.

   
     <img src="/assets/shared/img/divided-plans.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

3. Personaliza el texto y el diseño del botón en el elemento **View more plans** según tus necesidades.

   
     <img src="/assets/shared/img/view-more-plans-button.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

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 \{#show-extra-plans-in-a-bottom-sheet\}

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:

1. 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**.

  <img src="/assets/shared/img/bottom-sheet.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. 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.

   
     <img src="/assets/shared/img/bottom-sheet-divided-plans.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

3. Personaliza el texto y el diseño del botón en el elemento **View More Plans** para adaptarlo a tu diseño y mensaje.

   
     <img src="/assets/shared/img/bottom-sheet-button.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

4. 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.

  <img src="/assets/shared/img/bottom-sheet-layout.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Estas opciones te ayudan a crear una lista de productos sencilla y fácil de usar.

## Añadir un grupo de productos \{#add-products-group\}

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.

:::note
Añadir un grupo de productos desactiva la opción [Agrupación de productos](#switch-between-2-product-sets-by-trial-toggle). Elige entre añadir otro grupo de productos o agrupar los productos dentro del mismo bloque.
:::

Para añadir un grupo de productos:

1. Haz clic en **Add element** o en **+** en el **Footer**.
2. Selecciona **Products**.
3. Añade productos. Como no puedes tener el mismo producto en grupos diferentes, primero debes eliminarlo del otro grupo.

  <img src="/assets/shared/img/product-group.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>