メールで商品を縦に表示する方法
推定 1 分で読めます
|
更新日 2025年12月4日 0:00 EST
このページで学べること
カゴ落ちフローと注文確認フローで、商品を縦方向(つまり、商品情報の横ではなく上に画像を表示)に表示する方法を確認します。
縦方向の商品ブロックを作成する
以下の手順は、既存の横向き商品ブロックを縦向き商品ブロックに変換するのに役立ちます。まだ動的コンテンツブロックを含むフロー メールがない場合は、フロー ライブラリで見つけてください。
- Klaviyo のサイドバーで フロー を選択します。
- カゴ落ちフローまたは注文確認フローに移動します。
- 右上の [アクション ステータスの更新] をクリックし、編集している間はフローを 手動 に設定します。
- 動的コンテンツブロック(例:誰かのカート内の商品を表示するテーブルブロック)を含むフロー内のメールを開きます。
- 動的テーブル ブロックのすぐ下に新しいセクションを追加します。

- 新しいセクションに画像ブロックとテーブル ブロックを追加します。
- テーブル設定 > 行コレクション と テーブル設定 > 行エイリアス から値をコピーします。
- [表示オプション] に移動し、[繰り返しルールを作成] をクリックします。

- それぞれ、テーブルブロックの値を Repeat For フィールドと Item alias フィールドに貼り付けてください。

- テーブルブロックで、「動的画像」の下にある [置換] をクリックします。

- 表示されるモーダルで、動的変数または動的 URL フィールド内の内容をすべてコピーします。

- 新しいセクション内の画像ブロックをクリックします。
- [画像ライブラリを閲覧] をクリックします。
- [ダイナミック画像] を選択し、ダイナミック URL を貼り付けます。
- [保存] をクリックします。
- テーブルブロックの [リンクアドレス] フィールドに表示されるタグをコピーします。

- 新しい画像ブロックの リンク アドレス フィールドにこのタグを貼り付けてください。
- 元のテーブル ブロックからテキスト コンテンツをコピーします。

- 新しいテキストブロックにテキストを貼り付けます。
- メールをプレビューして、新しいセクションにすべての商品情報が表示されていることを確認してください。内容に誤りがある場合は、すべての要素(つまり、行コレクション、行エイリアス、動的画像 URL、テキスト内容)が正しく移行されていることを確認してください。
- 新しいセクションに問題がなければ、元のテーブルブロックを削除します。
- 必要に応じて、この新しいセクションをフロー内の他のメッセージで使用できるよう、ユニバーサルコンテンツとして保存します。
達成できること
これらの手順に従うと、メールには(商品情報の上に画像が表示される)縦方向の商品ブロックが含まれるようになり、商品画像と情報が横方向に表示されることはありません。

その他のリソース
- ダークモードメールデザインのベストプラクティス
ダークモードについてご確認ください。これは、一部のユーザーがディスプレイを暗くするためにオンにするデバイス設定です。この設定は、メールの表示方法に影響します。ダークモードはデバイスレベルで選択されるエンドユーザー設定であり、Klaviyo では、各デバイスでダークモードがどのように実装されるかを直接制御できません。
- Klaviyo でブランドスタイルを更新する方法
リブランドまたはブランドデザインの刷新を行う際に、Klaviyo で更新すべき内容をご確認ください。
この記事は役に立ちましたか?
この記事へのフィードバックには、このフォームのみを使用してください。 サポートへの連絡方法.