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

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

  • 軽減税率対応

  • シンプル

  • ＄3.99~/月

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

アプリの特徴

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

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

※2026年2月18日更新
以前は通知メールから注文詳細ページへの導線を作っていまいたが、追加開発により、通知メールから直接書式をダウンロードできるようになりました。

 

領収書などの書式は、お客様が商品を購入した時に、お客様へ届けたい方が多いかと思います。

Shopifyでは注文があった際に、お客様にメール通知が届くので、その通知メールに領収書等の書式への導線を作る方法をお伝えします。

方法は簡単。次のコードを通知メールにコピペするだけです！

<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&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=quote&locale=ja" class="saku-button__text">見積書</a>
    </td>
  </tr>
</table>

 

 

通知メールへの貼り付け方は以下。

1️⃣通知メール設定画面を開く

Shopify管理画面「設定」→「通知」→「お客様への通知」→「注文の確認」

 

2️⃣コードを編集

コードが書いている場所をクリックして「cmd + F」（windowsは「Ctrl + F」）で「ショップにアクセスする」で検索すると４つ記載場所があります。一番下の「ショップにアクセスする」の下あたりにある２つの {% endif %} の下にコードを記載。

コードは、記載する必要のない書式は、各対応部分の<td>~~~~~~~~~~~~</td>を削除してください。

⚠️一番シンプルな「領収書」のみを表示させるコードは以下です。

 <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>


 

3️⃣確認

「プレビュー」→「テストメールを送信」をクリックし、送られたメールのボタンをクリックし、注文一覧ページに遷移するか確認。

 

これで、通知メールに領収書への導線を作ることができました！

「購入ご通知メールからのダウンロード」
「サンクスページからのダウンロード」
「注文詳細ページからのダウンロード」
お客様側からダウンロードできる導線は３つ作成できます。お客様の利便性を上げるためにも、もう一つ設定が必要な「サンクスページからのダウンロード」の設定も忘れずにお願い致します。

 
Read more