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

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

部品で作られたブロック

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

製品

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

価格

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

商品一覧

変数内のリストから、1行につき2枚または3枚のカードを表示します。これは、ラインアイテム表の仕組みと同じです。**「List」**をその変数（例：variables.products）に指定し、各フィールドを格納するプロパティに以下の名前を付けます：title、price、compare_at_price、image、url。 各エントリは、指定したスタイルと角の丸みを持つボタンが付いたカードになります。画像やリンクがない場合は、単に省略されます。Shopify Flowからのリストは、「コードを実行」ステップまたは注文のラインアイテムを使用して埋めてください。

ディスカウントコード

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

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

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

カウントダウン

日付と時刻までのリアルタイムのカウントダウン機能です。メール内では、メールを開いた際にアプリがレンダリングするアニメーション画像として表示されるため、受信トレイ上でカウントダウンが行われます。画像の表示をブロックするクライアントでは、その横にテキストが表示されます。**「Ends at」**には、タイムゾーン付きの date（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行のテキストが記載されている場合などです。

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

関連情報

• メールのレイアウトを作成する - ビルダーと、その他すべてのブロック。
• Shopify Flow からのデータの受け渡し - 値を指定します。
• 権限：アプリがストアから読み取れる情報 - 「ディスカウント」の権限。