Shopify アプリ 設定

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

この記事は約 11 分で読めます。

こんな方におすすめ

  • Shopifyアプリ「Order Printer」の使い方を知りたい方
  • Shopifyで領収書・請求書をカスタマイズ・印刷したい方
  • Shopifyで領収書・請求書をカスタマイズして欲しい方

Shopifyの既存機能

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

Order Printerとは

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

料金

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

    使い方

    アプリのインストール

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

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

    [画像付き]Shopifyでアプリを追加する方法

    この記事は約 3 分で読めます。 こんな方におすすめ Shopifyでアプリを追加したい! 細かい説明はいいから端的にアプリの入れ方を教えて欲しい! Shopifyでアプリを入れる手順 まず、Shop ...

    続きを見る

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

    請求書を表示しよう

    上の画像の「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円で作成いたします!
    お気軽にお問い合わせください!

    お問い合わせ

    -Shopify, アプリ, 設定

    © 2021 AGATA CODE Powered by AFFINGER5