---
title: "Paso 2. Añadir datos a la página del paywall"
description: "Añade variables de Feature Flag a los paywalls en Adapty."
---

Una vez que hayas [recibido todos los datos de producto necesarios](ff-action-flow), es hora de mapearlos al bonito paywall que diseñaste en FlutterFlow. En este ejemplo, mapearemos el título del producto y su precio.

## Paso 2.1. Añadir el título del producto a la página del paywall \{#step-21-add-product-title-to-paywall-page\}

1. Haz doble clic en el texto del producto en tu página del paywall. En la ventana **Set from Variable**, busca la variable `getPaywallProductResult` y selecciónala.

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

2. Rellena los campos de la siguiente manera:
  - **Available Options**: Data Structured Field
  - **Select Field**: value
  - **Available Options**: Item at Index
  - **List Index Options**: First
  - **Available Options**: Data Structured Field
  - **Select Field**: localizedTitle
  - **Default Variable Value**: null
  - **UI Builder Display Value**: Cualquier valor; en el ejemplo es `product.title`

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

3. Haz clic en **Confirm** para guardar los cambios.

## Paso 2.2. Añadir el texto del precio a la página del paywall \{#step-22-add-price-text-to-paywall-page\}

Repite los pasos del Paso 2.1 para el texto del precio como se muestra a continuación:

1. Haz doble clic en el texto del precio en tu página del paywall. En la ventana **Set from Variable**, busca la variable `getPaywallProductResult` y selecciónala.

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

2. Rellena los campos de la siguiente manera:

- **Available Options**: Data Structured Field
- **Select Field**: value
- **Available Options**: Item at Index
- **List Index Options**: First
- **Available Options**: Data Structured Field
- **Select Field**: price
- **Default Variable Value**: null
- **UI Builder Display Value**: Cualquier valor; en el ejemplo es `product.price`

3. Haz clic en el botón **Confirm** para guardar los cambios.

### Añadir el precio en moneda local a la página del paywall \{#add-price-in-local-currency-to-paywall-page\}

1. Haz doble clic en el precio en tu página del paywall. En la ventana **Set from Variable**, busca la variable `getPaywallProductResult` y selecciónala.

2. Rellena los campos de la siguiente manera:

- **Available Options**: Data Structured Field
- **Select Field**: value
- **Available Options**: Item at Index
- **List Index Options**: First
- **Available Options**: Data Structured Field
- **Select Field**: price
- **Available Options**: Data Structured Field
- **Select Field**: amount
- **Available Options**: Decimal
- **Decimal Type**: Automatic
- **Default Variable Value**: null
- **UI Builder Display Value**: Cualquier valor; en el ejemplo es `price.amount`

3. Haz clic en **Confirm** para guardar los cambios.

¡Y voilà! Ahora, al lanzar tu app, mostrará los datos del producto del paywall de Adapty directamente en tu página del paywall.
Es hora de [permitir que tus usuarios compren este producto](ff-make-purchase).