テクニック

Shopify注文確認メールのカスタマイズ|SNSリンクの追加方法と実装コード

この記事の対象: Shopifyでストアを運営していて、購入後の接点を増やしたい事業者・制作担当者
読了時間: 約12分

注文確認メールは、ストアが送るメールの中でも開かれやすい一通です。買った直後で、金額と届く日を確かめたい状態の人が開くので、当然といえば当然です。にもかかわらず、初期設定のまま何年も運用されているストアは珍しくありません。ロゴすら入っていないメールが、いちばん読まれる場所を占め続けている状態です。

ここでは、Shopifyの通知テンプレートをどこまで触れるのか、SNSへの導線をどう足すのか、そして「足すと嫌がられるもの」の線引きまでを、実装コード込みで整理します。触るのは管理画面の設定 → 通知だけで、テーマファイルには一切手を入れません。


Shopifyの注文確認メールはどこまでカスタマイズできるのか

Shopifyの注文確認メールはどこまでカスタマイズできるのか

触れる場所は2階層に分かれている

Shopifyの通知まわりは、「全体の見た目」と「テンプレートごとの中身」で編集する場所が違います。ここを混同すると、直したつもりの箇所が反映されずに時間を溶かすことになります。

Shopify通知のカスタマイズ階層

設定 → 通知 →「ブランディングをカスタマイズ」

  • ロゴ画像とサイズ
  • アクセントカラー
  • 全テンプレート共通で反映

設定 → 通知 → 個別テンプレート → コードを編集

  • HTMLとLiquidを直接編集
  • SNSリンクなどの追記はここ
  • テンプレート単位で独立

設定 → 通知 → 送信者メールアドレス

ロゴと色は上から、それ以外の追記は下から。混ざらない。

ロゴと基調色だけで済む要件なら、上の「ブランディングをカスタマイズ」で完結します。コードを触る必要はありません。逆に、SNSリンクや自由なテキストブロックを足したいなら、下のテンプレート編集に降りる必要があります。

管理画面の構成はShopify側の更新で変わることがあります。メニュー名が記事と一致しないときは、通知(Notifications)の設定画面内で「ブランディング」と「テンプレートのコード編集」という2つの入口を探してください。役割の分かれ方自体は変わっていません。

編集できるのは通知テンプレートのHTML全体

「コードを編集」を開くと、HTMLメールのソースがまるごと表示されます。table組みの、いわゆるメール用HTMLです。Liquidも書けますが、テーマのLiquidとは使えるオブジェクトが違います。

使える 使えない・注意が必要
order オブジェクト(注文番号、明細、住所、金額) product の全プロパティ(メタフィールドは制限あり)
shop.name shop.url shop.email セクション、スニペット、{% render %}
customer.first_name など顧客情報 テーマのCSSファイル(読み込まれない)
if / for / unless などの制御構文 外部JavaScript(メールクライアントが実行しない)
<style> タグ内のCSS(ただし対応はクライアント依存) Web用の最新CSS(Grid、カスタムプロパティ等)

ここを取り違えると「テーマでは動いたのにメールでは出ない」で止まります。通知テンプレートはテーマとは別世界、と最初に割り切っておくのが早いです。

使えるオブジェクトとプロパティの正確な一覧は、Shopifyの通知テンプレート向けリファレンスに載っています。凝った出し分けをする前に、そこで対象のプロパティが通知で使えるかを確認してから書き始めるほうが早いです。テーマ用のリファレンスを見て書くと、通知では空になるプロパティを踏みます。

編集前に必ずやること

コードを触る前に、元のテンプレートをテキストファイルにコピーして保存してください。管理画面には「デフォルトに戻す」ボタンがあり、それを押せば初期状態には戻せます。ただし戻るのはShopifyの初期状態であって、あなたが途中まで作った状態ではありません。数時間かけた調整が一発で消えます。

保存の仕方は、テンプレートごとに1ファイルで十分です。order_confirmation_original.html のように、テンプレート名と「編集前」が分かる名前を付けておきます。複数人で運用しているストアなら、共有ドライブに置いて日付を入れておくと、誰がいつの状態に戻したいのかで揉めません。

「戻せると思っていたら戻せなかった」は、通知テンプレートを触る人が一度は踏むところです。テンプレート編集に入る前のコピーは、儀式として固定しておくのが結局いちばん安く済みます。


SNSリンクを注文確認メールに追加する実装手順

SNSリンクを注文確認メールに追加する実装手順

手順の全体像

SNSリンク追加の作業フロー
元テンプレートを退避コード全文をローカルに保存する
挿入位置を決める明細とフッターの間を探す
コードを貼るtable組みでSNSブロックを追加
テスト送信PCとスマホの実機で確認

コードを貼る作業自体は短時間で終わります。時間がかかるのは4番目の確認で、ここを飛ばすと「iPhoneだけ崩れている」に後から気づくことになります。

挿入位置をどこにするか

注文確認メールの本文は、上からおおむね次の順で並んでいます。

  1. ロゴ・見出し(「ご注文ありがとうございます」)
  2. 注文番号と日付
  3. 商品明細と金額
  4. 配送先住所・支払い方法
  5. フッター(ストア名・問い合わせ先)

SNSリンクを置くなら、4と5の間が基本です。理由は単純で、読者が確認したい情報(何がいくらで、どこに届くか)を全部読み終えたあとだからです。冒頭やロゴのすぐ下に置くと、注文内容の確認を邪魔します。買った直後に「Instagramをフォロー」と言われても、先に届け先を確認したい。

コード上では </table> が何度も出てくるので、目印を探します。多くのテンプレートでは、住所ブロックの後に以下のようなコメントや構造があります。

<!-- この付近を探す -->
<table class="row footer">

この footer の直前に挿入します。テンプレートのバージョンによって多少構造が違うので、footer で検索して最初にヒットした箇所の上、と覚えておくと外しません。クラス名が違う場合は、ストア名や問い合わせ先の文言({{ shop.name }} など)で検索すると、フッターの入口が見つかります。

コピペで動くSNSリンクブロック

以下は、テキストリンク型のシンプルな実装です。画像を使わないので、画像ブロックされる環境でも確実に表示されます。

<table class="row" style="width:100%; border-collapse:collapse;">
  <tr>
    <td style="padding:24px 0; border-top:1px solid #e5e5e5; text-align:center;">
      <p style="margin:0 0 12px; font-size:14px; color:#666666; line-height:1.6;">
        商品の使い方や新入荷の情報を発信しています
      </p>
      <p style="margin:0; font-size:14px; line-height:1.8;">
        <a href="https://www.instagram.com/【アカウント名】/"
           style="color:#1a1a1a; text-decoration:underline; padding:0 8px;">Instagram</a>
        <span style="color:#cccccc;">|</span>
        <a href="https://www.tiktok.com/@【アカウント名】"
           style="color:#1a1a1a; text-decoration:underline; padding:0 8px;">TikTok</a>
        <span style="color:#cccccc;">|</span>
        <a href="https://lin.ee/【ID】"
           style="color:#1a1a1a; text-decoration:underline; padding:0 8px;">LINE</a>
      </p>
    </td>
  </tr>
</table>

なぜこう書くのかを分解します。

  • style を直接タグに書いている:メールクライアントによっては <head> 内の <style> が無視されたり、部分的にしか解釈されなかったりします。インラインスタイルにしておけば、どこで開かれても崩れにくくなります
  • table で組んでいる:Outlookの一部バージョンはWord由来のレンダリングエンジンを使っており、divflex のレイアウトが再現されません。table組みは古臭く見えますが、メールでは現役の正解です
  • border-collapse:collapse を入れている:入れないと環境によってセル間に余分な隙間が出ます
  • リンクに padding:0 8px を入れている:スマホでの指のタップ領域を広げるためです。文字だけだと隣のリンクを誤タップします
  • text-decoration:underline を残している:メール本文では下線がないとリンクだと認識されにくく、色だけの判別はダークモードで崩れます
  • 区切りの |span で挟んでいる:リンクの中に入れるとタップ領域に含まれてしまい、区切り文字を押しただけでSNSが開きます

文言の「商品の使い方や新入荷の情報を発信しています」の部分は、そのまま使わずにストアの実態に合わせて書き換えてください。フォローする理由が書いていないリンクは、ただの並んだ文字列になります。何が流れてくるアカウントなのかが一行あるだけで、押す理由が生まれます。

アイコン画像を使いたい場合

ブランドの世界観を優先してアイコンで並べたいときは、次の形になります。

<table class="row" style="width:100%; border-collapse:collapse;">
  <tr>
    <td style="padding:24px 0; border-top:1px solid #e5e5e5; text-align:center;">
      <p style="margin:0 0 16px; font-size:14px; color:#666666;">
        SNSでも発信しています
      </p>
      <a href="https://www.instagram.com/【アカウント名】/"
         style="display:inline-block; padding:0 10px;">
        <img src="https://cdn.shopify.com/s/files/1/xxxx/instagram.png"
             width="28" height="28" alt="Instagram"
             style="display:block; border:0;">
      </a>
      <a href="https://www.tiktok.com/@【アカウント名】"
         style="display:inline-block; padding:0 10px;">
        <img src="https://cdn.shopify.com/s/files/1/xxxx/tiktok.png"
             width="28" height="28" alt="TikTok"
             style="display:block; border:0;">
      </a>
    </td>
  </tr>
</table>

つまずきやすい点が4つあります。

  1. 画像は必ずShopifyの「設定 → ファイル」にアップロードしてCDNのURLを使う。ローカルパスやテーマのアセットパスは通知メールから参照できません
  2. widthheight を属性としても書く。Outlookは属性値を見るため、CSSだけだと意図しない大きさで表示されます
  3. alt を必ず入れる。画像を自動表示しない設定の受信者には、alt のテキストだけが見えます。ここが空だとリンクの存在自体が消えます
  4. display:blockborder:0 を画像に付ける。付けないと画像の下に余白が出たり、リンク色の枠線が回り込んだりします

アイコン画像は、表示サイズの2倍程度で書き出しておくと高解像度ディスプレイでぼやけません。28px四方で表示するなら56px四方で用意し、width / height の属性は28のままにします。

画像ブロックのリスクを考えると、テキストリンク型のほうが実務では安定します。アイコンにするなら、alt を「Instagram」のようにサービス名で書いておくのが最低限の保険です。ロゴやアイコンを使う場合は、各SNSが公開しているブランドガイドラインの範囲内で使ってください。色や形を勝手に変えた自作アイコンは、認識されにくくなるうえに規約の面でも安全ではありません。

Liquidで条件分岐させる

初回購入者とリピーターで文面を変えたいときは、customer.orders_count が使えます。

{% if customer.orders_count == 1 %}
  <p style="margin:0 0 12px; font-size:14px; color:#666666;">
    はじめてのご注文ありがとうございます。SNSで使い方を発信しています
  </p>
{% else %}
  <p style="margin:0 0 12px; font-size:14px; color:#666666;">
    いつもありがとうございます。新入荷はSNSでお知らせしています
  </p>
{% endif %}

ゲスト購入(アカウントを作らない購入)では顧客オブジェクトの中身が期待通りに入らないことがあります。条件分岐を使うなら、ゲスト購入時にどちらの文面が出るのかを必ずテスト注文で確かめてください。分岐の外側に既定の文面を置いておくと、どちらにも該当しなかったときに空白のブロックだけが残る事故を防げます。

ただし、この分岐を入れると検証すべきパターンが2倍になります。文面を出し分ける価値があるかを先に決めてから書いてください。「できるからやる」で分岐を増やすと、あとで文言を直したい人が2箇所直し忘れます。運用する人が自分ではないなら、なおさら分岐は減らす方向で設計したほうがいいです。


スマホでの見え方とテスト送信のやり方

スマホでの見え方とテスト送信のやり方

テスト送信の手順

テンプレート編集画面から「テストメールを送信」を実行できます。届く先は、管理画面にログインしているアカウントのメールアドレスです。任意のアドレスを指定する欄はないので、複数端末で見たいときはメール転送設定を使うか、そのアドレスをスマホでも受信できる状態にしておきます。

テストメールにはダミーの注文データが入ります。商品名や金額は実在のものではありませんが、レイアウトの確認には十分です。

確認する端末の優先順位は次の通りです。

優先度 環境 理由
最優先 iPhoneのメールアプリ スマホで開かれる前提の確認
最優先 Gmailアプリ(Android/iOS) <style> の解釈が独特で崩れやすい
次点 PCのGmail(ブラウザ) 管理側が見る環境。ここだけで判断しない
余裕があれば Outlook(デスクトップ版) 法人向け商材なら必須

PCのブラウザでGmailを開いて確認して終わり、というやり方が一番危険です。スマホで見ると横幅が足りず、SNSリンクが2行に折り返して間延びしている、というのがよくある失敗です。

ストアの購入者がどの環境でメールを開いているかは、ストアごとに違います。法人相手ならOutlookの比率が上がり、若い層向けのD2CならスマホのGmailやiPhoneのメールアプリに偏ります。上の表は一般的な優先順位なので、自分のストアの顧客層に合わせて順番を入れ替えてください。

ダークモードで消える問題

メールアプリのダークモード対応は、クライアントごとにバラバラです。背景を暗く反転させるものもあれば、指定した背景色をそのまま残すものもあります。同じ端末でも、アプリを変えると結果が変わります。

対策として現実的なのは、極端に薄い色を使わないことです。

  • リンクの文字色に #1a1a1a のような濃い色を使う(反転しても読める)
  • 白背景に白文字に近い配色を作らない
  • 罫線は #e5e5e5 程度にとどめ、これより薄くしない
  • ロゴは背景透過PNGにし、白背景前提の画像を使わない
  • 背景色を指定するセルには、必ず文字色もセットで指定する(片方だけ反転して読めなくなるのを防ぐ)

完全にコントロールしようとすると prefers-color-scheme のメディアクエリを書くことになりますが、対応するクライアントが限られるうえ検証コストが跳ね上がります。濃い色で組んで、どちらでも読める状態を作るほうが、費用対効果は高いです。確認は、端末側の設定をダークモードに切り替えて同じテストメールを開き直すだけで足ります。

実際の注文で確認する

テストメールで整ったら、最後に自分で1件テスト注文を通してください。Shopifyの「テスト注文」機能(Bogus Gatewayを使う方法)でも構いませんし、少額の商品を実際に買って返金しても構いません。

テストメールと実注文では、以下が変わります。

  • 商品名の長さ(長い商品名で折り返しが起きる)
  • 複数商品・複数バリエーションの表示
  • 割引コード適用時の行の増え方
  • 配送方法の名称の長さ
  • 顧客名や住所の長さ(長い住所で1行が伸びる)

商品名が長いストアだと、テストメールでは綺麗だったのに実注文でレイアウトが崩れる、ということが起きます。いちばん長い商品名で一度確認する、を作業に組み込んでおくと安全です。ギフト配送やのし対応など、注文時に追加情報が入る運用をしているなら、その注文でも一度確認しておきます。追加された行がSNSブロックと隣接して窮屈になることがあります。


何を足すと嫌がられるのか|線引きの判断軸

何を足すと嫌がられるのか|線引きの判断軸

ここが本題です。注文確認メールは開かれやすいぶん、入れすぎると一気に信頼を落とす場所でもあります。

注文確認メールに足してよいもの・避けるもの

足してよい

  • SNSアカウントへのリンク
  • 問い合わせ窓口・営業時間
  • 発送までの目安日数
  • 返品・交換の条件へのリンク
  • 使い方ガイドやFAQへの導線

避けたほうがよい

  • 大きなセールバナー
  • 「今なら〇%OFF」のクーポン訴求
  • レビュー依頼(このメールでは早い)
  • 関連商品のレコメンド枠
  • メルマガ登録の再訴求

分けている基準は「買った人の不安を減らすか、次の購入を急かすか」の一点です。

「買ったばかりの人」が何を考えているか

注文確認メールを開く瞬間の関心は、ほぼ3つに絞られます。

  1. ちゃんと注文が通ったか
  2. 金額は合っているか
  3. いつ届くのか

この3つに答えることが最優先で、それ以外は付け足しです。SNSリンクが許容されるのは、「このお店をもっと知りたい」という気持ちの受け皿であって、購入を促す枠ではないからです。逆にクーポンやセール訴求は、買った直後の人に「もっと安く買えたのでは」と思わせるリスクがあります。「昨日買ったのに翌日セールの案内が来た」という状況が問い合わせにつながるのは、EC運営では起こりがちな事故です。

もうひとつ、この分け方には運用上の利点があります。不安を減らす情報は、書き換える頻度が低い。営業時間も返品条件もSNSのアカウントも、一度書けば当分そのままです。逆に販促の要素は、期間が終わるたびに直さなければならず、直し忘れたまま「終了したセール」の案内が新規注文者に届き続けます。静的な情報だけを置くという判断は、そのまま運用事故の予防にもなります。

レビュー依頼を入れてはいけない理由

注文確認メールにレビュー依頼を入れているストアをたまに見かけますが、この時点ではまだ商品が手元にありません。使っていないものにレビューは書けないので、単純に機能しません。レビュー依頼は配送完了から数日後に送るのが筋で、それは別のメール(配送完了通知や、マーケティングメール)の仕事です。

こういう「置く場所を間違えた導線」は、効果が出ないだけでなく、メールそのものが読み飛ばされる原因になります。一度「このストアのメールは広告」と分類されると、本当に読んでほしい配送遅延の連絡まで開かれなくなります。注文確認メールを情報の器として保っておくことは、後で緊急の連絡を届けるための余力を残しておくことでもあります。

情報量の上限をどこに置くか

実務的な目安として、注文内容以外の追記は本文の3割までに抑えるのが無難です。スクロールしてやっと注文内容にたどり着く、という状態になったら明らかに入れすぎです。

上限を先に決めておかないと、追記は際限なく膨らみます。「SNSも」「LINEも」「よくある質問も」「今度のイベントも」と足す提案はいくらでも出てくるので、通知メールに手を入れるときは「足せるか」ではなく「削れる要素はないか」から考えるほうが、結果的にまとまります。

判断に迷ったら、次の質問に置き換えてください。この一行が無かったとき、購入者は困るか。 困らないなら、それは注文確認メールの仕事ではありません。別のメールか、サイト側のページに置く内容です。


アプリで足すか、テンプレートを直接直すか

アプリで足すか、テンプレートを直接直すか

直接編集で足りるケース

ここまで紹介した内容——SNSリンク、問い合わせ先、発送目安、FAQへのリンク——は、すべてテンプレートの直接編集で完結します。アプリは要りません。

判断の線引きはこうなります。

要件 直接編集で足りる アプリ・別実装が必要
SNSリンクを並べたい
ロゴと色を合わせたい ○(ブランディング設定)
発送目安を固定文で入れたい
顧客の購入回数で文面を変える ○(Liquidの分岐)
デザインをGUIで編集したい
購入後◯日にステップメールを送る
商品カテゴリ別に内容を出し分ける 条件次第
送信結果を分析・A/Bテストしたい

Shopifyアプリストアには、通知メールをドラッグ&ドロップで編集できるものや、メールマーケティングと統合されたものがあります。最新の料金は各アプリのページで確認してください(料金体系もプラン名も変わります)。

アプリを選ぶときに見る箇所

導入を検討するなら、機能一覧より先に次の4つを見ます。

  • 最終更新日:長く更新されていないアプリは、Shopify側の仕様変更で突然壊れる可能性があります
  • 日本語対応:管理画面が英語でも運用できるかは、触る人が誰かで決まります。自分だけが触るのか、クライアントの担当者が毎月触るのかで判断が変わります
  • 解約したときに何が残るか:アプリが挿入していたブロックが消えて、通知メールが初期状態に戻る場合があります。解約前提で構成を確認しておく
  • 既存のテンプレートとの共存:自分で書き足したコードが、アプリ導入時に上書きされないか

4つ目は特に見落とされます。手で書き足したSNSブロックが、アプリの管理下に置かれた瞬間に消えることがあります。アプリを入れる前にテンプレートを退避しておく理由は、ここにもあります。

月額の積み上がりを意識する

アプリは1つなら安く見えますが、レビュー・ポイント・定期購入・メール・配送日時指定と積み上がると、固定費が毎月効いてきます。SNSリンク1本のために月額を払うのは、率直に言って割に合いません。

一方で、ステップメールの配信設計や配信結果の分析まで必要なら、自前実装は現実的ではありません。「一度書いたら変えない静的な情報」は直接編集、「送信タイミングと結果測定が要るもの」はアプリ、という切り分けが実務では機能します。

判断の軸は、機能の優劣ではなく触る頻度です。年に1回しか直さない箇所に月額を払い続けるのは重い。逆に、毎月データを見て改善する領域なら、アプリの月額は妥当なコストになります。実装に手間をかけるか月額を払うかは、その箇所を何回触るかで決まります。

Shopifyをコーポレートサイトと兼用する構成なら、通知メールもブランドの一部として設計対象に入ります。その考え方は下の記事にまとめています。

テーマ側でどこまで踏み込めるかを先に把握しておきたいなら、Shopifyでできないこと|依頼前に知るカスタマイズの限界 も合わせて確認しておくと、通知メールに限らず全体の設計判断がしやすくなります。ベースにするテーマの選定については Shopifyテーマの選び方|無料・有料・オリジナルの判断基準 が参考になります。


通知メール全体を見直すなら、どこから手をつけるか

通知メール全体を見直すなら、どこから手をつけるか

注文確認メールを直すと、他の通知テンプレートの古さが目につくようになります。Shopifyには多数の通知テンプレートがありますが、全部を直す必要はありません。

優先順位は送信数で決めます。

  1. 注文確認:全注文で必ず送られる。最優先
  2. 発送完了:追跡番号を待っている人が開く。注文確認と並んで開かれやすい
  3. 配達完了:レビュー依頼を入れるならここ
  4. 注文キャンセル・返金:件数は少ないが、不安な状態の人が読む。文面の丁寧さが効く
  5. カート放棄:マーケティング寄り。設計の考え方が他と違う

上から3つを整えれば、送信数の大半をカバーできます。残りは、必要になったタイミングで手をつければ十分です。

作業を効率よく進めるなら、SNSブロックのHTMLは1つ作って使い回します。注文確認・発送完了・配達完了は、フッター直前という挿入位置も同じなので、同じコードをそのまま貼れます。ただし、リード文だけはテンプレートごとに変えたほうが自然です。発送完了なら「到着までの間に、使い方をSNSで紹介しています」のように、そのメールを開いた状況に合わせます。

キャンセル・返金の通知は件数が少ないぶん後回しにされがちですが、読む人の心理状態がいちばん悪いメールです。ここが事務的すぎると、それだけでストアの印象が決まります。件数が少ないからこそ、文面を丁寧に整える価値があります。なお、このメールにSNSリンクを足すのは勧めません。返金の連絡と一緒にフォローを求められると、間が悪いだけです。

構築費用全体の中で通知メールの調整がどう扱われるかは、Shopify構築費用の相場|コストの全体像と比較の判断軸 に構造として整理してあります。通知メールの調整だけを単体で外注するケースは少なく、テーマ実装や初期設定の中に含まれることが多い領域です。見積で個別に立っていないときは、含まれているのか対象外なのかを着手前に確認しておくと揉めません。

【画像挿入: Shopify管理画面の「設定 → 通知」画面と、テンプレート一覧のスクリーンショット】


よくある質問

よくある質問

Shopifyの注文確認メールにHTMLを追加しても、Shopifyのアップデートで消えますか?

編集したテンプレートは保持されるため、Shopify側のアップデートで自動的に上書きされることはありません。ただし、Shopifyが新しいデフォルトテンプレートを提供した場合、編集済みのテンプレートには反映されません。手動で「デフォルトに戻す」を押した場合のみ、編集内容が失われます。

注文確認メールのテンプレートを編集すると、テーマにも影響しますか?

影響しません。通知テンプレートはテーマファイルとは別管理で、設定 → 通知の中だけで完結します。テーマを変更しても、通知テンプレートの編集内容はそのまま残ります。逆に、テーマのCSSは通知メールに読み込まれないため、スタイルはインラインで書く必要があります。

テストメールを自分以外のアドレスに送ることはできますか?

Shopifyの標準機能では、テストメールはログイン中の管理者アカウントのメールアドレスに送信されます。別アドレスで確認したい場合は、そのアドレスをスタッフとして招待するか、受信したメールを転送して確認します。実機で確認したいときは、スマホでも同じアドレスを受信できるようにしておくのが手軽です。

注文確認メールにクーポンコードを入れるのは効果がありますか?

購入直後の顧客に割引を提示すると、「もっと待てば安く買えた」という印象を与えるリスクがあります。次回購入の促進が目的なら、配送完了後や一定期間後のメールで送るほうが適切です。注文確認メールは、注文内容の確認と不安の解消に集中させるほうが結果的に信頼につながります。

SNSリンクは何個まで入れてよいですか?

3つ程度までが目安です。スマホの画面幅では、テキストリンクを4つ以上並べると折り返しが起きて見た目が崩れます。運用しているアカウントすべてを並べるより、いちばん更新頻度が高く、見てほしいものに絞るほうが結果的にクリックされます。

SNSリンクのクリック数は計測できますか?

リンクにUTMパラメータを付けておけば、遷移先のアクセス解析で流入元として確認できます。ただしメール内での開封やクリックそのものを計測したい場合は、計測機能を持つメール配信アプリが必要です。テンプレートの直接編集だけでは、メール側の指標は取れません。


まとめ

注文確認メールのカスタマイズは、Shopifyの中では作業量の小さい部類に入ります。設定 → 通知からテンプレートを開き、フッターの直前にtable組みのブロックを足す。それだけで、いちばん読まれるメールにブランドの導線が入ります。

判断が必要なのは、コードではなく何を足すかのほうです。

  • 買った人の不安を減らすもの(問い合わせ先、発送目安、SNS)は足してよい
  • 次の購入を急かすもの(セール、クーポン、レコメンド)は別のメールに回す
  • 静的な情報は直接編集、タイミング制御と測定が要るならアプリ
  • 確認はPCブラウザだけで終わらせず、必ずスマホ実機で見る
  • 迷ったら「この一行が無いと購入者は困るか」で判断する

そして、編集前に元のテンプレートをコピーしておくこと。これだけは省略しないでください。