[サービスあり]Shopifyで請求書・領収書をカスタマイズしよう

Shopifyの既存機能

Shopifyは既存の機能で「明細書」を作成することが可能です。 ですが、請求書や領収書を作成することができません。 そこで、今回はShopifyで請求書や領収書、梱包表を簡単に作成できるアプリ「Order Printer」を紹介します！

Order Printerとは

「Order Printer」はShopifyが提供している、簡単に請求書などが作成・印刷できるアプリです。

料金

このアプリは無料で使うことができます！

使い方

アプリのインストール

まずはアプリのインストールをします

下記記事にアプリのインストール方法をまとめてあるので参考にしてみてください。

アプリをインストールするとこのような画面に移動します。

請求書を表示しよう

上の画像の「Order」の部分にある番号を押して、注文の請求書を表示してみましょう。

現状はこのようになっています。

Invoiceは請求書を、Packing slipは梱包表を表現しています。

画面右上のPrintを押すと印刷をすることができます。

英語だし、料金のところとか見づらくて、このままでは使えないよ...

そうですね。英語圏用に作られているためこのままの使用は難しいです。
そこで、日本でも使えるようにカスタマイズしてみましょう！

請求書をカスタマイズしよう

画面右上のeditを押すとテンプレートの編集が可能です。
また、Add templateを押すと新しいテンプレートが作成できます。

今回は、新しいテンプレート「請求書」を作成しました。

そして次のコードを貼り付けてください。（主にInvoiceの英語部分を日本語に変更したものです）

<p style="float: right; text-align: right; margin: 0;">
  {{ "now" | date: "%y/%m/%d" }}<br />
  請求書No. {{ order_name }}
</p>

<div style="float: left; margin: 0 0 1.5em 0;" >
  <strong style="font-size: 2em;">{{ shop_name }}</strong><br /><br />
  <br/>
  〒{{ shop.zip | upcase }}<br/>
  {{ shop.province }} {{ shop.city }}  {{ shop.address }}<br/>
</div>

<hr />

<h3 style="margin: 0 0 1em 0;">ご注文内容</h3>

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>数量</th>
      <th>商品名</th>
      {% if show_line_item_taxes %}
      <th>税金</th>
      {% endif %}
      <th>単価</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td>{{ line_item.quantity }} x</td>
        <td><b>{{ line_item.title }}</b></td>
        {% if show_line_item_taxes %}
        <td>
          {% for tax_line in line_item.tax_lines %}
            {{ tax_line.price | money }} {{ tax_line.title }}<br/>
          {% endfor %}
        </td>
        {% endif %}
        <td>
          {% if line_item.original_price != line_item.price %}
            <s>{{ line_item.original_price | money }}</s>
          {% endif %}
          {{ line_item.price | money }}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% if transactions.size > 1 %}
  <h3 style="margin: 0 0 1em 0;">Transaction Details</h3>
  <table class="table-tabular" style="margin: 0 0 1.5em 0;">
    <thead>
      <tr>
        <th>Type</th>
        <th>Amount</th>
        <th>Kind</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in transactions %}
        <tr>
          <td>{{ transaction.gateway | payment_method }}</td>
          <td>{{ transaction.amount | money }}</td>
          <td>{{ transaction.kind }}</td>
          <td>{{ transaction.status }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

<h3 style="margin: 0 0 1em 0;">ご請求内容</h3>

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <tr>
    <td>商品合計:</td>
    <td>{{ subtotal_price | money }}</td>
  </tr>
  {% for discount in discounts %}
  <tr>
    <td>Includes discount "{{ discount.code }}"</td>
    <td>{{ discount.savings | money }}</td>
  </tr>
  {% endfor %}
  <tr>
    <td>税金:</td>
    <td>{{ tax_price | money }}</td>
  </tr>
  {% if shipping_address %}
    <tr>
      <td>送料:</td>
      <td>{{ shipping_price | money }}</td>
    </tr>
  {% endif %}
  <tr>
    <td><strong>合計金額:</strong></td>
    <td><strong>{{ total_price | money }}</strong></td>
  </tr>
  {% if total_paid != total_price %}
    <tr>
      <td><strong>Total paid:</strong></td>
      <td><strong>{{ total_paid | money }}</strong></td>
    </tr>
    <tr>
      <td><strong>Outstanding Amount:</strong></td>
      <td><strong>{{ total_price | minus: total_paid | money }}</strong></td>
    </tr>
  {% endif %}
</table>

{% if note %}
  <h3 style="margin: 0 0 1em 0;">Note</h3>
  <p>{{ note }}</p>
{% endif %}

{% if shipping_address %}
  <h3 style="margin: 0 0 1em 0;">ご注文者</h3>

  <div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid black;">
    <strong>{{ shipping_address.name }}</strong><br/>
    {{ shipping_address | format_address }}
  </div>
{% endif %}

<p>ご不明な点ございましたら、こちらのメールアドレスまでご連絡ください。 <u>{{ shop.email }}</u></p>

保存をすると次のように表示されます。

日本でも使えるようにカスタマイズができました！

まとめ&サービス

以上でOrder Printerの解説を終了します。

今回の記事に関して、質問やご意見ございましたら下記問い合わせフォームよりご連絡ください。

また、AGATA CODEではShopifyの修正を引き受けます。 Shopifyのアプリやテーマのカスタマイズ、商品画像の作成など、Shopifyのあらゆる修正を引き受けています。

もっと請求書とかをカスタマイズしたいんだけど...
領収書とかも作りたい！お願いすることできる？

はい！1テンプレート3,000円で作成いたします！
お気軽にお問い合わせください！

お問い合わせ