Shopifyアプリ「Order Printer」で納品書を日本語仕様にカスタマイズ

Shopifyアプリ「Order Printer」で納品書を日本語仕様にカスタマイズ

ECで受注した商品を発送する際に、紙の領収書や請求書などの帳票を作成したい場合、Shopifyでは専用のアプリを使うことで、管理画面の注文情報一覧からPDFの印刷データを作成することができます。
ShopifyのEC構築・運用サービス「BiNDec」が提供している帳票出力アプリは、国内のEC事業者向けに設計されていますが、公式で提供されている「Order Printer」で発行される書類は全て英語表記になっているためソースコードを編集して日本語仕様にカスタマイズする必要があります。

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

その他にも、ストア運用に便利なおすすめのShopify appを下記の記事で紹介しています。

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

Order Printerのコードを編集するにはまず 、Shopify管理画面より[アプリ管理>Order Printer]を選択します。
アプリ管理からOrder Printerを選ぶ
続いてOrder Printerのロゴのすぐ下のある[Manage templates]をクリックします。
Manage templatesをクリック
デフォルトではInvoiceとPacking slipの2つのテンプレートが用意されています。今回は納品書を作成するのでInvoiceを編集していきます。Invoiceの編集は青文字で表示されている[Invoice]をクリックします。
Invoiceをクリック
ここで表示されるソースコードを編集して納品書を日本語仕様にしていきますがその前に、万が一ソースコードの入力を間違えてしまったときのためにソースコードを全てコピーしてメモ帳など他の場所に複製しておくようにしましょう。

ShopifyのEC事業者必見の売上を最大化するための使いこなし術についてはこちらの資料をご覧ください。

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

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

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

注文日と注文番号の日本語で表示
注文番号はデフォルトではinvoice forとだけ表示されるため、ユーザーにわかりやすく「注文日と注文番号」と日本語で表示させたいですね。
この変更はデフォルトコードの2行目と3行目のコードを以下のように変更します。


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


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

ShopifyのEC事業者必見の売上を最大化するための使いこなし術についてはこちらの資料をご覧ください。

ブランドのロゴを挿入する

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


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


この赤字の部分にロゴのURLを挿入することでストアやブランド、会社のロゴを納品書に表示させることができます。

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

注文詳細を日本語にする
まずここでは注文内容の詳細を日本語仕様に変更していきます。デフォルトの15行目<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行目(この記事で紹介している変更を全て行った場合は41行目になります)<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>


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

ShopifyのEC事業者必見の売上を最大化するための使いこなし術についてはこちらの資料をご覧ください。

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

続いて商品のお届け先情報の変更を行います。デフォルトの120行目(この記事で紹介している変更を全て行った場合は76行目になります)<h3 style="margin:001em 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>

ShopifyのEC事業者必見の売上を最大化するための使いこなし術についてはこちらの資料をご覧ください。

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

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


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

BiNDecの帳票出力アプリなら完全日本語対応でカスタマイズも簡単

BiNDecの帳票出力アプリでは、領収書・請求書・納品書・見積書など最大5種類の帳票を作成できます。インボイス制度への対応や画像の配置、お客様による印刷を制限するなど細かいカスタマイズが可能で、作成した帳票は管理画面のアプリ内ページとお客様の注文履歴や注文詳細ページから印刷とPDF保存することができます。
Shopify PlusパートナーのWEBLIFEが提供しており、完全日本語対応で国内の商習慣に合う形式の帳票を作成できるため、ShopifyのOrder Printerではコードのカスタマイズや使い方のサポートが不安という場合はBiNDecの帳票出力アプリがおすすめです。
文言や項目のカスタマイズが簡単にできるBiNDecの帳票出力アプリ
BiNDecでは、その他にも独自のアプリを多数提供しています。ShopifyでのEC構築や運用に関してお悩みの方は、気軽にお問合せください。
BiNDecのオンライン相談に申込む