ネットショップ構築

Order Priner 日本語領収書テンプレート無料(0.1.3)

  • このエントリーをはてなブックマークに追加
Order Priner 日本語領収書テンプレート無料(0.1.3)

Shopify請求書印刷定番アプリOrderPrinterに張り付けるだけで、文房具屋さんで売っているような請求書や領収書が印刷できる無料テンプレートを配布中です。

「Shopify Order Printer 日本語領収書テンプレート」は、本記事 Ver. 00.01.03(2021/08/14更新) が最新版になります。


請求書に「注文時メモ」を追加

「Shopifyで、日本語フォーマットの請求書や領収書を簡単に印刷できるようにしたい、できれば無料で、、、」をコンセプトとして提供している「Shopify Order Printer 日本語領収書テンプレート」をご愛用頂き、ありがとうございます。

今回、マーチャント様からご要望が多い「ストアへの特記事項(注文時におけるメモ)」 を請求書に表示(印刷)する機能を追加しました。

Shopifyアプリ「Order Printer」のテンプレートとして利用することで、以下のような請求書および領収書が簡単に利用できるようになりますので、是非一度、お試しください。

請求書および領収書の出力イメージ

出力される、請求書・領収書は、A4用紙サイズで、以下のようなデザイン、レイアウトになります。

Shopifyアプリorder_printer用、請求書/領収書テンプレート(ver.00.01.03)出力イメージ

利用方法

Order Prinerアプリをインストールして、以下の「 Shopify Order Printer 日本語領収書テンプレート 」コードを追加すれば、マーチャント様ご自身で簡単に領収書を印刷できるようになります。ぜひ一度チャレンジしてみて下さい。

Shopify OrderPrinter 日本語領収書テンプレート

<!-- 
  + 更新履歴 
  00.01.01 (2021.05.01) 初版作成
  00.01.02 (2021.05.25) 注文から商品を削除し数量が0になった場合、明細から該当商品を削除する処理追加
  00.01.03 (2021.08.14) 請求書:支払方法見出しのスタイル変更、および、ストアへの特記事項追加
 -->

<style>

  /* 発行日 */
  .kuscs_date {
    margin: 0; 
    text-align: right; 
    font-size:0.8em;
  }

  /* タイトル */
  .kuscs_title {
    width: 100%; 
    border-bottom:2px 
    solid #2768e2;
    margin: 0;
    padding: 0;
  }
  
  .kuscs_title h2 {
    text-align: center;
    font-size:1.2em;
    margin: 0;
    padding: 0;
  }
  
  /* 宛名 */
  .kuscs_name {
    font-size:1.2em;
    margin-top: 1em;
    text-align:left;
  }
  
  .kuscs_name span {
    font-size: 80%;
    margin-left: 1em;
  }

  /* 請求書 店舗情報 */
  .kuscs_shopinfo_R {
    width: 100%;
    padding-left: 70%;
  }
  
  .kuscs_shopinfo_R h2 {
    font-size: 1em; 
    margin: 0;
  }
  
  .kuscs_shopinfo_R p {
    font-size: 0.8em;
    margin: 0;
  }

  /* 請求金額・領収金額 */
  .kuscs_price {
    width: 50%;
    border-bottom: solid 2px #2768e2;
    background: #e0eefc;
    font-size: 0.5em;
    padding: 0.8em 0.3em;
    margin-top: 3em;
  }
  
  .kuscs_price span {
    font-size: 3.5em;
    font-weight: bold;
    padding: 0.3em;
    margin-left: 3em;
  }

  /* 請求明細 */
  .kuscs_detail table {
    border-radius: 10px;
    margin-top: 1em;
    margin-bottom:1em;
    width: 100%;
    border-collapse: collapse;
    border: solid 2px #2768e2;
  }
  
  .kuscs_detail table tr {
    padding: 1em 0.5em;
  }
  
  .kuscs_detail table th, .kuscs_detail table td {
    border: dashed 1px #2768e2;
  }
  
  .kuscs_detail th {
    font-size: 0.5em;
    background: #e0eefc;
    text-align: center;
  }

  .kuscs_detail td.kuscs_tdstr {
    text-align: left; 
    padding-left: 0.8em;
  }

  .kuscs_detail td.kuscs_tdnum {
    text-align: right;
    padding-right:0.3em;
  }

  /* 請求書その他ブロック(支払方法、ストアへの特記事項に利用) */
  .kuscs_inv_blk {
    border-bottom: solid 2px #2768e2;
    margin-top: 0.1em;
    padding: 0.4em;
  }

  .kuscs_inv_blk p {
    margin: 0;
  }

  .kuscs_inv_blk p.blktitle {
    font-size: 0.5em;
  }
  

  /* 切り取り線 */
  .kuscs_dotline {
    margin-bottom:1em; 
    margin-top:2em; 
    padding-top:1.5em; 
    border-top:1px dotted #e0eefc;
  }
  
  /* 領収書 */
  .kuscs_receipt {
    margin-top: 0em;
    width: 100%;
  }

  /* 但し書き */
  .kuscs_tadashigaki {
    width: 100%; 
    padding-left: 31%; 
    padding-right:3%;
  }

  .kuscs_tadashigaki p {
    font-size:0.8em;
  }

  .kuscs_shopinfo_L {
    width: 100%;
  }
  
  .kuscs_shopinfo_L h2 {
    font-size: 1em; 
    margin: 0;
  }
  
  .kuscs_shopinfo_L p {
    font-size: 0.8em;
    margin: 0;
  }
  
  /* 収入印紙 */
  .kuscs_stamp_box {
    margin-top: 1em;
    height: 27mm;
    width: 22mm;
    border-collapse: collapse;
    border-width: 1px;
    border: dashed 1px #2768e2;
  }

  .kuscs_stamp_box p {
    text-align: center; 
    font-size:0.8em;
  }
  
  </style>

  <!-- --------------------- -->
  <!-- 請求書 -->
  <!-- --------------------- -->
  
  <!-- 発行日 -->
  <p class="kuscs_date">発行日:{{ "now" | date: "%Y年%m月%d日" }}<br>No.{{ order_name }}</p>
  
  <!-- タイトル -->
  <div class="kuscs_title"><h2>ご 請 求 書</h2></div>
  
  <!-- 宛名 -->
  <h2 class="kuscs_name">{{ billing_address.last_name }} {{ billing_address.first_name }}<span>様</span></h2>
  
  <!-- ショップ情報 -->
  <div class="kuscs_shopinfo_R">
    <h2>{{ shop.name }}</h2>
    <p>〒{{ shop.zip | upcase }} {{ shop.city }}{{ shop.address }}</p> 
    <p>Tell:{{ shop.phone }}</p>
  </div>
  
  <!-- 請求金額 -->
  <div class="kuscs_price">請求金額:<span>{{ total_price | money }}</span>(税込)</div>
  
  <!-- 請求明細 -->
  <div class="kuscs_detail">
    <table>
      <tr style="height: 2em;">
        <th style="width:60%;">注文商品</th>
        <th style="width:11%;">単価</th>
        <th style="width:7%;">数量</th>
        <th style="width:15%;">価格</th>
      </tr>
    {% for line_item in line_items %}
      {% if line_item.quantity > 0 %}
      <tr style="height: 2.5em;">
        <td class="kuscs_tdstr">{{ line_item.title }}</td>
        <td class="kuscs_tdnum">{{ line_item.original_price | money }}</td>
        <td class="kuscs_tdnum">{{ line_item.quantity }}</td>
        <td class="kuscs_tdnum">{{ line_item.line_price | money }}</td>
      </tr>
      {% endif %}
    {% endfor %}
    {% for discount in discounts %}
      <tr style="height: 2.5em;">
        <th colspan="3">値引き</th>
        <td class="kuscs_tdnum">{{ discount.savings | money }}</td>
      </tr>
    {% endfor %}
      <tr style="height: 2.5em;">
        <th colspan="3">注文合計</th>
        <td class="kuscs_tdnum">{{ subtotal_price | money }}</td>
      </tr>
    </table>
  </div>
  
  <!-- 支払方法 -->
  <div class="kuscs_inv_blk">
    <p class="blktitle">支払方法:</p>
    
    {% for transaction in transactions %}
    {% if transaction.status != "failure" and transaction.status != "error" %}
      {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
        {% if transaction.payment_details.credit_card_number %}
        <p>{{ transaction.gateway | payment_method }}:{{ transaction.payment_details.credit_card_company }}:{{ transaction.payment_details.credit_card_number }}{% break %}</p>
        {% else %}
        <p>{{ transaction.gateway | payment_method }}:{{ transaction.gateway }}{% break %}</p>
        {% endif %}
      {% endif %}
    {% endif %}
    {% endfor %}
  
  </div>

  <!-- ストアへの特記事項 -->
  {% if note %}
    <div class="kuscs_inv_blk">
      <p class="blktitle">ストアへの特記事項:</p>
      <p>{{ note }}</p>
    </div>
  {% endif %}
  
  
  <!-- --------------------- -->
  <!-- 切り取り線 -->
  <!-- --------------------- -->

  <div class="kuscs_dotline"></div>
  

  <!-- --------------------- -->
  <!-- 領収書 -->
  <!-- --------------------- -->

  <div class="kuscs_title"><h2>領 収 書</h2></div>
  
  <div class="recipt_table">
    <table style="width: 100%;">
      <tr>
        <td style="width: 70%;">
          <h2 class="kuscs_name">{{ billing_address.last_name }} {{ billing_address.first_name }}<span>様</span></h2>
        </td>
        <td style="width: 30%;">
          <p style="margin: 0; text-align: right; font-size:0.8em;">No.{{ order_name }}</p>
        </td>
      </tr>
    </table>
  </div>
  
  <!-- 領収金額 -->
  <div class="kuscs_price" style="margin: 1em auto;">
    <span>{{ total_price | money }}</span>(税込)
  </div>    
  
  <!-- 領収書レイアウト -->
  <div class="kuscs_receipt">
    <table style="width: 100%;">
      <tr>
        <td style="width:auto;">
          <!-- 但し書き -->
          <div class="kuscs_tadashigaki">
            <p>{{ "now" | date: "%Y年%m月%d日" }} 上記、正に領収いたしました。</p>
          </div>
          <!-- 店舗情報 -->
          <div class="kuscs_shopinfo_L">
            <h2>{{ shop.name }}</h2>
            <p>〒{{ shop.zip | upcase }} {{ shop.city }}{{ shop.address }}</p> 
            <p>Tell:{{ shop.phone }}</p>
          </div>
        </td>
        <!-- 収入印紙 -->
        <td style="width: 30mm;">
          <div class="kuscs_stamp_box">
            <p>収入印紙</p>
          </div>
        </td>
      </tr>
    </table>
  </div>
  

詳細な利用手順

Shopifyアプリも、あまり触ったことのないマーチャント様を対象として、以下に詳細な利用手順を記載します。

① Shopifyアプリ管理で「Order Printer」インストール

まずは、Shopifyに「Order Printer」アプリを追加し、「Shopify Order Printer 日本語領収書テンプレート」を利用できる環境を準備します。(詳細な手順を画面で説明します。)

shopify 管理画面で「アプリ管理→カスタマイズ」操作説明イメージ 
アプリ管理 → ストアをカスタマイズ

Shopifyストア管理画面の左側メニューで「アプリ管理」を選択する。表示されたアプリ管理画面「ストアをカスタマイズ」ボタンをクリックする。

shopify app store画面で「order printer アプリ検索」操作説明イメージ 
「order printer」アプリ検索

表示された「shopify app store」画面のアプリ検索ボックスで、「order printer」アプリを検索する。

アプリ一覧画面で「order printer アプリ選択」操作説明イメージ 
「Order Printer」アプリ選択

「アプリ一覧画面」で、「Order Printer」アプリを選択する。

アプリ詳細画面で「order printer アプリ追加」操作説明イメージ 
「Order Printer」アプリ 追加

「アプリ詳細画面」で、「Add app(アプリ追加)」ボタンをクリックする。

アプリ認証画面で「order printer アプリインストール」操作説明イメージ 
「Order Printer」 インストール

「アプリ認証画面」で、 「アプリをインストール」ボタンをクリックする。 以上で「Order Printer」のインストールが完了です。

② 「Shopify Order Printer 日本語領収書テンプレート」設定(追加)

「Order Printer」のインストールが完了すると、Shopify管理>アプリ管理>Order Printer画面が表示されます。画面上部にある「Manage templates」ボタンからテンプレート管理画面に遷移し、「Shopify Order Printer 日本語領収書テンプレート」を追加します。 (詳細な手順を画面で説明します。)

アプリ管理 Order Printer画面で「テンプレート管理ページへの遷移」操作説明イメージ 
「Order Printer」テンプレート管理

Order Printer画面 で、画面上部にある「Manage templates」ボタン をクリックします。

アプリ管理 Order Printer テンプレート管理画面で「テンプレート追加」操作説明イメージ 
「Order Printer」テンプレート追加

Shopify管理>アプリ管理>Order Printer>テンプレート管理画面で、「Add template(テンプレート追加)」ボタンをクリックする。

アプリ管理 Order Printer テンプレート編集画面で「テンプレート名、テンプレートコード設定」操作説明イメージ 
「Order Printer」テンプレート名、テンプレートコード設定

Shopify管理>アプリ管理>Order Printer>テンプレート管理>テンプレート編集画面で、「Name」に任意の名前「請求書&領収書」入力、「Code」に上記で配布しているテンプレートコードをコピー&ペーストしたのち、「Save」ボタンをクリックする。

アプリ管理 Order Printer テンプレート一覧画面で「請求書&領収書テンプレートを通常設定」操作説明イメージ 
「請求書&領収書」テンプレートを通常設定

Shopify管理>アプリ管理>Order Printer>テンプレート管理画面で、「請求書&領収書」の「Print bu Default」チェックボックスをチェックする。以上で「Shopify Order Printer 日本語領収書テンプレート」の設定が完了しました。

③ 「Shopify Order Printer 日本語領収書テンプレート」の利用方法

テンプレートの設定が終わったので、出来上がった「請求書&領収書」テンプレートを以下の手順で利用(確認・印刷)します。

アプリ管理 Order Printer テンプレート一覧画面で「Recent orders(最近の注文)」操作説明イメージ 
「Recent orders(最近の注文)」 画面に遷移

Shopify管理>アプリ管理>Order Printer>テンプレート管理画面で、「Recent orders(最近の注文)」ボタンをクリックする。

アプリ管理 Order Printer 画面で「Orders番号選択」操作説明イメージ 
Orders番号を選択

Shopify管理>アプリ管理>Order Printer 画面で、注文一覧内の「Order」番号をクリックする。

アプリ管理 Order Printer Order 画面で「請求書&領収書の確認/印刷」操作説明イメージ 
請求書&領収書の確認/印刷

選択したオーダー番号の内容で、請求書・領収書が表示されるので、これを確認し、右上の「プリント」ボタンから印刷することができます。

結構簡単にできると思いますが、いかがでしたか?

「Shopify Order Printer 日本語領収書テンプレート」の利用方法で、わからない事があれば、お気軽にコメントをください。可能な範囲で返信させて頂きます。

利用条件

このテンプレートコードの著作館は「kuscs」が有しますが、商用利用を含め、無料でご自由にコードの利用・改変をすることができます。ただし本コードを利用する場合は、当サイトへのリンク(以下のコード参照)をページのどこかに表示してください。

<!-- 当サイトへのリンク例 -->
<a href="https://www.kuscs.com">using the Kuscs OrderPrinter Template</a>

クリエイティブ・コモンズ・ライセンス
この コード は クリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。

コメント

  1. じじぴぴ より:

    発送後の顧客の領収書を発送したいのですが、発送前の顧客データしか表示されません。
    こういった場合、どうしたらよいのか教えてほしいです。

    1. kuscs-shin より:

      はじめまして、コメントありがとうございます。

      「発送後の顧客の領収書を発送したいのですが、発送前の顧客データしか表示されません。」とのこと、

      まず、領収書にある「顧客データ」は、配布コードの283行目にある、

      請求先住所登録された(姓): {{ billing_address.last_name }} と
      請求先住所登録された(名): {{ billing_address.first_name }} になります。

      283行目 {{ billing_address.last_name }} {{ billing_address.first_name }}様

      この {{ billing_address.○○○ }} は「Liquid Objects」というオブジェクト型のデータで、
      商品注文時にお客様が入力した住所データ(請求先住所データ)を表しています。

      一方、発送後の住所と言われているのは、おそらく発送先住所のことだと思われます。(間違ってたらごめんなさい)

      なので、
      この請求先住所をあらわす {{ billing_address.○○○ }} を
      発送後のデータをあらわす {{ shipping_address.○○○ }} に変更してあげれば、
      ご希望の表示になると思います。

      こんな感じでしょうか?

      283行目 {{ shipping_address.last_name }} {{ shipping_address.first_name }}様

      ちなみに、shopify.devのリファレンスで、Liquid Object「Order」を勉強すれば、領収書をいろいろカスタマイズできるようになります。
      もしお時間があればいろいろ試してみてください。

      【追伸】
      配布コードは、請求先住所宛に領収書を発送するという前提で、設計しています。
      今回のように、この配布コードでは要件が満たせないシチュエーションは
      どのような操作をした結果なのか、もしよろしければ教えてください。

コメントを残す

*

CAPTCHA


%d人のブロガーが「いいね」をつけました。