メールのレイアウトヘッダーとフッターのプリセット

ヘッダーとフッターのプリセット

ページをコピーする

ブランドに合わせたヘッダーとフッターのプリセットを一度作成すれば、すべてのメールレイアウトで再利用できます。ロゴ、ナビゲーションリンク、ソーシャルアイコン、著作権表示、配信停止リンクなどが含まれます。

プリセットとは、一度保存すれば、さまざまなレイアウトで再利用できるヘッダーやフッターのデザインのことです。プリセットを変更すると、それを使用しているすべてのレイアウトが更新されます。そのため、新しいロゴや住所の変更などは、20回も編集する必要がなく、1回の編集で済みます。

アプリのナビゲーションにある「**ヘッダーとフッター」**からそれらをお探しください。

プリセットの作成

このページには、「ヘッダー」と「**フッター」**の2つのセクションがあり、それぞれに「ヘッダーを追加」および「フッターを追加」ボタンがあります。プリセットに名前を付け、デザインを決定し、保存してください。

デザイン作業中、プレビューカードには、メール本文の代わりに表示される灰色の領域の上または下に、メールで実際に表示されるのと同じヘッダーやフッターが表示されます。変更を加えるたびにその都度反映されるため、保存する前に結果を確認することができます。

共有プリセットの一覧が表示された「ヘッダーとフッター」ページ
共通のヘッダーとフッター:いずれか一方を変更すると、それを使用しているすべてのレイアウトが自動的に更新されます。

ヘッダーのオプション

まずはレイアウトをお選びください:

レイアウト そこから何がわかるか
ロゴのみ ロゴのみ
ロゴ+テキスト ロゴの下にキャッチコピーや説明文が記載されたもの
ロゴ+テキスト+リンク ナビゲーションリンク付きのフルヘッダー

次に、各パーツの設定を行います:

  • ロゴ - 表示・非表示の切り替え、画像の選択、代替テキストの設定、サイズ(小:80px、中:150px、大:220px、特大:300px)および配置の選択が可能です。
  • テキスト - キャッチコピーや簡単な説明文です。{{ secrets.xxx }}および{{ variables.xxx }}をサポートしています。
  • ナビゲーションリンク ― それぞれにラベルとURLが設定されています。
  • 配置方法 ― 要素を縦に積み重ねるか、横に並べて配置します。
  • テキストとリンクの配置 - スタック型ヘッダーのみ対象です。デフォルトでは、テキストとリンクはロゴに合わせて配置されます(**「ロゴと同じ」**設定)。 「左」「中央」「右」のいずれかを選択して、それぞれを個別に配置することができます。例えば、ロゴを中央揃えにし、テキストとリンクを左揃えにするといった具合です。並列配置のヘッダーでは独自の配置が維持されるため、このオプションは非表示になります。
ヘッダーのレイアウト、コンポーネント、スタイル、プレビューを備えたヘッダープリセットエディタです。「使用先」カードには4つのレイアウトが一覧表示されています
ヘッダーのプリセット:レイアウト、コンポーネント、スタイル。下部にプレビューが表示されます。これを使用すると、レイアウトがそれに応じて変更される番組があります。

フッターの設定

レイアウト そこから何がわかるか
ミニマル 著作権および配信停止に関する事項のみ
全文 ソーシャルリンク、カスタムテキスト、著作権、配信停止
  • ソーシャルリンク - Facebook、Instagram、X(Twitter)、LinkedIn、YouTube、TikTok、Pinterest、Snapchat、Tumblr、Twitch、Vimeo、Eメール、ウェブサイト。
  • カスタムテキスト - 会社の詳細、法的記載事項、記載が必須な内容など。変数やシークレットに対応しています。
  • 法的情報 - 著作権表示を表示または非表示にします。
  • 方向と配置 - 垂直または水平、左/中央/右。

その他の言語のテキスト

プリセットは1つのデザインですが、その文言は言語ごとに異なる場合があります。保存済みのプリセットを開き、「言語」カードまでスクロールしてください。「言語を追加」の下で言語を選択し、「追加」をクリックしてください。新しい言語は、そのプリセット固有のテキストを基に開始されますので、表示を変更したい部分のみを上書きすれば済みます:

  • ロゴの代替テキスト(ロゴが表示される見出し)
  • 任意のテキスト
  • 配信停止の手順(フッター)
  • 「...」のラベル - ナビゲーションリンクまたはソーシャルリンクごとに1つのフィールド

変更されるのは言葉だけです。レイアウト、色、ロゴ、リンクのURL、およびリンクの順序は、どの言語でも同じです。空白のフィールドには元のテキストが残るため、キャッチコピーを翻訳しつつ、ブランド名はそのままにしておくことができます。「**削除」を選択すると、**その言語がプリセットから再び削除されます。

プリセットに言語が設定されると、プレビューカードに「プレビュー言語の選択」が表示されます。「オリジナル」を選択するとプリセット固有のテキストが表示され、各言語を選択するとその言語のテキストが表示されます。

メールにはどのテキストが含まれるのでしょうか

メールの言語によって決まります。これは、Shopify Flowステップが送信する言語(例:{{order.customerLocale}})か、ステップが言語を送信しない場合のレイアウトのメイン言語({{ language }}と同じ値)となります。プリセットは、以下の順序でテキストを選択します:

  1. 具体的な表現としては、カナダのフランス語圏のお客様向けの「fr-ca」です。
  2. 基本となる言語:de-AT および de-CH では、deのテキストが使用されています。
  3. その言語の地域バリエーションです。
  4. それ以外の場合は、プリセットに設定されているテキストが使用されます。

プリセットには独自のメイン言語がないため、追加されていないすべての言語については、そのプリセットに設定されたテキストが代替として使用されます。言語が欠落していることを理由に、表示がブロックされたり空白になったりすることは一切ありません。

レイアウトエディタでも同様の表示が行われます。レイアウトの翻訳を開くと、そのレイアウトで使用されているプリセットが、その言語のテキストとともに表示されるため、キャンバス上の表示はお客様に表示される内容と一致します。レイアウトの言語機能の詳細については、お客様の言語でメールを送信してください をご覧ください。

「言語を追加」というプリセットページの末尾にある「言語」カード
プリセットの言語:言語を1つ追加し、そのテキストを翻訳します。その言語で送信されるメールでは、その翻訳されたテキストが使用されます。レイアウト、色、ロゴは変更されません。

レイアウトでのプリセットの使用

ビジュアルビルダーでレイアウトを開き、キャンバス上のヘッダーまたはフッター領域をクリックしてください。「保存済みプリセット」ドロップダウンには、ご自身のプリセットに加え、**「カスタム(このレイアウトのみ)」**が表示されます。

他のメールのデザインと統一感を保ちたい場合は、「プリセット」を選択してください。このメールだけ、例えば1回限りのキャンペーンヘッダーなど、本当に異なるデザインが必要な場合は、**「カスタム」**を選択してください。

プリセットの削除

プリセットは、レイアウトで使用されている場合でも、いつでも削除できます。もし使用中のレイアウトがある場合は、削除後にアプリがそのレイアウト名を通知します:

プリセットが削除されました。3つのレイアウトでこのプリセットが使用されていましたが、今後はこれなしで表示されます:注文確認、VIPウェルカム、配送状況の更新

それらのレイアウトは引き続き機能します。別のプリセットを選択するか、「**カスタム」**に切り替えるまでは、単にヘッダーやフッターが表示されない状態で表示されるだけです。

関連情報