通知メールに領収書への導線を作る方法

【シンプル領収書】通知メールに領収書への導線を作る方法

  • 軽減税率対応

  • シンプル

  • ＄4.99/月

【シンプル領収書】通知メールに領収書への導線を作る方法

アプリの特徴

  • 軽減税率対応
  • 導入しやすい$4.99/月
  • もちろん日本語に対応
  • シンプルで無駄な機能なし
  • 余計な機能がないので設定が簡単
  • デザイナー監修のきれいな書式

※注意
「新しいお客様アカウント」対応。
「従来のお客様アカウント」には一部対応。（テーマ「Dawn/Rise/Studio」対応済み）

Shopifyでは注文があるとお客様に「注文の確認」メールが届きます。このメールに、領収書などの書類を開くボタンを追加する方法です。下のコードをコピーして貼り付けるだけです。

この記事でわかること

  • 注文確認メールに貼り付けるコード
  • コードを貼り付ける場所
  • 必要な書類だけボタンを出す方法
  • 確認のしかたと、お支払い前の注文での表示
  • 英語の書類にする方法

操作する場所：Shopify管理画面 → 設定 → 通知 → お客様への通知 → 注文の確認

アプリの「Home」にある「設定ガイド」のステップ3の「メール設定ガイド」を押すと、この記事が開きます。同じステップの「注文確認メールを開く」を押すと、Shopifyの「通知」の一覧が開きます。

設定ガイドのステップ3


まず、使うコードを選ぶ

貼り付けるコードは2種類あります。次のどれにしたいかで選んでください。

  • 領収書・納品書・請求書・見積書の4つのボタンをすべて出す：「コードA」を使います。
  • 領収書のボタンだけを出す：「コードB」を使います。
  • それ以外の組み合わせにする：「コードA」を貼り付けたあと、いらない書類の <td class="saku-action-cell_button"> から </td> までの3行を消します。

コードA（4種類のボタン）

領収書・納品書・請求書・見積書の4つのボタンを表示するコードです。

<style>
  .saku-button__text {
    display: block;
    color: #000;
    background: #f0f0f0;
    padding: 20px 10px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
  }
  .saku-action-cell {
    margin-top: 20px;
    width: 100%;
  }
  .saku-action-cell_button {
    padding: 4px;
  }
</style>
<table class="saku-action-cell">
  <tr>
    <td class="saku-action-cell_button">
      <a href="{{ shop.url }}/apps/saku-print?orderId={{ id }}&confirmationNo={{ confirmation_number }}&type=receipt&locale=ja" class="saku-button__text">領収書</a>
    </td>
    <td class="saku-action-cell_button">
      <a href="{{ shop.url }}/apps/saku-print?orderId={{ id }}&confirmationNo={{ confirmation_number }}&type=delivery_note&locale=ja" class="saku-button__text">納品書</a>
    </td>
    <td class="saku-action-cell_button">
      <a href="{{ shop.url }}/apps/saku-print?orderId={{ id }}&confirmationNo={{ confirmation_number }}&type=invoice&locale=ja" class="saku-button__text">請求書</a>
    </td>
    <td class="saku-action-cell_button">
      <a href="{{ shop.url }}/apps/saku-print?orderId={{ id }}&confirmationNo={{ confirmation_number }}&type=quotation&locale=ja" class="saku-button__text">見積書</a>
    </td>
  </tr>
</table>

コードB（領収書のボタンだけ）

「領収書」だけを表示するコードです。

<style>
  .saku-button__text {
    display: block;
    color: #000;
    background: #f0f0f0;
    padding: 20px 10px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
  }
  .saku-action-cell {
    margin-top: 20px;
    width: 100%;
  }
  .saku-action-cell_button {
    padding: 4px;
  }
</style>
<table class="saku-action-cell">
  <tr>
    <td class="saku-action-cell_button">
      <a href="{{ shop.url }}/apps/saku-print?orderId={{ id }}&confirmationNo={{ confirmation_number }}&type=receipt&locale=ja" class="saku-button__text">領収書</a>
    </td>
  </tr>
</table>


1️⃣ 注文確認メールの編集画面を開く

Shopify管理画面の「設定」→「通知」→「お客様への通知」を開きます。

Shopifyの通知設定

一覧の中の「注文の確認」をクリックします。

お客様通知の注文の確認

プレビュー画面が開いたら、右上の「コードを編集」を押します。

注文の確認メールのプレビュー（追加前）


2️⃣ コードを貼り付ける

  1. 上のコードA（またはコードB）をコピーします。コード枠の内容をすべて選んで、cmd + C（Windowsは Ctrl + C）でコピーします。
  2. 編集画面のコードの中をクリックし、cmd + F（Windowsは Ctrl + F）で「ショップにアクセスする」を検索します。4か所ほど見つかります。Enterキーで次へ進み、一番下の1か所に移ります。
  3. その行から少し下に、{% endif %} と書かれた行が2行続けて出てきます。2行目の {% endif %} の次の行をクリックして、カーソルを置きます。
  4. cmd + V（Ctrl + V）で貼り付けます。
  5. 画面の上の「保存」を押します。

貼り付ける位置のイメージです（実際には、この前後にほかのコードもあります）。

{% endif %}
{% endif %}
← ここに、コピーしたコードを貼り付けます

注文確認メールのコードに貼り付けた状態


3️⃣ 表示を確認する

右上の「プレビュー」を押して、「ショップにアクセスする」の下に書類のボタンが並んでいることを確認します。

注文確認メールに書類ボタンが追加されたプレビュー

ボタンを押したときの動作は、実際の注文の確認メールで確認してください。テスト注文をして、届いた「注文の確認」メールのボタンを押し、書類のページが開くことを確認します。

※「プレビュー」や「テストメールを送信」で届くメールは、サンプルの注文で作られます。サンプルの注文は実際には存在しないため、ボタンを押しても書類が開かず、「注文が見つかりませんでした。」と表示されることがあります。


設定後のメールの表示

お客様に届く「注文の確認」メールの「ショップにアクセスする」の下に、領収書などのボタンが表示されます。ボタンを押すと、ログインしていなくても、その注文の書類が開きます（注文IDと確認番号が一致した場合だけ表示されます）。

  • 銀行振込・代金引換など、まだお支払いが済んでいない注文では、「領収書」「納品書」を押すと「支払いが完了していない注文です。」と表示されます。「請求書」「見積書」は表示できます。
  • 英語の書類にしたいときは、コードの中の locale=ja を locale=en に変えます（lang=en でも同じです）。以前のコードにある locale= も、そのまま使えます。

お支払い前の注文の扱いは、「代金引換・銀行振込の注文で領収書を発行する方法」をご覧ください。

お客様が書類をダウンロードできる場所は「注文状況ページ」「サンクスページ」「注文確認メール」の3つです。あわせて設定すると便利です：注文状況ページ／サンクスページ／注文確認メール

うまくいかないとき

  • ボタンが表示されない
    貼り付けた場所が違うかもしれません。「ショップにアクセスする」を検索して、一番下の1か所に移り、その少し下にある2行続きの {% endif %} の、2行目の次の行に貼り付けてください。貼り付けたあとに「保存」を押したかも確認してください。
  • 「ショップにアクセスする」が検索で見つからない
    メールの文面を変えている場合は、表示が違うことがあります。「ショップにアクセス」まで短くして検索してみてください。それでも見つからないときは、info@saku-apps.com までお問い合わせください。
  • ボタンを押すと「注文が見つかりませんでした。」と表示される
    「テストメールを送信」で届くメールは、サンプルの注文で作られているため、書類は開けません。実際のテスト注文の「注文の確認」メールで、確認してください。
  • ボタンを押すと「ログインが必要です。再度ログインしてください。」と表示される
    コードの confirmationNo={{ confirmation_number }} の部分が抜けているか、書き換わっている可能性があります。この記事のコードを、もう一度コピーして貼り付けてください。
  • 古いコードの locale=ja のままでよいか知りたい
    そのままで使えます。locale= と lang= のどちらでも言語を指定できます。
  • 他社のメールアプリで送りたい
    「他社メールアプリにて注文確認メールを送信する方法」をご覧ください。

※2026年2月18日更新：以前は通知メールから注文詳細ページへの導線を作っていましたが、追加開発により、通知メールのボタンから直接書類を開けるようになりました。
Read more