---
title: "ステップ 2. ペイウォールページにデータを追加する"
description: "Adapty のペイウォールに Feature Flag 変数を追加する。"
---

[必要なプロダクトデータをすべて取得](ff-action-flow)したら、FlutterFlow でデザインした美しいペイウォールにそのデータをマッピングしましょう。この例では、プロダクトのタイトルと価格をマッピングします。

## ステップ 2.1. ペイウォールページにプロダクトタイトルを追加する \{#step-21-add-product-title-to-paywall-page\}

1. ペイウォールページのプロダクトテキストをダブルクリックします。**Set from Variable** ウィンドウで `getPaywallProductResult` 変数を検索して選択します。

  
    <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. 各フィールドを以下のように入力します：
  - **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**: 任意の値。この例では `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. **Confirm** をクリックして変更を保存します。

## ステップ 2.2. ペイウォールページに価格テキストを追加する \{#step-22-add-price-text-to-paywall-page\}

ステップ 2.1 と同じ手順を、以下のように価格テキストに対しても繰り返します：

1. ペイウォールページの価格テキストをダブルクリックします。**Set from Variable** ウィンドウで `getPaywallProductResult` 変数を検索して選択します。

  <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. 各フィールドを以下のように入力します：

- **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**: 任意の値。この例では `product.price`

3. **Confirm** ボタンをクリックして変更を保存します。

### ペイウォールページに現地通貨の価格を追加する \{#add-price-in-local-currency-to-paywall-page\}

1. ペイウォールページの価格をダブルクリックします。**Set from Variable** ウィンドウで `getPaywallProductResult` 変数を検索して選択します。

2. 各フィールドを以下のように入力します：

- **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**: 任意の値。この例では `price.amount`

3. **Confirm** をクリックして変更を保存します。

これで完了です！アプリを起動すると、Adapty ペイウォールのプロダクトデータがペイウォールページに表示されるようになります！
次は[ユーザーがプロダクトを購入できるようにする](ff-make-purchase)ステップに進みましょう。