打ち消し線価格と割引バッジを表示する

実際の価格の横に打ち消し線付きの価格を並べると、割引がひと目でわかります。このレシピでは、年間プロダクトのカードを改造して、月額プランでの月額料金を打ち消し線付きで表示し、その横に年間プランの実質月額価格を並べ、さらに割引バッジを追加します。取り消し線のフォーマットはテキスト要素全体に適用されるため、大きなテキストの中の変数だけに取り消し線を引くことはできません。そのため、取り消し線が引かれた価格は独立したテキスト要素として配置し、水平コンテナの中で割引価格と横に並べます。

Yearly product card before and after: a single yearly price line vs. a crossed-out monthly price, the yearly plan's monthly price, and a Save 75% badge

同じプロダクトの「以前の価格」として価格を高く表示するだけで十分な場合（例：現在の価格を2倍にして取り消し線を引くなど）は、あらかじめ用意された旧価格要素を使いましょう。このレシピは、取り消し線の価格が別プロダクトの実際の価格である場合を対象としています。

始める前に

プロダクトを表示するペイウォール画面を作成してください。たとえば、基本的なペイウォール画面の作成を参考にしてください。このレシピでは、ペイウォールが年間プランと月間プランの2つのプロダクトを提供していることを前提としています。

1. 価格行を重ねる

年間カードは最初、単一の価格行（年間プロダクトの prod_price 変数に /year を付けたもの、例: $29.99/year）だけで始まります。その上に月額換算の価格行を追加しましょう。

Layers パネルで、年額プロダクトカード内の価格テキストを選択します。テキストはすでにカードの縦方向コンテナ内にあるため、コピーはその下に積み重なります。
レイヤーの3点メニューをクリックし、Duplicate を選択します。コピーが元のテキストの下に表示されます。次のステップで、上のテキストが月額価格の行になり、下のテキストが年額価格のままになります。

年額プロダクトカード内で、元のテキストの下に複製された価格テキストが積み重なっている様子

2. 月次行を2つの価格に分割する

月次行には、取り消し線付きの月額プランの価格と、年間プランの1か月あたりの価格という2つのテキスト要素が含まれています。

変数ピッカーには、フロースクリーンに存在するプロダクトの価格のみが表示されます。フローに含まれていないプロダクトを参照するには、空のスクリーンを作成して Products 要素を追加し、そのプロダクトを割り当ててください。そのスクリーンへのナビゲーションアクションが設定されていないことを確認してください。

上部のテキスト要素を選択し、三点メニューをクリックして、Wrap > Wrap in Horizontal Container を選択します。
新しいコンテナ内のテキストレイヤーの三点メニューをクリックし、Duplicate を選択します。
最初のテキスト要素を選択し、Content フィールドをクリアします。変数アイコンをクリックし、月次プロダクトを選択してから prod_price_per_month 属性を選びます。変数の後に /month と入力します。
Design タブの Typography で、Decoration を Strikethrough に設定します（スタイルと外観 — Decoration を参照）。
2つ目のテキスト要素を選択し、同じ方法でコンテンツを置き換えます。ただし、年次プロダクトの prod_price_per_month 属性を選択してください。変数の後に /month と入力します。

月額プロダクトの価格に取り消し線が引かれ、その横に年額の月換算価格が表示された2つの価格テキスト

3. 年間価格の表示を控えめにする

複製した月額価格は元のスタイルを引き継いでいるため、3つの価格がすべて同じサイズ・ウェイトで表示されています。月額行が目立つよう、年間価格をより控えめなスタイルに変更しましょう。

キャンバス上で、一番下のテキスト要素（年間価格）を選択します。
要素上部のツールバーでテキストスタイルのドロップダウンを開き、より控えめなスタイルを選択します（例：Caption）。または、Design タブの Typography から別のスタイルを選んでください。

キャンバス上で選択された年間価格のテキストと、フローティングツールバーで選択されたキャプションスタイル

4. 割引バッジを追加する

バッジは価格の横に節約額を強調表示します。

+ > Badge をクリックします。
Layers パネルで、バッジを年間プロダクトの内部（価格の縦方向コンテナとラジオボタンの間）にドラッグします。
バッジのテキストレイヤーを選択し、Content フィールドを編集します（例：Save 75%）。

割引率の変数はないため、価格から計算して静的テキストとして入力してください。

これで年間カードは月額プランを基準価格として表示します。打ち消し線付きの月額料金、年間プランの月換算料金、割引バッジが1行に並び、その下に年間の合計金額が表示されます。

Finished yearly card with the crossed-out monthly price, discounted monthly price, Save 75% badge, and the yearly price below

次のステップ

フローを保存して公開する
プレースメントにフローを追加することで、ユーザーへの表示を開始できます。