Function

Shopifyではストアで発行する書類の作成はShopifyの公式アプリ「Order Printer」で作成することができます。

しかし、Order Printerアプリで発行される書類は全て英語表記になっているためソースコードを編集して日本語仕様にカスタマイズする必要があります。

そこでこの記事では、Shopifyの納品書を日本語で出力するためのコードをご紹介しましょう。

Shopifyの納品書は「Template details」でソースコードを編集する

Order Printerのコードを編集するにはまず 、Shopify管理画面より[アプリ管理>Order Printer]を選択します。

続いてOder Printerのロゴのすぐ下のある[Manage templates]をクリックします。

デフォルトではInvoiceとPacking slipの２つのテンプレートが用意されています。今回は納品書を作成するのでInvoiceを編集していきます。Invoiceの編集は青文字で表示されている[Invoice]をクリックします。

ここで表示されるソースコードを編集して納品書を日本語仕様にしていきますがその前に、万が一ソースコードの入力を間違えてしまったときのためにソースコードを全てコピーしてメモ帳など他の場所に複製しておくようにしましょう。

【Order Printer】のダウンロードがまだの方はこちらからダウンロード

出力書類の名前を納品書に変更する

まず初期設定では発行する書類の名称がinvoiceとなっているため書類名を納品書に変更します。Template detailsのNameを「invoice」から「納品書」に変更します。もし発行書類を他の名称にしたい場合はここで名前の変更を行えます。

注文日と注文番号を日本語で表示する

注文番号はデフォルトではinvoice forとだけ表示されるため、ユーザーにわかりやすく「注文日と注文番号」と日本語で表示させたいですね。

この変更はデフォルトコードの２行目と３行目のコードを以下のように変更します。

  ご注文日：{{ date | date: "%Y-%m-%d" }}<br>
  ご注文番号:{{ order_name }}

この編集を行うことで右上に表示される注文日と注文番号を日本語に変更することができます。

ストアやブランドのロゴを挿入する

納品書にストアのロゴを表示させたい場合はスタイルシートの７行目に以下のコードを入力してロゴのアドレスを挿入します。またこのままだとストアネームのサイズがデフォルトのまま表示されるので{{ shop_name }}のフォントサイズを変更することでストアネームを小さくロゴの下に表示させることができます。

<img src="ここにロゴのアドレス"style="width: 170px;"><br />
<strong style="font-size: 16px;">{{ shop_name }}</strong><br /><br />

注文詳細を日本語で表示する

まずここでは注文内容の詳細を日本語仕様に変更していきます。デフォルトの１５行目<h3 style="margin: 0 0 1em 0;">Item Details</h3>以降のコードを以下のように編集していきます。

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


<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th style="width: 80%;">商品名</th>
      <th style="width: 10%;">数量</th>
      <th style="width: 10%;">税込単価</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td><b>{{ line_item.title }}</b></td>
        <td>{{ line_item.quantity }}</td>
        <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>

注文詳細の文言はコードの赤字の箇所を編集することで好きな文言に変更することができます。

Transaction Detailsの項目を削除する

transaction Detailsは実行された決済方法の詳細が表示される項目ですが、納品書にはあまり必要のない項目であるため{% if transactions.size > 1 %}から{% endif %}までのコードを削除します。

お支払詳細を日本語で表示する

次に支払い詳細を日本語仕様に変更します。デフォルトの75行目(この記事で紹介している変更を全て行った場合は４１行目になります)<h3 style="margin: 0 0 1em 0;">Payment Details</h3>以降を以下のように変更していきます。

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

支払い情報の文言はコードの赤字の箇所を編集することで好きな文言に変更することができます。

届け先情報を日本語に変更する

続いて商品の届け先情報の変更を行います。デフォルトの１２０行目(この記事で紹介している変更を全て行った場合は76行目になります)<h3 style="margin: 0 0 1em 0;">Shipping Details</h3>以降のコードを以下のように変更します。

<h3 style="margin: 0 0 1em 0;">お届け先情報</h3>

  <div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid black;">
    <strong>{{ shipping_address.last_name }} {{ shipping_address.first_name }} 様</strong><br/>
    {% if shipping_address.company %}
      {{shipping_address.company }}<br/>
    {% endif %}
   {{ shipping_address.zip | upcase }}<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/>
  </div>

注文の問い合わせを日本語に変更する

最後に注文に関する問い合わせ先のメールアドレスを示す文言を日本語に変更します。デフォルトの１３５行目(この記事で紹介している変更を全て行った場合は90行目になります)のコード内の英文を日本語に変更します。

<p>ご注文内容に関するお問い合わせは<u>{{ shop.email }}</u>までお願いします。</p>

Shopifyの納品書作成は無料のOrder Printerで十分

Shopifyのapp Storeでは、納品書作成のためのアプリがいくつかありますがソースコードを編集することで簡単にストアの納品書を日本語仕様にすることができるのでわざわざお金を払って納品書作成アプリをダウンロードする必要はないでしょう。

今回ご紹介した日本語対応の納品書用のソースコードはコピーして貼り付けるだけなのでぜひストアの納品書の参考にしてみてくださいね。