English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

購入の設定

スクリーンで購入を設定するには、購入ボタンを追加して Purchase アクションを設定します。このアクションは、特定のプロダクトを対象にするか、スクリーン上のプロダクト要素からユーザーが選択したプロダクトを対象にすることができます。

1文で価格表現を変える。

AI エディターに依頼するだけで、年間プランを1日あたりのコストで表示したり、旧価格に取り消し線を入れたり、ベストバリューをマークしたりできます。変更されるのはこのスクリーンのプロダクトカードの見せ方だけで、カタログや実際の価格は一切変わりません。

Explore the AI Editor

プロダクトを追加する

プロダクト要素は、キャンバス上にプロダクトを表示するビジュアルカードです。

プロダクト要素を追加するには:

  1. キャンバスで、対象のスクリーンの + をクリックします。

  2. Products を選択します。

  3. レイアウトのプリセットを選択します: 縦リスト、横リスト、フィーチャーカルーセル、フィーチャーカード、バナーリスト、またはボトムシート。

    Adding a product element to the canvas

  4. 各プロダクトカードを選択し、Design パネルのドロップダウンでプロダクトを割り当てます。

Important

プロダクトが割り当てられていないプロダクト要素は、プレビューと公開をブロックします。プロダクトを割り当てるか、要素を削除してください。

Adding a product element to the canvas

カードに取り消し線付きのアンカー価格を表示するには、カード内に旧価格要素を追加してください。

Note

プロダクトカードの On tap インタラクションに直接 Purchase アクションを設定することもできます。カードをタップするだけで購入が始まるため、別途購入ボタンは不要です。

Important

プロダクトグループを削除して新しいグループに置き換えた場合は、すべてのアクションと変数が新しいグループを参照しているか確認してください。削除済みグループへの参照が残っていると、プレビューと公開がブロックされます。

購入ボタンを追加する

購入ボタンは、ユーザーがタップしたときに Purchase アクションをトリガーします。

購入ボタンを追加するには：

  1. キャンバス上で、画面の + をクリックします。
  2. Button を選択し、ボタンのプリセットを選びます。
  3. ボタンを選択した状態で、右パネルの Interactions タブを開きます。
  4. Add trigger > On tap をクリックし、Add action をクリックします。
  5. Action を Purchase に設定し、Product を以下のいずれかに設定します：
    • products.selectedProduct：画面上の Products 要素でユーザーが選択したプロダクトを購入します。
    • 特定のプロダクト：画面上の選択内容に関わらず、常にそのプロダクトを購入します。
キャンバスに購入ボタンを追加する

ボタンに価格を表示する

選択中のプロダクトの価格をボタンのラベルに挿入するには、変数を使います：

  1. ボタンを選択した状態で、右パネルの Design タブを開きます。
  2. Content フィールドで、価格を表示したい位置にカーソルを置きます。
  3. 変数アイコンをクリックして products.selectedProduct を選択し、続けて prod_price 属性を選択します。完全な変数は products.selectedProduct.prod_price になります。
  4. 変数の前後に固定テキストを追加します。例: Subscribe for {prod_price}。

ユーザーが別のプロダクトを選択するたびに、ラベルが自動的に更新されます。

選択中のプロダクトの価格変数をラベルに使用した購入ボタン

購入を復元する

ユーザーが以前の購入を復元できるようにするには、画面に復元ボタンまたはリンクを追加します。

購入を復元する要素を追加するには：

  1. キャンバス上で、画面の + をクリックします。
  2. Button を選択し、テキストリンクの場合は Links、スタイル付きボタンの場合は他のボタンタイプを選択します。
Adding a restore button to the canvas
  1. 要素を選択した状態で、右パネルの Interactions タブを開き、Add trigger をクリックします。
  2. On tap を選択して、Add action をクリックします。
  3. Action ドロップダウンから Restore purchases を選択します。
インタラクションタブの購入を復元アクション

選択されたプロダクトに基づいて追加要素を表示する

画面にプロダクトが表示されている場合、ユーザーが選択したプロダクトに応じて他の要素を表示・非表示にできます。

条件付き表示を設定するには：

  1. Products 要素でプロダクトカードを選択します。
  2. 右パネルの Interactions タブを開き、Add trigger をクリックします。
プロダクトカードへのトリガー追加
  1. On tap を選択し、Add action をクリックします。
  2. Action ドロップダウンから Show または Hide を選択します。
  3. そのプロダクトが選択されたときに表示または非表示にする要素を選択します。
Interactions タブの Show/Hide アクション

別の要素から選択中のプロダクトを変更する

通常、ユーザーはプロダクトカードをタップして選択を変更します。画面上の別の場所から選択を移動させたい場合は、プロダクトを選択アクションを追加して、対象のプロダクトカードを指定してください。

アクションを設定するには:

  1. 選択を変更する要素（ボタン、トグル、またはその他の要素）を選択します。
  2. 右パネルの Interactions タブを開き、Add trigger をクリックします。
  3. トリガーを選択し、Add action をクリックします。
  4. Action ドロップダウンから Select product を選択します。
  5. Product を、アクションで選択するプロダクトカードに設定します。
Select product action in the Edit action window with the Product picker listing product cards

この操作は、同じ画面上のプロダクトグループ内のプロダクトカードにのみ機能します。ユーザーの選択に応じて異なるプロダクトを選択するには、条件付きアクションでアクションをラップしてください。

フロー内のプロダクトを確認する

左サイドバーの Products パネルには、フロー内の各画面に紐付いた既存プロダクトが表示されます。

各画面には2つのセクションがあります:

  • Default — 画面が読み込まれたときにあらかじめ選択されている1つのプロダクト。
  • Other — 同じ画面で利用可能な追加プロダクト。
Products panel in the Flow Builder