コンテンツブロック：商品、ディスカウント、カウントダウン、追跡など

バージョン1.17では、ビジュアルビルダーに13個のコンテンツブロックと2個のレイアウトブロックが追加されました。これらのブロック内のすべてのテキストフィールドはLiquidに対応しているため、商品タイトルや追跡番号などを{{ variables.xxx }}を通じてワークフローから取得することができ、キャンバス上では各ブロックがテスト変数を反映した状態で表示されます。

部品で作られたブロック

商品カード、ディスカウントボックス、お客様の声、署名、動画、注文追跡ブロックは、「画像＋テキスト」ブロックと同様に、すでにご存知の基本的なブロックから構成されています。いずれかを開くと、設定パネルにその構成要素（画像、見出し、テキスト、価格、ボタン）が一覧表示されます。各パーツをクリックすると、そのブロックの詳細設定（画像の幅や配置、見出しレベル、リッチテキストの書式設定、ボタンのスタイルや角の丸みなど）で編集できます。不要なパーツは、目のアイコンをクリックして非表示にできます。パーツの下には、カードのレイアウトやフレームのスタイルなど、ブロック自体の設定が表示されます。

製品

1つの商品カードです。構成要素：画像（アップロード、または {{ variables.product_image }} のようなリンク）、タイトル、説明文（有効にするまで非表示）、価格（オプションで、取り消し線付きの割引前価格を表示可能）、およびボタンです。 リンクは画像とタイトルを囲むように設定され、ボタンには個別のリンクが設定されます。レイアウトでは、画像をテキストの上または横に配置し、画像の幅と行の垂直方向の配置を指定できます。注文確認メールや顧客再獲得メールで、注目の商品を掲載する際にご利用ください。

価格

価格行そのもの：太字で表示された価格、その前に（任意で）取り消し線が入った割引前価格、サイズ、色、配置。これは商品カードの価格部分であり、どこでも表示されます。

商品一覧

image 各エントリは、お選びいただいたスタイルと角丸の半径を持つボタン付きのカードになります。画像やリンクがない場合は、単に省略されます。Shopify Flowからのリストは、「**コードを実行」**ステップまたは注文のラインアイテムを使用して埋めてください。

ディスカウントコード

見出し、説明、ボタンという構成要素を持つコードボックスで、枠線は破線、実線、または枠なしのいずれかです。塗りつぶしには2つの方法があります：

すでに存在するコード：そのコード（または変数）を入力してください。このボタンは、別途リンクを指定しない限り、チェックアウト時にそのコードが適用された状態で、お客様のストアへリンクします。
メールごとに固有のコードを作成します。メールが送信されると、アプリはストア内に「PREFIX-XXXXXX」という名称の使い捨てディスカウントコードを生成します。このコードには、設定したディスカウント率またはディスカウント額、有効期間（日数）、最低合計金額、および「1お客様につき1回限り」というルールが反映されます。このコードは「履歴」に送信記録とともに表示され、メールの「再送信」機能でも同じコードが表示されます。マーケティングメールには、受信者1人につき1つのコードが割り当てられます。

コードを作成するには**「ディスカウント」**の権限が必要となります。この権限はブロック内で要求され、「権限」ページ（権限：アプリがストアから読み取れる情報）から取り消すことができます。このアプリはコードを作成するのみであり、他のディスカウントを読み取ったり、変更したり、削除したりすることは一切ありません。テスト用メールでは、コードが作成される代わりにプレースホルダーが表示されます。

カウントダウン

日付と時刻までのリアルタイムのカウントダウン機能です。メール内では、メールを開いた際にアプリが生成するアニメーション画像として表示されるため、受信トレイ内でカウントダウンが行われます。画像の表示をブロックするクライアントでは、その横にテキストが表示されます。**「Ends at」**には、タイムゾーン付きの日付（2026-12-24T23:59:00+01:00）または変数を指定できます。 4つのスタイル（ボックス、フリップカード、ミニマル、テキスト）、3つのサイズ、独自のラベルや色、そして時間が経過した後にカウントダウンに代わるテキストを設定できます。

注文状況の確認

配送業者と追跡番号、進捗状況を示すバー、そして2つの要素で構成されています。1つは**「追跡」**ボタン（別の追跡リンクを指定しない限り、追跡リンクが開きます）、もう1つは配達予定日などのメモで、必要な時まで非表示になっています。 **「発送状況」は、**Shopify Flow（IN_TRANSIT、OUT_FOR_DELIVERY、DELIVERED など）からShopifyのステータスを取得するか、ステップ番号を受け取り、それまでのステップをハイライト表示します。ステップのラベルはご自身で設定でき、2つから6つまで指定可能です。

星の評価

（{{ variables.rating }}）の数値に基づく星の評価を、整数の星の数に丸め、残りの星はグレー表示にします。各星の横にはテキストと、オプションでリンク（例えば、レビューページへのリンクなど）が表示されます。レビュー依頼メールと組み合わせてご利用ください。

お客様の声

引用文と著者の名前をテキストとして配置し、さらにオプションで写真を添えたカード形式で、色付きのアクセントバー付き、またはシンプルなデザインで作成できます。

ソーシャルリンク

サイズと間隔が調整された、一連のソーシャルメディアアイコン（Instagram、Facebook、X、LinkedIn、YouTube、TikTok、Pinterestなど）です。フッターで使用されているものと同じアイコンです。

動画

メールでは動画を再生できないため、このブロックには、動画ページへのリンクが設定された再生ボタン付きのサムネイル部分と、その下に任意で表示できるキャプション部分が表示されます。再生ボタンの色（ダーク、ライト、またはブランドカラー）、サムネイルの高さおよび幅を設定できます。Windows版のOutlookでは、再生ボタンの背後にサムネイルが表示されませんが、リンクは正常に機能します。

署名

写真、名前（見出し）、および詳細情報（本文：役職、会社名、電話番号、メールアドレス、ウェブサイト）で、写真は丸型または正方形、左側または上部に配置されます。デフォルトでは、{{ shop.name }} および {{ shop.email }} が使用されます。

表

注文の詳細や仕様を記載するための小さなデータ表です。各セルには変数を指定でき、1行目は見出し行として設定でき、行は交互に配置することも可能です。

ブラウザで表示する

おなじみの「このメールをブラウザで表示」という一文です。このリンクをクリックすると、送信時のレイアウトとデータに基づいて表示された、そのメールのウェブ版が30日間閲覧できます。テスト用メールには、テスト用変数が設定されたレイアウトへのリンクが含まれています。

コラム

2つ、3つ、または4つの等幅の列で、それぞれに独自のブロックが配置されています。例えば、3つの商品カードが並んでいる場合や、各アイコンの下に1行のテキストが表示されている場合などです。

次の条件を満たす場合は表示する

変数に関する条件が真の場合にのみ送信されるセクションです。条件は、Liquidが読み取る形式で入力してください：variables.total > 100、language == "de"、variables.tags contains "vip"。Canvasは、テスト用の変数を用いて条件を評価し、そのセクションが省略される場合には、そのセクションを非表示にします。ブロックは、列に配置する場合と同様に、このセクション内に配置してください。