[Shopify] 納品書アプリのテンプレートを日本対応に変更する（無料）

Shopifyでショップを構築する上で必要となる一つに、商品を送付する際に同梱する納品書がありますが、Shopifyでは現時点でデフォルトでは日本語に対応していません。

そこで、納品書を日本対応させる方法についてまとめました。

Shopifyの無料体験をはじめる

Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。

Shopifyのデフォルト納品書テンプレート

Shopifyにはデフォルトで納品書（明細書）があります。仮のサイトですが以下です。

以下はデフォルトで記載のない項目です。

商品ごとの価格・小計
割引（クーポンなど）
小計金額
配送料
消費税
合計

他に日付や住所が英語仕様であったり、文言が英語となっています。

これらを最低限対応するために、今回は無料のアプリ「Order Printer」というアプリを使用します。

Shopifyの納品書アプリ「Order Printer」をインストールする

まず、管理画面のアプリ管理から、「Shopifyアプリストアに行く」ボタンを押し、アプリストアで「Order Printer」と検索しアプリページに遷移します。

→直接アクセスはこちら

こちらの「Add app」からアプリを追加し、次の画面でアプリがアクセスする情報を確認した上で「アプリをインストール」ボタンを押すと、以下の画面が表示されます。

すでに注文が存在する場合は注文一覧が表示されます。

ここで、デフォルトのテンプレートを見てみると、以下で表示されます。

海外のアプリのため、こちらも英語ですが、先ほどのデフォルトの明細表にはなかった項目が全て入っています。これをもとにカスタマイズしていきます。

Shopifyの納品書アプリ「Order Printer」テンプレートをカスタマイズする

まず、編集画面を確認すると、右にデフォルトのテンプレートが表示されています。

デフォルトはバックアップとして念のため残しておくため、まず Invoice というテンプレートの右にある「edit」を押して編集画面を開きます。

開いたら、コードを全て選択してコピーし、1つ前の画面に戻ります。そこで今度は右下の「Add template」を押し、新規のテンプレート編集画面を開きます。

そしてNameに適当な名前を、Codeに先ほどのコードをペーストし、一旦右上の「Save」で保存します。

ここからコードの中身をカスタマイズしていきます。

カスタマイズするには、この「Order Printer」アプリのテンプレート編集画面に「View the Liquid variable list」というリンク先にリファレンスがあるため、そちらを参考にHTML・CSS・Liquidタグを使用してテンプレートをカスタマイズしていきます。

住所の並びを変更する

一番上の店舗の住所と、一番下の送付先の住所が以下のように英語表記になっており、また都道府県が「JP-13」とProvince Code（ISOコード）表記になってしまっています。

山田太郎
代々木1-2-3 マンション123
渋谷区 JP-13 1510002
Japan

都道府県については以下が参考になります。

解決済み: provinceの返り値について – Shopify Community

こちらを参考に、以下に変更します。

店舗情報：変更前

8〜10行目

  {{ shop.address }}<br/>
  {{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
  {{ shop.country }}

店舗情報：変更後

以下を対応します。

住所の並びを日本語表記に
郵便番号の先頭に「〒」を追加
都道府県をProvince Codeから通常の漢字表記に
address2を追加（使用していなければ不要だが一応）
ショップの電話番号を追加
ショップのメールアドレスを追加

  〒{{ 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 }}
  {{ shop.address2 }}<br />
  Phone: {{ shop.phone }}<br />
  Email: {{ shop.email }}<br />

※電話番号とメールアドレスも追加しました。

配送先：変更前

123〜131行目

    <strong>{{ shipping_address.name }}</strong><br/>
    {% if shipping_address.company %}
      {{ shipping_address.company }}<br/>
    {% endif %}
    {{ shipping_address.street }}<br/>
    {{ shipping_address.city }}
    {{ shipping_address.province_code }}
    {{ shipping_address.zip | upcase }}<br/>
    {{ shipping_address.country }}

配送先：変更後

以下を対応します。

住所の並びを日本語表記に
都道府県をProvince Codeから通常の漢字表記に
address2を追加
姓名を逆にして「様」を追加
電話番号を追加

    〒{{ 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.address1 }}
    {{ shipping_address.address2 }}<br/>
    {% if shipping_address.company %}
      {{ shipping_address.company }}<br/>
    {% endif %}
    {{ shipping_address.last_name }} {{ shipping_address.first_name }} 様<br/>
    Phone: {{ shipping_address.phone}}<br />

これで以下のようになりました。（Phoneは電話番号など自由に変えてください）

〒1510002
東京都渋谷区代々木1-2-3 マンション123
山田太郎様
Phone: +818012345678

日付を修正する

日付を、本日の日付の「月/日/年」から、注文日の「年/月/日」に変更します。

変更前

2行目

  {{ "now" | date: "%m/%d/%y" }}<br />

変更後

  {{ created_at | date: "%Y/%m/%d" }}<br />

購入商品明細に単価を追加する

デフォルトでは「数量・商品名・税金・小計」となっていますが、
「商品名・単価・数量・小計」にしてみます。

変更前

34〜50行目

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if show_line_item_taxes %}
      <th>Taxes</th>
      {% endif %}
      <th>Price</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 line_item.tax_lines %}
          <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>

変更後

※税込設定の場合です。

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>商品名</th>
      <th style="text-align: right;">単価 (税込)</th>
      <th style="text-align: right;">数量</th>
      {% comment %}
      {% if show_line_item_taxes %}
      <th style="text-align: right;">(内消費税)</th>
      {% endif %}
      {% endcomment %}
      <th style="text-align: right;">金額 (税込)</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td>{{ line_item.title }}<br />
        {% if line_item.sku != blank %}({{ line_item.sku }}){% endif %}
        </td>
        <td style="text-align: right;">{{ line_item.price | money }}</td>
        <td style="text-align: right;">{{ line_item.quantity }}</td>
        <td style="text-align: right;">{{ line_item.line_price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

これで以下のようになりました。

セール価格の場合は、割引後の販売価格（購入金額）を表示しています。

また、商品名下の()内はSKUです。不要の場合は削除してください。

日本語化する

その他、英語の箇所を日本語にします。

例）

Invoice for → 注文番号
Item Details → 購入商品明細
Payment Details → お支払い内訳
Shipping Details → お届け先
Subtotal price → 小計 (税込)
Includes discount → 割引コード
Total tax → (内消費税)
Shipping → 送料 (税込)
Total price → 総合計 (税込)
If you have any questions, please send an email to [email protected]
→ ご不明な点がございましたら、[email protected] までご連絡ください。