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

プロダクトを追加する

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

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

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

2. Products を選択します。

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

   

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

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

購入ボタンを追加する

購入ボタンは、ユーザーがタップしたときに 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、スタイル付きボタンの場合は他のボタンタイプを選択します。

3. 要素を選択した状態で、右パネルの Interactions タブを開き、Add trigger をクリックします。
4. On tap を選択して、Add action をクリックします。
5. Action ドロップダウンから Restore purchases を選択します。

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

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

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

1. Products 要素でプロダクトカードを選択します。
2. 右パネルの Interactions タブを開き、Add trigger をクリックします。

3. On tap を選択し、Add action をクリックします。
4. Action ドロップダウンから Show または Hide を選択します。
5. そのプロダクトが選択されたときに表示または非表示にする要素を選択します。

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

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

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

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