【無料配布】Shopifyの明細書・請求書・梱包書のいい感じのテンプレートを配布します。【Order Printer】

悩んでいる人

Shopifyで明細書を発行したいけど、いい感じの表示にならなくて、、、、
コピペで終わらせたい!

本記事では上記の悩みを解決します。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
ShopifyやWordPressのお仕事をすることが多いのですが、現在フリーランスとして働きながら、WEB開発の学習をしております。

それでは、いきましょー!

スポンサーリンク

目次

アプリのインストール

Order Printerというアプリをインストールしてください。

無料でインストール可能です!

明細書/請求書

一行目のロゴのURLの部分にご自身のストアのロゴのURLを入力ください。

{% assign shop_logo = "ロゴのURL" %}

<p style="float: right; text-align: right; margin: 0;">
  {{ "now" | date: "%Y年%m月%d日" }}<br />
  注文番号 {{ order_name }}
  </p>

  <div style="float: left;" >
  <!-- <strong style="font-size: 2em;">{{ shop_name }}</strong><br /><br /> -->
  <div class="img" style="width: 100px;" >
      <img style="width: 100%;" src="{{ shop_logo }}"></div>
  </div>
  <div class="title" style="text-align: center;">
      <h3 style="text-align: center;">購入明細書</h3>
  </div>

  <div style="text-align: left; clear: both;">
  <p>〒{{ shop.zip}} <br>
      {{ shop.province | replace: 'Aichi', '愛知県' | replace: 'Akita', '秋田 県' | replace: 'Aomori', '青森県' | replace: 'Chiba', '千葉県' | replace: 'Ehime', '愛 媛県' | replace: 'Fukui', '福井県' | replace: 'Fukuoka', '福岡県' | replace: 'Fukushima', '福島県' | replace: 'Gifu', '岐阜県' | replace: 'Gunma', '群馬県' | replace: 'Hiroshima', '広島県' | replace: 'Hokkaidō', '北海道' | replace: 'Hyōgo', '兵庫県' | replace: 'Ibaraki', '茨城県' | replace: 'Ishikawa', '石川県' | replace: 'Iwate', '岩手県' | replace: 'Kagawa', '香川県' | replace: 'Yamanashi', '山梨県' | replace: 'Yamaguchi', '山口県' | replace: 'Kōchi', '高知県' | replace: 'Kumamoto', '熊本県' | replace: 'Kyōto', '京都府' | replace: 'Mie', '三重県' | replace: 'Yamagata', '山形県' | replace: 'Miyazaki', '宮崎県' | replace: 'Nagano', '長野県' | replace: 'Nagasaki', '長崎県' | replace: 'Nara', '奈良県' | replace: 'Niigata', '新潟県' | replace: 'Ōita', '大分県' | replace: 'Okayama', '岡山県' | replace: 'Okinawa', '沖縄県' | replace: 'Ōsaka', '大阪府' | replace: 'Saga', '佐賀 県' | replace: 'Saitama', '埼玉県' | replace: 'Shiga', '滋賀県' | replace: 'Shimane', '島根県' | replace: 'Shizuoka', '静岡県' | replace: 'Tochigi', '栃木県' | replace: 'Tokushima', '徳島県' | replace: 'Tottori', '鳥取県' | replace: 'Toyama', '富山県' | replace: 'Tōkyō', '東京都' | replace: 'Miyagi', '宮城県' | replace: 'Wakayama', '和 歌山県' | replace: 'Kanagawa', '神奈川県' | replace: 'Kagoshima', '鹿児島県' }} {{ shop.city }}<br>
      {{ shop.street }}{{ shop.address }}
  </p>
  </div>

  <hr style="margin-top: 0; margin-bottom: .2em;" />
  <h4 style="margin: 0 0 .5em 0;">注文情報(注文日時:{{ date | date: "%Y年%m月%d日 %H時%M分" }})</h4>
  <table class="table-tabular" style="margin: 0 0 0.5em 0;">
  <thead>
      <tr style="border-bottom: double;">
          <th style="min-width: 30px;">数量</th>
          <th>商品</th>
          <th style="text-align: right; padding-right: 20px; min-width: 30px;">金額</th>
      </tr>
  </thead>
  <tbody>
      {% for line_item in line_items %}
      <tr>
      {% assign final_price = line_item.quantity | times : line_item.price  %}
          <td>{{ line_item.quantity }} x</td>
          <td><b>{{ line_item.title }}</b></td>
          <td style="text-align: right;">
              {{ line_item.price | money }}
          </td>
      </tr>
      {% endfor %}
  </tbody>
  </table>

  <h4 style="margin: 0 0 .5em 0;">お支払い</h4>
  <table class="table-tabular" style="margin: 0 0 0.5em 0;">
      <thead>
      <tr style="border-bottom: double;">
          <th>支払方法</th>
          <th style="text-align: right; padding-right: 20px;">金額</th>
      </tr>
      </thead>
      <tbody>
          {% for transaction in transactions %}
          {% if forloop.last == true %}
              <tr>
                  <td>{{ transaction.gateway | payment_method | replace: 'Credit Card', 'クレジットカード'}}</td>
                  <td style="text-align: right;">{{ total_price | money }}</td>
              </tr>
          {% else %}
          {% endif %}

      {% endfor %}
      </tbody>
  </table>

  <h4 style="margin: 0 0 .5em 0;">金額</h4>

  <table class="table-tabular" style="margin: 0 0 0.5em 0;">
  <tr>
      <td>商品金額(税込)</td>
      <td style="text-align: right;">{{ subtotal_price | money }}</td>
  </tr>
  <tr>
      <td>消費税</td>
      <td style="text-align: right;">{{ tax_price | money }}</td>
  </tr>
  <tr>
      <td>送料</td>
      <td style="text-align: right;">{{ shipping_price | money }}</td>
  </tr>
  <tr>
      <td><strong>合計金額</strong></td>
      <td style="text-align: right;"><strong>{{ total_price | money }}</strong></td>
  </tr>
  </table>

  {% if shipping_address %}
      <h4 style="margin: 0 0 .5em 0;">配送先住所</h4>

      <div style="margin: 0 0 .5em 0; padding: 1em; border: 1px solid black;">
          <p>
              <strong><span class="shipping-delivery__name">
                  {{ shipping_address.last_name }} {{ shipping.first_name }}様<br>
              </span></strong>
              <span class="shipping-delivery__aaddress">
                  {% if  shipping_address.zip contains '-' %}
                  〒{{ shipping_address.zip }}
                  {% else %}
                  {% assign prevZip = shipping_address.zip | slice: 0, 3 %}
                  {% assign nextZip = shipping_address.zip | slice: 3, 6 %}
                  〒{{ prevZip }}-{{ nextZip }}
                  {% endif %}
                  {% if shipping_address.province != blank %}
                  {{ shipping_address.province | replace: 'Aichi', '愛知県' | replace: 'Akita', '秋田 県' | replace: 'Aomori', '青森県' | replace: 'Chiba', '千葉県' | replace: 'Ehime', '愛 媛県' | replace: 'Fukui', '福井県' | replace: 'Fukuoka', '福岡県' | replace: 'Fukushima', '福島県' | replace: 'Gifu', '岐阜県' | replace: 'Gunma', '群馬県' | replace: 'Hiroshima', '広島県' | replace: 'Hokkaidō', '北海道' | replace: 'Hyōgo', '兵庫県' | replace: 'Ibaraki', '茨城県' | replace: 'Ishikawa', '石川県' | replace: 'Iwate', '岩手県' | replace: 'Kagawa', '香川県' | replace: 'Yamanashi', '山梨県' | replace: 'Yamaguchi', '山口県' | replace: 'Kōchi', '高知県' | replace: 'Kumamoto', '熊本県' | replace: 'Kyōto', '京都府' | replace: 'Mie', '三重県' | replace: 'Yamagata', '山形県' | replace: 'Miyazaki', '宮崎県' | replace: 'Nagano', '長野県' | replace: 'Nagasaki', '長崎県' | replace: 'Nara', '奈良県' | replace: 'Niigata', '新潟県' | replace: 'Ōita', '大分県' | replace: 'Okayama', '岡山県' | replace: 'Okinawa', '沖縄県' | replace: 'Ōsaka', '大阪府' | replace: 'Saga', '佐賀 県' | replace: 'Saitama', '埼玉県' | replace: 'Shiga', '滋賀県' | replace: 'Shimane', '島根県' | replace: 'Shizuoka', '静岡県' | replace: 'Tochigi', '栃木県' | replace: 'Tokushima', '徳島県' | replace: 'Tottori', '鳥取県' | replace: 'Toyama', '富山県' | replace: 'Tōkyō', '東京都' | replace: 'Miyagi', '宮城県' | replace: 'Wakayama', '和 歌山県' | replace: 'Kanagawa', '神奈川県' | replace: 'Kagoshima', '鹿児島県' }}
                  {% endif %}
                  {% if shipping_address.city != blank %}
                  {{ shipping_address.city }}
                  {% endif %}
                  {{ shipping_address.address1 }}
                  {%  if shipping_address.address2 != blank %}

                  {{ shipping_address.address2 }}
                  {% endif %}
              </span>
          </p>
      </div>
  {% endif %}

  <p>この度は当店をご利用いただきありがとうございます。</p>
  <p>{{ shop.name }}</p>

梱包書

<div style="margin: 0 0 1.5em 0; padding: 1.5em; border: 1px solid black;">
  <h2 style="margin: 0 0 1em 0;">ご依頼主</h2>
  <strong>{{ shop.name }}</strong><br/>
  氏名:{{ shop.owner }}<br/>
  郵便番号:〒{{ shop.zip | upcase }}<br/>
  住所:{{ shop.province | replace: 'Aichi', '愛知県' | replace: 'Akita', '秋田 県' | replace: 'Aomori', '青森県' | replace: 'Chiba', '千葉県' | replace: 'Ehime', '愛 媛県' | replace: 'Fukui', '福井県' | replace: 'Fukuoka', '福岡県' | replace: 'Fukushima', '福島県' | replace: 'Gifu', '岐阜県' | replace: 'Gunma', '群馬県' | replace: 'Hiroshima', '広島県' | replace: 'Hokkaidō', '北海道' | replace: 'Hyōgo', '兵庫県' | replace: 'Ibaraki', '茨城県' | replace: 'Ishikawa', '石川県' | replace: 'Iwate', '岩手県' | replace: 'Kagawa', '香川県' | replace: 'Yamanashi', '山梨県' | replace: 'Yamaguchi', '山口県' | replace: 'Kōchi', '高知県' | replace: 'Kumamoto', '熊本県' | replace: 'Kyōto', '京都府' | replace: 'Mie', '三重県' | replace: 'Yamagata', '山形県' | replace: 'Miyazaki', '宮崎県' | replace: 'Nagano', '長野県' | replace: 'Nagasaki', '長崎県' | replace: 'Nara', '奈良県' | replace: 'Niigata', '新潟県' | replace: 'Ōita', '大分県' | replace: 'Okayama', '岡山県' | replace: 'Okinawa', '沖縄県' | replace: 'Ōsaka', '大阪府' | replace: 'Saga', '佐賀 県' | replace: 'Saitama', '埼玉県' | replace: 'Shiga', '滋賀県' | replace: 'Shimane', '島根県' | replace: 'Shizuoka', '静岡県' | replace: 'Tochigi', '栃木県' | replace: 'Tokushima', '徳島県' | replace: 'Tottori', '鳥取県' | replace: 'Toyama', '富山県' | replace: 'Tōkyō', '東京都' | replace: 'Miyagi', '宮城県' | replace: 'Wakayama', '和 歌山県' | replace: 'Kanagawa', '神奈川県' | replace: 'Kagoshima', '鹿児島県' }}{{ shop.city }}{{ shop.address }}<br/>
  電話番号:{{ shop.phone }}
</div>

{% if shipping_address %}
<div style="padding: 1.5em; border: 1px solid black;">
  <h2 style="margin: 0 0 1em 0;">お届け先</h2>
  <strong>氏名:{{ shipping_address.name }}</strong><br/>
  郵便番号:{{ shipping_address.zip }}<br/>
  住所:{{ shipping_address.province | replace: 'Aichi', '愛知県' | replace: 'Akita', '秋田 県' | replace: 'Aomori', '青森県' | replace: 'Chiba', '千葉県' | replace: 'Ehime', '愛 媛県' | replace: 'Fukui', '福井県' | replace: 'Fukuoka', '福岡県' | replace: 'Fukushima', '福島県' | replace: 'Gifu', '岐阜県' | replace: 'Gunma', '群馬県' | replace: 'Hiroshima', '広島県' | replace: 'Hokkaidō', '北海道' | replace: 'Hyōgo', '兵庫県' | replace: 'Ibaraki', '茨城県' | replace: 'Ishikawa', '石川県' | replace: 'Iwate', '岩手県' | replace: 'Kagawa', '香川県' | replace: 'Yamanashi', '山梨県' | replace: 'Yamaguchi', '山口県' | replace: 'Kōchi', '高知県' | replace: 'Kumamoto', '熊本県' | replace: 'Kyōto', '京都府' | replace: 'Mie', '三重県' | replace: 'Yamagata', '山形県' | replace: 'Miyazaki', '宮崎県' | replace: 'Nagano', '長野県' | replace: 'Nagasaki', '長崎県' | replace: 'Nara', '奈良県' | replace: 'Niigata', '新潟県' | replace: 'Ōita', '大分県' | replace: 'Okayama', '岡山県' | replace: 'Okinawa', '沖縄県' | replace: 'Ōsaka', '大阪府' | replace: 'Saga', '佐賀 県' | replace: 'Saitama', '埼玉県' | replace: 'Shiga', '滋賀県' | replace: 'Shimane', '島根県' | replace: 'Shizuoka', '静岡県' | replace: 'Tochigi', '栃木県' | replace: 'Tokushima', '徳島県' | replace: 'Tottori', '鳥取県' | replace: 'Toyama', '富山県' | replace: 'Tōkyō', '東京都' | replace: 'Miyagi', '宮城県' | replace: 'Wakayama', '和 歌山県' | replace: 'Kanagawa', '神奈川県' | replace: 'Kagoshima', '鹿児島県' }}{{ shipping_address.city }}{{ shipping_address.street }}<br/>
  電話番号:{{ shipping_address.phone }}
</div>
{% endif %}

まとめ

結構こういう細かいところもめんどくさいので、最近はこちらをベースにして都度ご依頼があればカスタマイズするようにしています。

ぜひご活用ください^^

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次