ドキュメントCommerce管理システムガイド

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

Last update: Fri May 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 初心者
  • 中級
  • 管理者
  • リーダー

Commerceには、システムから送信される各メッセージの本文セクション用のデフォルトのメールテンプレートが含まれています。 本文コンテンツのテンプレートは、ヘッダーテンプレートおよびフッターテンプレートと組み合わせて、完全なメッセージを作成します。 コンテンツはHTMLと CSS で書式設定されており、を使用して簡単に編集およびカスタマイズできます 変数 および ウィジェット. メールテンプレートは、web サイト、ストアまたはストア表示ごとにカスタマイズできます。 カスタムテンプレートを使用している場合は、必ず次を更新します システム設定 を使用して、正しいテンプレートが使用されていることを確認します。

例 – ウェルカムメールのプレビュー

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

メールテンプレート

テンプレート情報

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

ヘッダーテンプレート

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

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

  1. 日 Admin サイドバー、に移動 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. 日 Admin サイドバー、に移動 Content > Design>Configuration.

  2. グリッドで、設定するストア表示を見つけて、クリックします Edit が含まれる Action ​列。

  3. 下にスクロールして展開 展開セレクター この Transactional Emails セクション。

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

  5. 完了したら、 Save Config.

トランザクションメールデザイン設定 – ヘッダーテンプレート

フッターテンプレート

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

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

  1. 日 Admin サイドバー、に移動 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. 日 Admin サイドバー、に移動 Content > Design>Configuration.

  2. グリッドで、設定するストア表示を見つけて、クリックします Edit が含まれる Action ​列。

  3. 下にスクロールして展開 展開セレクター この Transactional Emails セクション。

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

  5. 完了したら、 Save Config.

トランザクションメールデザイン設定 – フッターテンプレート

メッセージテンプレート

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

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

  1. 日 Admin サイドバー、に移動 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. 変数を挿入するには、コード内の変数を表示する位置にカーソルを置きます。

    変数の選択はテンプレートによって異なり、許可されている変数が含まれます 定義済み および custom 変数（使用可能な場合）。

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

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

    customVar code=my_custom_variable

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

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

    note 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 パンくずリストのリンクをクリックして、テンプレート設定ページを開きます。

    現在の E メール テンプレート {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