Shopify 通知テンプレートのカスタマイズ方法
概要
Shopifyでは商品の購入時や発送時に自動で送信してくれる通知テンプレートがあります。
しかしテンプレートはShopify特有のLiquidファイルが使用されており、カスタマイズが少し難しいです。
そこで本記事ではカスタマイズの方法からよくあるカスタマイズ例をご紹介します。
通知テンプレートの種類
通知テンプレートは以下の種類があります。
■注文管理
・注文の確認
・注文の編集
・注文の請求書
・注文がキャンセルされたとき
・注文の支払い領収書
・注文の返金
・下書き注文の請求書
・チェックアウト離脱
・支払いエラー
・保留中の決済エラー
・保留中の決済の処理に成功しました
・支払いリマインダー
■配送
・フルフィルメントのリクエスト
・配送情報通知
・配送状況の更新
・配達中
・配達済み
■ローカルデリバリー
・ローカル注文が配達中です
・ローカル注文が配達済みです
・ローカル注文の未配達です
■店舗受取
・受取の準備完了
・店頭受取済み
■お客様
・お客様アカウントの招待
・お客様アカウントへの挨拶
・お客様アカウントのパスワードのリセット
・お客様による決済方法更新のリクエスト
・お客様による決済方法復元のリクエスト
・B2Bアクセスメール
・お客様への連絡
■ギフトカード
・ギフトカードが発行されました
・ギフトカードの確認
■Eメールマーケティング
・お客様マーケティングの確認
■返品
・返品の返品用ラベル/追跡
・注文の返品用ラベル
・返品リクエストの確認
・返品リクエストが承認されました
・返品リクエストが拒否されました
カスタマイズ方法
1.設定を開き「通知」を選択
2.カスタマイズしたいテンプレートをクリック
3.画面右上にあるコードを編集をクリック
4.コードを編集
コード
Liquidファイルが主に使用されており、最低でもHTMLの知識が必要になってきます。
通知テンプレート専用の変数も用意されており各変数の説明は公式が説明してくれているので興味がある方は見てみて下さい。
基本的に触るのは以下コードの変数以下の<!DOCTYPE html>から始まる文章を触ります。
----------- 変数 -------------
{% capture email_title %}
{% if has_pending_payment %}
ご注文頂きありがとうございました。
{% else %}
ご購入頂きありがとうございました！
{% endif %}
{% endcapture %}
{% capture email_body %}
{% if has_pending_payment %}
{% if buyer_action_required %}
支払い完了後、確認メールが届きます。
{% else %}
決済が処理されています。注文が確認されるとメールが届きます。
{% endif %}
{% else %}
{% if requires_shipping %}
{% case delivery_method %}
{% when 'pick-up' %}
注文の受取の準備が整うと、メールが届きます。
{% when 'local' %}
{{ customer.last_name }}様、ご注文の品を配達する準備を行っております。
{% else %}
注文の発送準備を行なっております。商品を発送いたしましたら、改めてお知らせいたします。
{% endcase %}
{% if delivery_instructions != blank %}
<p><b>配達情報:</b> {{ delivery_instructions }}</p>
{% endif %}
{% if consolidated_estimated_delivery_time %}
<p>
配達予定 <b>{{ consolidated_estimated_delivery_time }}</b>
</p>
{% endif %}
{% endif %}
{% endif %}
{% assign gift_card_line_items = line_items | where: "gift_card" %}
{% assign found_gift_card_with_recipient_email = false %}
{% for line_item in gift_card_line_items %}
{% if line_item.properties["__shopify_send_gift_card_to_recipient"] and line_item.properties["Recipient email"] %}
{% assign found_gift_card_with_recipient_email = true %}
{% break %}
{% endif %}
{% endfor %}
{% if found_gift_card_with_recipient_email %}
<p>ギフトカードの受取人には、ギフトカードコードが記載されたメールが届きます。</p>
{% elsif gift_card_line_items.first %}
<p>ギフトカードの個別のメールが届きます。</p>
{% endif %}
{% endcapture %}
----------- /変数 -------------
<!DOCTYPE html>
<html lang="ja">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<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 }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>
<td>
<tr>
<td class="order-number__cell">
<span class="order-number__text">
注文 {{ order_name }}
</span>
</td>
</tr>
{%- if po_number %}
<tr>
<td class="po-number__cell">
<span class="po-number__text">
注文書番号 #{{ po_number }}
</span>
</td>
</tr>
{%- endif %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
------------- 以下省略 -----------------
よくあるカスタマイズ例
例１：類似語統一
shopifyでは「配送」「配達」「発送」と似たような意味をもつテキストが使用されています。
これを統一したい場合は置換機能を使用した方が効率よくカスタマイズできます。
■手順
カスタマイズしたいテンプレートを選択します。
cmd + f （macの場合）で以下画像赤枠のようなものが出てきます。
この「追跡」欄に置換したいテキストを記載し「Replace」欄に置換後のテキストを記載します。
あとは「replace all」ボタンを押すことで置換が完了します。
（変換したくない箇所があれば一つ一つ「replace」ボタンを押していくことをおすすめします。）
これを各テンプレートで行うことでカスタマイズすることができます。
■例2：配送業者テキスト
「配送情報通知」テンプレートは追跡番号と配送業者を注文管理で記載した時に使用されるテンプレートです。
注文管理画面側の配送業者セレクトボックスでは「ヤマト宅急便」「佐川急便」など日本語で表記されていますが、通知メールでは「Yamato(JA)」「Sagawa (JA)」というように英語表記になってしまいます。
多少強引ではありますが、英語表記を回避する方法を説明します。
■手順
「配送情報通知」テンプレートの130行目にある以下コードを
{{ fulfillment.tracking_company }} 追跡番号:
<a href="{{ fulfillment.tracking_url }}">
{{ fulfillment.tracking_numbers.first }}
</a>
こちらに変更することで対応できます。
{%assign tracking_company_jp = fulfillment.tracking_company %}
{%if fulfillment.tracking_company == 'Yamato (JA)' %}
{%assign tracking_company_jp = "ヤマト宅急便" %}
{%endif%}
{{ tracking_company_jp }} 追跡番号:
<a href="{{ fulfillment.tracking_url }}">
{{ fulfillment.tracking_numbers.first }}
</a>
他の配送行者も対応したい場合は
以下の様にelsifを追加してください。
{%assign tracking_company_jp = fulfillment.tracking_company %}
{%if fulfillment.tracking_company == 'Yamato (JA)' %}
{%assign tracking_company_jp = "ヤマト宅急便" %}
{% elsif fulfillment.tracking_company == 'Sagawa (JA)' %}
{%assign tracking_company_jp = "佐川急便" %}
{%endif%}
{{ tracking_company_jp }} 追跡番号:
<a href="{{ fulfillment.tracking_url }}">
{{ fulfillment.tracking_numbers.first }}
</a>
まとめ
いかがでしたでしょうか？通知テンプレートはliquidファイルの知識がないと触りにくい箇所ですが、カスタマイズの要望が多いです。
覚えてしまえば比較的に簡単なテキスト変更等ができるので是非試してみてください。
Discussion