メール通知のテンプレートをカスタマイズする

このページはOct 14, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/fulfillment/setup/notifications/customizing-notification-templateをご覧ください。

ストアには、管理画面の [通知] セクションでアクセスできる複数の通知テンプレートがあります。

ロゴを追加するか、同時にすべてのテンプレートの配色を変更することにより、メール通知を編集できます。また、メール通知のコンテンツを個別に編集することもできます。

メール通知の本文と件名の見出しを編集する前に、差出人メールアドレスを確認する必要があります。

SMSテンプレートの詳細については、「SMS通知」を参照してください。

目次

メールテンプレートにロゴを追加する

デスクトップ
  1. 管理画面から、[設定] > [通知] に移動します。
  2. [お客様通知] をクリックします。
  3. [メールテンプレートをカスタマイズする] をクリックします。
  4. [ファイルを選択] をクリックしてロゴを見つけ、アップロードして追加します。
iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[通知] をタップします。
  3. [お客様通知] をタップします。
  4. [メールテンプレートをカスタマイズする] をタップします。
  5. [ファイルを選択] をタップしてロゴを見つけ、アップロードして追加します。
Android
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[通知] をタップします。
  3. [お客様通知] をタップします。
  4. [メールテンプレートをカスタマイズする] をタップします。
  5. [ファイルを選択] をタップしてロゴを見つけ、アップロードして追加します。

メールテンプレートのカラーを選択する

デスクトップ
  1. 管理画面から、[設定] > [通知] に移動します。
  2. [お客様通知] をクリックします。
  3. [メールテンプレートをカスタマイズする] をクリックします。
  4. カラーコードを入力する、またはカラーピッカーをクリックして、メールのアクセントカラーを変更します。
iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[通知] をタップします。
  3. [お客様通知] をタップします。
  4. [メールテンプレートをカスタマイズする] をタップします。
  5. カラーコードを入力するか、カラーピッカーでカラーを選択して、メールのアクセントカラーを変更します。
Android
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[通知] をタップします。
  3. [お客様通知] をタップします。
  4. [メールテンプレートをカスタマイズする] をタップします。
  5. カラーコードを入力するか、カラーピッカーでカラーを選択して、メールのアクセントカラーを変更します。

メールテンプレートの言語を変更する

メールテンプレートが表示されるデフォルトの言語は、テーマの言語とテンプレートに対する編集内容によって異なります。

  • メールテンプレートに変更を加えていない場合は、テーマの言語を変更すると、メールテンプレートの言語も変更されます。
  • メールテンプレートの本文とタイトルの両方を変更した場合は、テーマの言語を変更してもメールテンプレートの言語は変更されません。
  • メールテンプレートのタイトルのみを変更した場合は、テーマの言語を変更してもメールテンプレートの言語は変更されません。
  • メールテンプレートの本文のみを変更した場合、テーマの言語を変更してもタイトルは新しい言語に変更されますが、メールテンプレートの本文の言語は変更されません。

特定のメールテンプレートを編集する

手順

デスクトップ
  1. 管理画面から、[設定] > [通知] に移動します。
  2. [お客様通知] をクリックします。
  3. 変更する通知の名前をクリックします。
  4. メールの件名フィールドとメールメッセージの本文を編集します。
  5. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[通知] をタップします。
  3. [お客様通知] をタップします。
  4. 変更する通知の名前をタップします。
  5. メールの件名フィールドとメールメッセージの本文を編集します。
  6. [保存] をタップします。
Android
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[通知] をタップします。
  3. [お客様通知] をタップします。
  4. 変更する通知の名前をタップします。
  5. メールの件名フィールドとメールメッセージの本文を編集します。
  6. [保存] をタップします。

変更をテストする

通知テンプレートをカスタマイズした後、管理画面で変更点をプレビューするか、メールを送信してお客様に実際にどのように表示されるかを確認できます。

手順

  1. 通知をプレビューするには、[アクション] > [プレビュー] の順に移動します。
  2. 変更内容に問題がない場合は、プレビューウィンドウを閉じて [保存] をクリックします。
  3. テストメールとして通知を送信するには、[アクション] > [テストメールを送信する] の順にクリックします。そうすることによって、管理画面にログインする際に使用したアカウントにメールが送信されます。

請求書に税登録番号を追加する

一部の国や地域では、お客様の請求書や他の通知で税務登録番号を含める必要があります。オーストラリア、カナダ、インドの商品サービス税 (GST) を請求するビジネスでは、その登録番号を含める必要があります。欧州連合では、付加価値税 (VAT) 識別番号を含める必要があります。

税理士または政府当局に確認して、番号を含める必要があるかどうかを確かめてください。

メール通知で番号を表示するには、次の手順を実行してください。

  1. 編集する特定のメールテンプレートを開きます。
  2. メール本文 (HTML)エリアの、適切なロケーションに登録または識別番号を入力します。出力時に適切なフォーマットとなるようにHTMLを含めます。
  3. 任意：カスタマイズが正しく表示されていることを確認するには、変更をプレビューしてください。
  4. [保存] をクリックします。

次の例では、ストアオーナーが、[注文の確認] 通知にあるストアのロゴの後に、以下のように住所と税番号を追加しました。

  <table class="row">
    <tr>
      <td class="shop-name_cell">
        {%- if shop.email_logo_url %}
          <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
          <p>150 Elgin St, Ottawa K2P 1L4 GST# 123456789</p>
        {%- else %}
          <h1 class="shop-name_text">
            <a href="{{shop.url}}">{{ shop.name }}</a>
          </h1>
        {%- endif %}

または、Shopify アプリストアから請求書アプリを購入してダウンロードすることもできます。請求書アプリを使用すると、請求書に税番号を含めることができます。

注文の確認と注文の返金のテンプレートに関税項目を追加する

関税と輸入税を徴収する場合は、通知メールに関税の項目が含まれていることを確認し、お客様が関税の支払い記録を保存できるようにしてください。

デフォルトのテンプレートを [注文の確認] と [注文の返金] のメールテンプレートとして使用している場合、メールは自動的に更新され、関税項目が含まれるようになります。変更をする必要はありません。

[注文の確認] と [注文の返金] のメールテンプレートをカスタマイズした場合、関税項目を追加するために、以下のコードをメールテンプレートに追加してください。

{% if current_total_duties %}

<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>Duties</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ current_total_duties | money }}</strong>
 </td>
</tr>

{% endif %}

注文の請求書に決済期間を追加する

注文の支払い期日となる日付を、決済期間として明記します。

[注文の請求書] メールテンプレートをカスタマイズした場合、以下のコードをメールテンプレートに追加するとフルフィルメント期限を含む支払期日を追加できます。

{% assign due_date = payment_terms.next_payment.due_at | default: nil %}

{% if payment_terms.type == 'receipt' and due_date == nil %}
   {% assign due_date = 'now' %}
{% endif %}

{% if payment_terms.type == 'fulfillment' and payment_terms.next_payment.due_at == nil % }
  <h2> Payment of {{ order.total_outstanding | money }} is due on fulfillment </h2>
{% else %}
  <h2>Payment of {{ order.total_outstanding | money }} is due {{ due_date | date: format: 'date' }}</h2>
{% endif %}

メールテンプレートに決済期間の名前を表示するには、以下の手順を実行します。

 1. 以下のセクションを見つけます。

{% if shipping_address or billing_address or shipping_method %}

 2. ステップ3のコードを以下のコードに置き換えます。

 {% if shipping_address or billing_address or shipping_method or payment_terms %}

 3. [メール本文 (HTML)] エリアで、適切なロケーションに決済期間の名前を入力します。

  {% if payment_terms %}
    <td class="customer-info__item">
      <h4>Payment</h4>
      <p> Terms: {{ payment_terms.name }} </p>
    </td>
  {% endif %}

 4. [保存] をクリックします。

次の例では、ストアオーナーが顧客情報セクションのshipping_methodの後に決済期間を追加しました。

例

詳細については、payment_termsに関するLiquidのリファレンスをご覧ください。

通知にカスタムメッセージを追加する

次のような場合、通知にカスタムメッセージを追加することができます。

  • チェックアウト離脱
  • お客様に連絡する
  • お客様の有効化
  • 下書き注文の請求書

手順

  1. テキストフィールドにカスタムメッセージを入力します。
  2. [メールをプレビュー] をクリックします。
  3. メッセージが正しく表示されていることを確認し、[戻る] をクリックして変更します。
  4. 準備ができたら、[通知を送信] をクリックします。

インラインCSSを使用したスタイルメールテンプレート

インラインCSSを使用して、標準スタイルシートを上書きし、メールテンプレートのスタイルを設定することができます。標準スタイルシートは<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">です。テンプレートエディタのテンプレートには自動的にスタイルタグがインライン展開されます。ここにメディアクエリを保存し、迅速かつ簡単にメールを作成することができます。外部のスタイルシートやテーマアセットの組み込まれたアップロード済みのスタイルシートはインライン展開されません。そのためCSSをデザインする際は、テンプレートの<head>部分に<style>タグを含めることをおすすめします。

プレーンテキストのメールの自動変換

HTMLのメールテンプレートは、表示する際にこのバージョンを必要とするメールクライアント (Apple Watchのメールなど) 向けに、プレーンテキストに変換されます。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す