【Shopify公式おすすめ無料アプリ】「Order Printer」を日本語で実装する方法【初心者向け】
Shopifyエンジニア
Shopifyで注文後に明細書や領収書の印刷をしたいけど、いいアプリないかなー。できれば無料で実装したいな。誰か教えてくれないかなー
こういった疑問にお答えします。
この記事のテーマ
Shopify 無料アプリ「Order Printer」を日本語で実装する方法がわかる
もくじ
- Shopifyアプリ「Order Printer」とは
- Shopifyアプリ「Order Printer」の設定方法
- Shopifyアプリ「Order Printer」のテンプレート
※随時追加していきます。
この記事を書いている僕は、2020年からShopifyエキスパートで働いて、現在はShopifyフリーランスエンジニアとして活動しています。
ディレクションもしたり、マーケティングもやったりと、幅広くEC業務に携わっていて、デイトラShopifyコースでメンターもしているので、これからShopifyやECサイトについて、勉強していきたいなーって人に参考になればと思います。
Shopifyアプリ「Order Printer」とは
ShopifyアプリのOrder Printerは、配送の際に必要になる納品書や領収書などの書類を印刷することができるアプリです。
Shopifyから公式に出ているアプリで、無料で使用することができます。
HTML・CSS・Liquid (Shopifyテンプレート言語）を編集することで、書類のテンプレートをカスタマイズして使用することができます。会社のロゴの画像を挿入したり、文字・線・色などを変更することが可能です。
Shopifyアプリ「Order Printer」の設定方法
※作成中
Shopifyアプリ「Order Printer」のテンプレート
納品書テンプレート（英語版）
ちょっと長いですが、、、
<p style="float: right; text-align: right; margin: 0;">
{{ "now" | date: "%m/%d/%y" }}<br />
Invoice for {{ order_name }}
</p>
<div style="float: left; margin: 0 0 1.5em 0;" >
<strong style="font-size: 2em;">{{ shop_name }}</strong><br /><br />
{{ shop.address }}<br/>
{{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
{{ shop.country }}
</div>
<hr />
<h3 style="margin: 0 0 1em 0;">Item Details</h3>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<thead>
<tr>
<th>Product Image</th>
<th>Quantity</th>
<th>Item</th>
<th>Device<th>
{% if show_line_item_taxes %}
<th>Taxes</th>
{% endif %}
<th>Price</th>
</tr>
</thead>
<tbody>
{% for line_item in line_items %}
<tr>
<td><img src="{{ line_item.product.featured_image | product_img_url: 'thumb' }}" /></td>
<td>{{ line_item.quantity }} </td>
<td>{{ line_item.quantity }} <b>{{ line_item.title }}</b></td>
{% comment %}
<td>
{% unless line_item.variant.title contains 'Default' %}
{{ line_item.variant.title }}
{% endunless %}
</td>
{% endcomment %}
<td>
{% assign property_size = line_item.properties | size %}
{% if property_size > 0 %}
{% for p in line_item.properties %}
{% unless p.last == blank %}
<b>{{ p.first }}:</b>
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
<b>{{ p.last }}</b>
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
<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>{{ 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;">Payment Details</h3>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<tr>
<td>Subtotal price:</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>Total tax:</td>
<td>{{ tax_price | money }}</td>
</tr>
{% if shipping_address %}
<tr>
<td>Shipping:</td>
<td>{{ shipping_price | money }}</td>
</tr>
{% endif %}
<tr>
<td><strong>Total price:</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;">Shipping Details</h3>
<div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid black;">
<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 }}
</div>
{% endif %}
<p>If you have any questions, please send an email to <u>{{ shop.email }}</u></p>これをベースにカスタマイズしていきます。
※続きまた書いていきます。
同じ内容で動画をこの講座へ11月中に追加でアップする予定です♪
【最新 Online Store 2.0 対応】Shopifyストア構築を１時間でマスターしよう 【初心者向け】
1時間でShopifyストアを作成します。オンラインストアを作成したことがない人でも基礎から学んで、簡単に作成できるようになります。