手動決済では通知メールをカスタマイズしたい
Shopifyでは、ユーザーが商品を購入した際に「注文の確認」メールが自動で配信される仕組みになっています。
このメールは自動で送られるのでたいへん便利なのですが、決済手段に「手動決済」を含めている場合は注意が必要です。手動決済とは、「銀行振り込み（Bank Deposit）」や、代引き決済（Cash on Delivery（COD））などを指します。
Shopifyでは「注文の確認」メールのあとは「配送情報通知」あるいは「フルフィルメントのリクエスト」に進むことがほとんどなので、決済にかかわる案内はこのタイミングしかありません。
銀行振り込みであれば銀行口座や入金期日をお知らせしたり、代引き決済であれば実際に商品購入した金額に加えて代引き手数料がかかることを伝える必要がありますが、その情報をプッシュで伝える方法は基本的にはメールのみです（SMS通知やLINEを使っている場合は除く）。なのでこの「注文の確認」メールのカスタマイズが必要になってきます。
決済に手動を挟まず Shop Pay や Amazon Pay などの即時決済に絞ってしまえば考慮することは少ないですが、決済手段を多様化する必要があるショップが多いのも事実です（メインが若年層なのでクレカ率が低い、法人購入が多く振り込みニーズが高い、など）。
liquidの壁
というわけで、カスタマイズする機会がそれなりにありそうなメール通知なのですが、、、Shopifyでは地味に鬼門で、いきなりliquidで編集しないといけないんです。。。これが初学者の壁になっています。
「通知メールの編集」と聞いたら、ふつうは「文章を書き直して、ロゴとかはドラッグ・アンド・ドロップで設定できるのかな？」って思うじゃないですか。実際は開いたらいきなりゴリッとコード編集の画面が現れます。なんやねん liquid変数って！
…とはいえ、Shopify をECプラットフォームに選んだ以上、これは避けて通れない道です。
もちろんアプリを使えばメールは比較的ラクに運用できますが、基本機能で自動化できるのであればそれに越したことはないですし、アプリはランニングコストもかかります。
というわけで、この記事では手動決済でもliquidの編集で乗り切る方法を考えてみたいと思います。
※対象は「通知 ＞ 注文の確認」です
※メールはバージョン管理ができないので、変更する際に必ずバックアップをとってください！
共通部分をカスタマイズする
メールの件名変更
まずはメールを開封してもらわないといけないので、メールの件名に手を入れてみます。
たとえば「注文の確認」メールのデフォルト件名は「ご注文内容の確認 注文番号：#xxxx」です。受信トレイという雑踏の中に埋もれてしまいそうなサブジェクトですね。どのショップからのメールなのか判断できないですし、ややもするとスパムに見えなくもありません。
というわけで、以下のように書き換えます。
変更後
【ショップ名】 ご注文内容の確認 - オーダーNo：{{name}}件名にショップ名が入っていると安心なので冒頭に入れています。あと、デフォルトだと「注文」という単語が近接しているのでちょっと変えてみました。このあたりはお好みでよいかと思います。
メールの本文タイトル変更
つづいて本文のタイトルを変更します。最初に大きなフォントで強調表示される文です。
通常、ここのソースは {% capture email_title %}ご購入いただきありがとうございました! {% endcapture %} となっています。このままでも特に問題ないといえばないですが、開封して最初に目に入る文章なので工夫してもいいかもしれません。
私は（チョー細かいのですが）「ありがとうございました!」の「!」だけが小文字なのがいかにも翻訳っぽくて違和感を覚えてしまうタイプなので、大文字「！」に変えています。あと「いただき」はあってもなくても通じるので、カジュアルなお店であればトルします。
変更後
{% capture email_title %}ご購入ありがとうございました！ {% endcapture %} 通常配送時の本文の変更
さて、共通部分で重要なのはこちらです。
今回は決済別の分岐（特に銀行振込の場合）は入金する購入金額と隣接していたほうがいいだろうという判断で、メールの下部にある決済方法のプロックで表現するつもりです。
ですので、冒頭で通常配送が選択された場合の表現は、なるべく決済方法別の案内があることを示唆するべきだと思います。
一方で、たとえばクレジットカードでの決済が多ければ銀行振込は余分な情報ですので、なるべくシンプルに収めたいところです。
というわけで、以下のような表現にしてみました。
変更後
{% case delivery_method %}
{% when 'pick-up' %}
注文の受取の準備が整うと、メールが届きます。
{% when 'local' %}
{{ customer.last_name }}様、ご注文の品を配達する準備を行っております。
{% else %}
{{ customer.last_name }}様、ご注文の商品は現在発送準備を行なっております。発送されましたらメールにてお知らせいたします。<br />なお、銀行振り込みをご選択の場合はご入金後の発送となりますので、本メールの末尾にございます金融機関まで●日以内にお振込みください。どうぞよろしくお願いいたします。
{% endcase %}↑前半のcase文は店舗受け取りやローカルデリバリーかどうかの分岐なので、通常配送の場合は {% else %} 以下が実行されます。多くは通常配送だという前提で、銀行振込のときだけ末尾を確認してね、という感じでさらっとまとめました。
代引きは通常配送と同様に発送が先になるのと、支払総額が他の決済とは違うので敢えて冒頭では含めないことにしています。
ほかにも直したいところはありますが、一旦はこれくらいできれば共通部分はOKでしょう！
決済方法別に分岐をつくる
決済方法ごとの分岐はメールの下部で案内します。以下の記述より下の部分が該当します。
変更前
<h4>配送方法</h4>ここも冒頭で「トランザクションがうまくいっているか」、「決済はクレジットカードかどうか」を聞いていますので、クレジットカードじゃなかった場合に何を記述するか、という分岐のところに銀行振り込みや代引きの記載をしていきます。
具体的には以下のところです。
変更前
{% else %}
<p class="customer-info__item-content">
{{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>
</p>
{% endif %}↑最初の {% else %} はクレジットカードじゃなかった場合、という意味です。その後、決済手段の表示名を吐き出し、その後決済された購入金額を強調表示しています。ここで決済別に表現が変えられるとよさそうですね。
分岐をつくるには「銀行振り込み（Bank Deposit）」と、代引き決済（Cash on Delivery（COD））の振り分けが必要なのですが、ここで元のソースで使われている transaction.gateway_display_name を条件にすると、Shopify側の表示名（たまにしれっと翻訳されていたりする）に分岐が依存してしまい、万が一仕様変更があっても気づくのが難しくなるので、直接の値 transaction.gateway を条件にしましょう。
具体的には以下のような感じです。
変更後
{% if transaction.gateway == "Bank Deposit" %}
銀行振込 — <strong>{{ transaction.amount | money }}</strong>
<p>代金は以下の銀行口座へお振込みをお願いいたします。<br />なお、振り込み手数料はお客さまのご負担にてお願い申し上げます。<br />
●●銀行 ▲▲支店 普通 1111111 カ）リワイア</p>
{% elsif transaction.gateway == "Cash on Delivery (COD)" %}
代引き — <strong>{{ transaction.amount | money }}</strong>
<p>配送ごとに●●円の手数料がかかります。合計金額に代引き手数料を加算した金額を配達員にお支払いくださいませ。</p>
{% else %}
{{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>
{% endif %}
これで、銀行振込が選択された場合は銀行口座の案内を、代引きが選択された場合は総額に手数料が加わる旨が案内できました。それぞれの案内は金額のすぐあとに記載されるので、お客さんが迷うことも少ないのではと思います。
（おまけ）困っているマーチャントは多そう
実際のコーディングに入る前に、似たような質問ってフォーラムに挙がってないのかなと思い調べてみました。これ、みんな困っているんじゃないかなーと。
…ありました。
参考リンク：
最初の質問が2017年なので割と古いですが、その時のShopify側の以下の回答がきっかけでちょっと荒れていますね。。。
You could add a general message for customers saying something like ”If you have chosen to bank with a bank deposit, please reply to this email for further instructions for payment.” This way you won’t be sending the details to everyone who has made an order.
Currently it’s not possible to have a specific email template based on a customer’s payment method but it would also be safer just to give the banking details to only the customers that require them to pay.
「もし銀行振込を選択された場合は、このメールにご返信いただき支払いのご案内をご確認ください」といった一般的なメッセージを追加できます。この方法であれば、口座情報のような詳細な案内をすべてのユーザーに送信しなくて済みます。
現在、支払い方法にもとづいて個別のメールテンプレートを作成することはできませんが、対応が必要なお客さまのみに銀行口座を案内する方が安全な方法です。
https://community.shopify.com/c/Payments-Shipping-Fulfillment/Email-notification-to-customer-with-bank-information/td-p/286766
まあ、気持ちはわかります。大事な注文確認テンプレート自体が雑なのは否めないですね。
かといって多くの人はまず変更しない箇所でもあるので、下手にテンプレ化して事故になるのも嫌ですし、Shopify としても難しいところなのかもしれません。
いずれにせよ、こちらで少しでも決済時のストレスが減らせれば幸いです！
