メールテンプレートのカスタマイズ
Commerceには、システムによって送信される各メッセージの本文セクションのデフォルトのメールテンプレートが含まれています。 本文コンテンツのテンプレートとヘッダーおよびフッターのテンプレートを組み合わせて、メッセージ全体を作成します。 コンテンツはHTMLとCSSでフォーマットされ、変数を追加して簡単に編集およびカスタマイズできます。 メールテンプレートは、web サイト、実店舗、実店舗の顧客像ごとにカスタマイズできます。 カスタムテンプレートを使用する場合は、必ず システム設定を更新して、正しいテンプレートが使用されるようにしてください。 電子メールテンプレートをカスタマイズする際に条件文を使用する方法については、開発者ドキュメント を参照してください。
デフォルトのテンプレートにはロゴとストア情報が含まれており、それ以上カスタマイズしなくても使用できます。 ただし、ベストプラクティスとして、各テンプレートを表示し、必要な変更を加えてから顧客に送信する必要があります。
テンプレート情報
ヘッダーテンプレート
設定を完了すると、メールヘッダーテンプレートにストアにリンクされたロゴが含まれます。 HTMLに関する基本的な知識があれば、定義済みの変数を使用して、ストアの連絡先情報を簡単にヘッダーに追加できます。
手順1: デフォルトテンプレートの読み込み
-
管理者 サイドバーで、Marketing > Communications>Email Templatesに移動します。
-
Add New Templateをクリックします。
-
Load default template セクションで、Template セレクターをクリックし、
Magento_Email>Headerを選択します。 {width="600" modal="regular"}
-
Load Templateをクリックします。
テンプレートのHTML コードと変数がフォームに表示されます。
手順2: テンプレートのカスタマイズ
-
カスタムヘッダーの Template Name を入力します。
-
テンプレートを整理するために Template Subject を入力してください。
グリッドでは、テンプレートのリストを Subject 列で並べ替え、フィルタリングできます。
{width="600" modal="regular"}
-
Template Content ボックスで、必要に応じてHTMLを変更します。
note NOTE テンプレートコードで作業する場合は、二重括弧で囲まれたものを上書きしないように注意してください。 -
変数を挿入するには、変数を配置するコード内にカーソルを置き、Insert Variableをクリックします。
-
挿入する変数を選択します。
{width="600" modal="regular"}
変数を選択すると、その変数の マークアップタグ がコードに挿入されます。
Store Email Address変数は、ヘッダーに最もよく含まれる変数ですが、任意のシステムのコードまたは カスタム変数をテンプレートに直接入力できます。
-
CSSの宣言が必要な場合は、Template Styles ボックスにスタイルを入力します。
-
作業をレビューする準備ができたら、Preview Templateをクリックします。
テンプレートに必要な変更を加えます。
-
完了したら、Save Templateをクリックします。
カスタムヘッダーが、使用可能なメールテンプレートのリストに表示されるようになりました。
手順3: 設定の更新
-
管理者 サイドバーで、Content > Design>Configurationに移動します。
-
グリッドで、設定するストアビューを見つけ、Action列の Edit をクリックします。
-
下にスクロールして、Transactional Emails セクションの
を展開します。
-
メール通知のデフォルトとして使用される Header Template を選択します。
-
完了したら、Save Configをクリックします。
フッターテンプレート
メールテンプレートフッターには、メールメッセージのクロージング行と署名行が含まれます。 スタイルに合わせてクロージングを変更し、会社名や名前の下の住所などの追加情報を追加できます。
手順1: デフォルトテンプレートの読み込み
-
管理者 サイドバーで、Marketing > Communications>Email Templatesに移動します。
-
Add New Templateをクリックします。
-
Load default template セクションで、Template セレクターをクリックし、
Magento_Email>Footerを選択します。 -
Load Templateをクリックします。
テンプレートのHTML コードと変数がフォームに表示されます。
手順2: テンプレートのカスタマイズとプレビュー
-
カスタムフッターの Template Name を入力します。
-
テンプレートを整理するために Template Subject を入力してください。
グリッドでは、テンプレートを Subject 列で並べ替え、フィルタリングできます。
{width="600" modal="regular"}
-
Template Content ボックスで、必要に応じてHTMLを変更します。
note NOTE テンプレートコードで作業する場合は、二重括弧で囲まれたものを上書きしないように注意してください。 -
変数を挿入するには、変数を配置するコード内にカーソルを置き、Insert Variableをクリックします。
-
挿入する変数を選択します。
変数を選択すると、その変数の マークアップタグ がコードに挿入されます。
Store Contact変数は、フッターに最もよく含まれる変数ですが、任意のシステムのコードまたは カスタム変数をテンプレートに直接入力できます。
-
CSSの宣言が必要な場合は、Template Styles ボックスにスタイルを入力します。
手順3: 設定の更新
-
管理者 サイドバーで、Content > Design>Configurationに移動します。
-
グリッドで、設定するストアビューを見つけ、Action列の Edit をクリックします。
-
下にスクロールして、Transactional Emails セクションの
を展開します。
-
メール通知のデフォルトのフッターとして使用される Footer Template を選択します。
-
完了したら、Save Configをクリックします。
メッセージテンプレート
各メッセージの本文をカスタマイズするプロセスは、ヘッダーまたはフッターをカスタマイズするプロセスと同じです。 唯一の違いは、通知をトリガーする各アクティビティまたはイベントのメッセージテンプレートです。 テンプレートをそのまま使用することも、声やブランドに合わせてカスタマイズすることもできます。 テンプレートテキストに加えて、テンプレートに作成して組み込むことができる、許可される定義済み変数と カスタム 変数の幅広い選択があります。
手順1: デフォルトテンプレートの読み込み
-
管理者 サイドバーで、Marketing > Communications>Email Templatesに移動します。
-
Add New Templateをクリックします。
{width="600" modal="regular"}
-
次の操作を行います。
-
Load default templateで、カスタマイズする Template を選択します。
-
Load Templateをクリックします。
-
手順2: テンプレートのカスタマイズ
-
Template Nameに、カスタムテンプレートの名前を入力します。
-
必要に応じて、Template Subjectを変更します。
これはメッセージの最初の行で、デフォルトでは挨拶です。 そのままにしておくことも、より説明的なものを入力することもできます。
-
テンプレートへのCurrently Used For パス(設定の更新に使用するパス)をメモします。
{width="600" modal="regular"}
-
Template Content ボックスで、必要に応じてHTMLを変更します。
コンテンツは、HTML タグ、CSS ディレクティブ、変数およびテキストの組み合わせで構成されます。
note NOTE テンプレートコードで作業する場合は、誤ってダブルブレースで囲まれたコードを入力しないように注意してください。 -
変数を挿入するには、変数を表示するコード内にカーソルを置きます。
-
Insert Variableをクリックし、挿入する変数を選択します。
変数を挿入するコマンドは、中括弧で囲まれ、カーソル位置のコードに追加されます。 例:
customVar code=my_custom_variable -
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
-
Currently Used For パンくずリストで、リンクをクリックしてテンプレート設定ページを開きます。
{width="600" modal="regular"}
-
セクションの
を展開し、カスタマイズした電子メールテンプレートのフィールドを見つけます。
-
「Use system value」チェックボックスをオフにして、カスタムテンプレートの名前をクリックします。
{width="600" modal="regular"}
-
完了したら、Save Configをクリックします。
-
ワークスペースの上部にあるメッセージで、Cache Managementをクリックし、無効なキャッシュをクリアします。
手順4: テンプレートのプレビューと保存
-
作業をレビューする準備ができたら、Preview Templateをクリックします。
-
必要に応じてテンプレートを更新します。
-
完了したら、Save Templateをクリックします。
カスタムテンプレートがメールテンプレートのリストで使用できるようになりました。