このページで学べること

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

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

以下の手順は、既存の横向き商品ブロックを縦向き商品ブロックに変換するのに役立ちます。まだ動的コンテンツブロックを含むフロー メールがない場合は、フロー ライブラリで見つけてください。

  1. Klaviyo のサイドバーで フロー を選択します。
  2. カゴ落ちフローまたは注文確認フローに移動します。
  3. 右上の [アクション ステータスの更新] をクリックし、編集している間はフローを 手動 に設定します。
  4. 動的コンテンツブロック(例:誰かのカート内の商品を表示するテーブルブロック)を含むフロー内のメールを開きます。
  5. 動的テーブル ブロックのすぐ下に新しいセクションを追加します。
Section block
Section block
  1. 新しいセクションに画像ブロックとテーブル ブロックを追加します。
  2. テーブル設定 > 行コレクション と テーブル設定 > 行エイリアス から値をコピーします。
  3. [表示オプション] に移動し、[繰り返しルールを作成] をクリックします。
Create repeat rules
Create repeat rules
  1. それぞれ、テーブルブロックの値を Repeat For フィールドと Item alias フィールドに貼り付けてください。
old and new repeat for
old and new repeat for
  1. テーブルブロックで、「動的画像」の下にある [置換] をクリックします。
replace dynamic image button
replace dynamic image button
  1. 表示されるモーダルで、動的変数または動的 URL フィールド内の内容をすべてコピーします。
Dynamic image field
Dynamic image field
  1. 新しいセクション内の画像ブロックをクリックします。
  2. [画像ライブラリを閲覧] をクリックします。
  3. [ダイナミック画像] を選択し、ダイナミック URL を貼り付けます。
  4. [保存] をクリックします。
  5. テーブルブロックの [リンクアドレス] フィールドに表示されるタグをコピーします。
Image link address
Image link address
  1. 新しい画像ブロックの リンク アドレス フィールドにこのタグを貼り付けてください。
  2. 元のテーブル ブロックからテキスト コンテンツをコピーします。
text content
text content
  1. 新しいテキストブロックにテキストを貼り付けます。
  2. メールをプレビューして、新しいセクションにすべての商品情報が表示されていることを確認してください。内容に誤りがある場合は、すべての要素(つまり、行コレクション、行エイリアス、動的画像 URL、テキスト内容)が正しく移行されていることを確認してください。
  3. 新しいセクションに問題がなければ、元のテーブルブロックを削除します。
  4. 必要に応じて、この新しいセクションをフロー内の他のメッセージで使用できるよう、ユニバーサルコンテンツとして保存します。

達成できること

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

vertical product block
vertical product block

その他のリソース

  • ダークモードメールデザインのベストプラクティス

    ダークモードについてご確認ください。これは、一部のユーザーがディスプレイを暗くするためにオンにするデバイス設定です。この設定は、メールの表示方法に影響します。ダークモードはデバイスレベルで選択されるエンドユーザー設定であり、Klaviyo では、各デバイスでダークモードがどのように実装されるかを直接制御できません。

  • Klaviyo でブランドスタイルを更新する方法

    リブランドまたはブランドデザインの刷新を行う際に、Klaviyo で更新すべき内容をご確認ください。

この記事は役に立ちましたか?
この記事へのフィードバックには、このフォームのみを使用してください。 サポートへの連絡方法.

Klaviyo の詳細を見る

コミュニティ
同業者、パートナー、Klaviyo のエキスパートとつながり、インスピレーションを得たり、インサイトを共有したり、あらゆる質問への回答を得たりできます。
パートナー
特定のタスクのサポートや継続的なマーケティング管理のために、Klaviyo 認定エキスパートを雇いましょう。
サポート

アカウントからサポートにアクセスしてください。

メールサポート (無料トライアルと有料アカウント) 24 時間 365 日利用可能

チャット/バーチャル アシスタント
利用可否は地域およびプランタイプによって異なります