メールで商品を縦に表示する方法

このページで学べること

カゴ落ちフローと注文確認フローで、商品を縦方向（つまり、商品情報の横ではなく上に画像を表示）に表示する方法を確認します。

縦方向の商品ブロックを作成する

以下の手順では、既存の横方向の動的テーブルを、商品画像を詳細の上に配置したセクションに変換します。このセクションは、カートまたは注文内の各商品ごとに繰り返されます。動的テーブルを含むフローのメールをまだお持ちでない場合は、フローライブラリで見つけてください。

1. Klaviyo のサイドバーで フロー を選択します。
2. カゴ落ちフローまたは注文確認フローに移動します。
3. 編集予定のメールがライブの場合は、編集する前にメッセージカードのステータスドロップダウンから手動を選択してください。自動送信は停止され、送信時間に到達した受信者は要確認に移動します。すでに下書きまたは手動になっているメールは、現在のステータスのままにしてください。
4. 動的テーブル（顧客のカートまたは注文から商品を表示するテーブル）が含まれるメールを選択し、編集をクリックしてメールエディタを開いてください。
5. 動的テーブル ブロックのすぐ下に新しいセクションを追加します。
   

6. 新しいセクションに画像ブロックとテキストブロックを追加し、テキストの上に画像を配置してください。
7. 元の動的テーブルを選択してください。[スタイル]で、[行コレクション]と[行エイリアス]の値をコピーしてください。
8. 新しいセクションを選択し、[表示]を開いて、[コンテンツの繰り返しを追加]をクリックしてください。

9. 元のテーブルの行コレクションの値を繰り返し対象に貼り付け、行エイリアスの値を項目エイリアスに貼り付けてから、保存をクリックしてください。

10. 元の表を選択し、コンテンツを開いて、商品画像が含まれているセルを選択してください。動的画像の置換をクリックしてください。

11. 表示されたモーダルで、動的変数または動的URLフィールド内の内容をすべてコピーし、元の画像を変更せずにモーダルを閉じてください。

12. 新しいセクション内の画像ブロックをクリックします。
13. [画像を選択] をクリックします。
14. [動的画像]を選択し、コピーした値を[動的変数または動的 URL]に貼り付けます。
15. [保存] をクリックします。
16. 元のテーブルの商品の画像セルに戻り、Link address内のタグをコピーしてください。

17. このタグを、新しい画像ブロックのリンクアドレスフィールドに貼り付けてください。
18. 元のテーブルのコンテンツタブで、商品の詳細が含まれるセルを選択し、パーソナライゼーションタグとリンクを含めてテキストをコピーします。

19. 新しいテキストブロックにテキストを貼り付けます。
20. [プレビュー]をクリックし、商品データを含むフローのトリガーのサンプルイベントを選択してください。可能であれば、複数の商品を含むイベントを使用してください。各商品の画像が対応する詳細の上に表示されていることと、画像リンクが正しいことを確認してください。誤りがあるように見える場合は、セクションの[繰り返し対象]と[アイテムエイリアス]の値、動的画像URL、リンク先アドレス、コピーしたテキスト、およびパーソナライゼーションタグを確認してください。
21. 新しいセクションに問題がなければ、元のテーブルブロックを削除します。
22. 必要に応じて、この新しいセクションをフロー内の他のメッセージで使用できるよう、ユニバーサルコンテンツとして保存します。
23. 変更が保存されるまで待ってから、終了の横にあるその他のオプションを開き、フローに戻るを選択してください。編集前にこのメールをライブから手動に変更していた場合は、自動送信を再開するために、メッセージカードのステータスドロップダウンからライブを選択してください。

メールを[ライブ]に戻しても、すでに[要確認]にいる受信者はそのまま残ります。それぞれを個別に確認し、メッセージを送信するかキャンセルするかを判断してください。[要確認]内の受信者を管理する方法をご覧ください。

達成できること

これらの手順に従うと、メールには（商品情報の上に画像が表示される）縦方向の商品ブロックが含まれるようになり、商品画像と情報が横方向に表示されることはありません。

その他のリソース