メールテンプレートのカスタマイズ

Commerceには、システムによって送信される各メッセージの本文セクションのデフォルトのメールテンプレートが含まれています。 本文コンテンツのテンプレートとヘッダーおよびフッターのテンプレートを組み合わせて、メッセージ全体を作成します。 コンテンツはHTMLとCSSでフォーマットされ、変数を追加して簡単に編集およびカスタマイズできます。 メールテンプレートは、web サイト、実店舗、実店舗の顧客像ごとにカスタマイズできます。 カスタムテンプレートを使用する場合は、必ず​ システム設定を更新して、正しいテンプレートが使用されるようにしてください。 電子メールテンプレートをカスタマイズする際に条件文を使用する方法については、開発者ドキュメント ​を参照してください。

例 – ウェルカムメールのプレビュー {width="500" modal="regular"}

デフォルトのテンプレートにはロゴとストア情報が含まれており、それ以上カスタマイズしなくても使用できます。 ただし、ベストプラクティスとして、各テンプレートを表示し、必要な変更を加えてから顧客に送信する必要があります。

​ メールテンプレート ​ {width="700" modal="regular"}

テンプレート情報

フィールド
説明
Template Name
カスタムテンプレートの名前。
Insert Variable
カーソル位置でテンプレートに変数を挿入します。
Template Subject
テンプレートの件名は「件名」列に表示され、リスト内のテンプレートの並べ替えやフィルタリングに使用できます。
Template Content
HTMLのテンプレートの内容。
Template Styles
テンプレートの書式設定に必要なCSS スタイル宣言は、Template Styles​ボックスに入力できます。

ヘッダーテンプレート

設定を完了すると、メールヘッダーテンプレートにストアにリンクされたロゴが含まれます。 HTMLに関する基本的な知識があれば、定義済みの変数を使用して、ストアの連絡先情報を簡単にヘッダーに追加できます。

手順1: デフォルトテンプレートの読み込み

  1. 管理者 サイドバーで、Marketing > Communications>Email Templates​に移動します。

  2. Add New Template​をクリックします。

  3. Load default template セクションで、Template セレクターをクリックし、Magento_Email > Headerを選択します。

    電子メールテンプレートヘッダー – デフォルトテンプレートを読み込む {width="600" modal="regular"}

  4. Load Template​をクリックします。

    テンプレートのHTML コードと変数がフォームに表示されます。

手順2: テンプレートのカスタマイズ

  1. カスタムヘッダーの​ Template Name ​を入力します。

  2. テンプレートを整理するために​ Template Subject ​を入力してください。

    グリッドでは、テンプレートのリストを​ Subject ​列で並べ替え、フィルタリングできます。

    ​ メールテンプレートヘッダー情報 {width="600" modal="regular"}

  3. Template Content ボックスで、必要に応じてHTMLを変更します。

    note
    NOTE
    テンプレートコードで作業する場合は、二重括弧で囲まれたものを上書きしないように注意してください。
  4. 変数を挿入するには、変数を配置するコード内にカーソルを置き、Insert Variable​をクリックします。

  5. 挿入する変数を選択します。

    ​ ヘッダーテンプレート – 変数を挿入 {width="600" modal="regular"}

    変数を選択すると、その変数の​ マークアップタグ ​がコードに挿入されます。

    Store Email Address変数は、ヘッダーに最もよく含まれる変数ですが、任意のシステムのコードまたは​ カスタム変数をテンプレートに直接入力できます。

  6. CSSの宣言が必要な場合は、Template Styles ボックスにスタイルを入力します。

  7. 作業をレビューする準備ができたら、Preview Template​をクリックします。

    テンプレートに必要な変更を加えます。

  8. 完了したら、Save Template​をクリックします。

    カスタムヘッダーが、使用可能なメールテンプレートのリストに表示されるようになりました。

手順3: 設定の更新

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

  2. グリッドで、設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. 下にスクロールして、Transactional Emails セクションの 拡張セレクター を展開します。

  4. メール通知のデフォルトとして使用される​ Header Template ​を選択します。

  5. 完了したら、Save Config​をクリックします。

​ トランザクションメールデザイン設定 – ヘッダーテンプレート ​ {width="600" modal="regular"}

フッターテンプレート

メールテンプレートフッターには、メールメッセージのクロージング行と署名行が含まれます。 スタイルに合わせてクロージングを変更し、会社名や名前の下の住所などの追加情報を追加できます。

手順1: デフォルトテンプレートの読み込み

  1. 管理者 サイドバーで、Marketing > Communications>Email Templates​に移動します。

  2. Add New Template​をクリックします。

  3. Load default template セクションで、Template セレクターをクリックし、Magento_Email > Footerを選択します。

  4. Load Template​をクリックします。

    テンプレートのHTML コードと変数がフォームに表示されます。

手順2: テンプレートのカスタマイズとプレビュー

  1. カスタムフッターの​ Template Name ​を入力します。

  2. テンプレートを整理するために​ Template Subject ​を入力してください。

    グリッドでは、テンプレートを​ Subject ​列で並べ替え、フィルタリングできます。

    電子メールテンプレートフッター – 情報 {width="600" modal="regular"}

  3. Template Content ボックスで、必要に応じてHTMLを変更します。

    note
    NOTE
    テンプレートコードで作業する場合は、二重括弧で囲まれたものを上書きしないように注意してください。
  4. 変数を挿入するには、変数を配置するコード内にカーソルを置き、Insert Variable​をクリックします。

  5. 挿入する変数を選択します。

    変数を選択すると、その変数の​ マークアップタグ ​がコードに挿入されます。

    Store Contact変数は、フッターに最もよく含まれる変数ですが、任意のシステムのコードまたは​ カスタム変数をテンプレートに直接入力できます。

  6. CSSの宣言が必要な場合は、Template Styles ボックスにスタイルを入力します。

手順3: 設定の更新

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

  2. グリッドで、設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. 下にスクロールして、Transactional Emails セクションの 拡張セレクター を展開します。

  4. メール通知のデフォルトのフッターとして使用される​ Footer Template ​を選択します。

  5. 完了したら、Save Config​をクリックします。

​ トランザクションメールデザイン設定 – フッターテンプレート ​ {width="600" modal="regular"}

メッセージテンプレート

各メッセージの本文をカスタマイズするプロセスは、ヘッダーまたはフッターをカスタマイズするプロセスと同じです。 唯一の違いは、通知をトリガーする各アクティビティまたはイベントのメッセージテンプレートです。 テンプレートをそのまま使用することも、声やブランドに合わせてカスタマイズすることもできます。 テンプレートテキストに加えて、テンプレートに作成して組み込むことができる、許可される定義済み変数と​ カスタム ​変数の幅広い選択があります。

手順1: デフォルトテンプレートの読み込み

  1. 管理者 サイドバーで、Marketing > Communications>Email Templates​に移動します。

  2. Add New Template​をクリックします。

    電子メールテンプレート – デフォルトテンプレートを読み込む {width="600" modal="regular"}

  3. 次の操作を行います。

    • Load default template​で、カスタマイズする​ Template ​を選択します。

    • Load Template​をクリックします。

手順2: テンプレートのカスタマイズ

  1. Template Name​に、カスタムテンプレートの名前を入力します。

  2. 必要に応じて、Template Subject​を変更します。

    これはメッセージの最初の行で、デフォルトでは挨拶です。 そのままにしておくことも、より説明的なものを入力することもできます。

  3. テンプレートへの​Currently Used For パス(設定の更新に使用するパス)をメモします。

    電子メールテンプレート – テンプレート情報 {width="600" modal="regular"}

  4. Template Content ボックスで、必要に応じてHTMLを変更します。

    コンテンツは、HTML タグ、CSS ディレクティブ、変数およびテキストの組み合わせで構成されます。

    note
    NOTE
    テンプレートコードで作業する場合は、誤ってダブルブレースで囲まれたコードを入力しないように注意してください。
  5. 変数を挿入するには、変数を表示するコード内にカーソルを置きます。

    変数の選択はテンプレートによって異なり、使用可能な場合は定義済み変数と​ カスタム ​変数が含まれます。

  6. Insert Variable​をクリックし、挿入する変数を選択します。

    変数を挿入するコマンドは、中括弧で囲まれ、カーソル位置のコードに追加されます。 例:

    customVar code=my_custom_variable

  7. CSS宣言を行うには、Template Styles​にスタイルを入力します。

    電子メールテンプレート – カスタムスタイルを追加 {width="600" modal="regular"}

    note
    NOTE
    カスタムスタイルは、{{template config_path="design/email/header_template"}}が​_Template Styles_​に存在する場合にのみ、メールに適用されます。 デフォルトのヘッダーテンプレートを使用せずにカスタム CSSを使用するには、<style> HTML タグ内でそれらを指定する必要があります。

手順3: 設定の更新

Currently Used For​のパンくずリストは、テンプレートが使用される場所を示します。 この例では、テンプレート設定は​Customer Configuration ページ、Create New Account Options​セクション、Default Welcome Email フィールドにあります。

  • ページ - Customer Configuration
  • セクション - Create New Account Options
  • フィールド - Default Welcome Email
  1. Currently Used For パンくずリストで、リンクをクリックしてテンプレート設定ページを開きます。

    現在の電子メールテンプレート ​ {width="600" modal="regular"}

  2. セクションの 拡張セレクター を展開し、カスタマイズした電子メールテンプレートのフィールドを見つけます。

  3. Use system value」チェックボックスをオフにして、カスタムテンプレートの名前をクリックします。

    お客様の設定 – デフォルトのウェルカムメールテンプレート ​ {width="600" modal="regular"}

  4. 完了したら、Save Config​をクリックします。

  5. ワークスペースの上部にあるメッセージで、Cache Management​をクリックし、無効なキャッシュをクリアします。

手順4: テンプレートのプレビューと保存

  1. 作業をレビューする準備ができたら、Preview Template​をクリックします。

  2. 必要に応じてテンプレートを更新します。

  3. 完了したら、Save Template​をクリックします。

    カスタムテンプレートがメールテンプレートのリストで使用できるようになりました。

recommendation-more-help
commerce-admin-help-systems