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

Commerceには、システムから送信される各メッセージの本文セクション用のデフォルトのメールテンプレートが含まれています。 本文コンテンツのテンプレートは、ヘッダーテンプレートおよびフッターテンプレートと組み合わせて、完全なメッセージを作成します。 コンテンツはHTMLと CSS で書式設定されており、variables を追加することで、簡単に編集およびカスタマイズできます。 メールテンプレートは、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
    NOTE
    テンプレートコードを使用する場合は、二重中括弧で囲まれているものを上書きしないように注意してください。
  4. 変数を挿入するには、コード内の変数を配置する位置にカーソルを置き、Insert Variable をクリックします。

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

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

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

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

  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
    NOTE
    テンプレートコードを使用する場合は、二重中括弧で囲まれているものを上書きしないように注意してください。
  4. 変数を挿入するには、コード内の変数を配置する位置にカーソルを置き、Insert Variable をクリックします。

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

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

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

  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
    NOTE
    テンプレートコードを操作する場合は、二重中括弧で囲まれたコードを誤って入力しないように注意してください。
  5. 変数を挿入するには、コード内の変数を表示する位置にカーソルを置きます。

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

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

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

    customVar code=my_custom_variable

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

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

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

手順 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
d3c62084-5181-43fb-bba6-1feb2fcc3ec1