Shopify Order Printerを使用してテンプレートを作成および編集する
Shopify Order Printerアプリを使用すると、管理画面でテンプレートを作成し、編集できます。Shopify Order Printerアプリには、デフォルトで以下のテンプレートが含まれています。
- 請求書：お客様に送付する請求書
- 明細表：ストアの住所とお客様の配送先住所のプリントアウト
Liquidを使用することにより、クーポン、ラベル、領収書など、その他の同封物のカスタムテンプレートを作成できます。Shopify Order Printerアプリは、HTML、CSS、Liquidの変数を使用して作成されたテンプレートに対応しています。
Shopify Order Printerアプリでテンプレートを作成する際の考慮事項
Shopify Order Printerアプリでテンプレートを作成する前に、以下の考慮事項を確認してください。
- Shopify Order Printerアプリでテンプレートを作成または編集するには、HTML、CSS、Liquidに精通している必要があります。Shopifyテーマサポートは、Shopifyのデザインポリシーの範囲内で微調整を行うサポートを提供しています。
- 最大15種類のテンプレートを作成できます。
- 対応しているテンプレートのカスタマイズすべてについては、Shopify Order Printer向けのLiquid変数と絞り込みに関するリファレンスを確認してください。
テンプレートを作成する
注文書の新しいテンプレートを作成できます。
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
[アプリを開く] をクリックします。
[テンプレート] をクリックします。
[テンプレートを作成する] をクリックします。
[名前] フィールドに、ラベルやクーポンなど、テンプレートの名前を入力します。
[コードを編集] セクションで、HTML、CSS、またはLiquidのコードを追加してテンプレートを作成します。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。
テンプレートを編集する
既存のテンプレートを編集することができます。テンプレートのカスタマイズに関する詳細は、「テンプレートのカスタマイズ例」を参照してください。
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
[アプリを開く] をクリックします。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
[コードを編集] セクションで、HTML、CSS、またはLiquidのコードを追加または編集します。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。
デフォルトのテンプレートを復元する
組み込みの明細表と請求書テンプレートをデフォルト値に復元できます。テンプレートをデフォルトに復元するには、以下のコードブロックを使用します。
デフォルトの請求書テンプレート
2024年6月6日からのバージョンです。
liquid
<div>
<div class="columns">
<h1>Invoice</h1>
<div>
<p style="text-align: right; margin: 0;">
Order {{ order.order_name }}<br />
{% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="columns" style="margin-top: 1.5em;">
<div class="address">
<strong>From</strong><br/>
{{ shop.name }}<br/>
{{ shop.address | format_address }}
{% if shop.phone %}{{ shop.phone }}{% endif %}
</div>
{% if order.billing_address %}
<div class="address">
<strong>Bill to</strong>
{{ order.billing_address | format_address }}
</div>
{% endif %}
{% if order.shipping_address %}
<div class="address">
<strong>Ship to</strong>
{{ order.shipping_address | format_address }}
{% if order.shipping_address.phone %}{{ order.shipping_address.phone }}{% endif %}
</div>
{% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
<thead>
<tr>
<th scope="col">Qty</th>
<th scope="col">Item</th>
<th scope="col" style="text-align: right;">Price</th>
</tr>
</thead>
<tbody>
{% for line_item in order.line_items %}
<tr>
<td scope="row">{{ line_item.quantity }}</td>
<td>{{ line_item.title }}
{% if line_item.line_level_discount_allocations.size > 0 %}
<span class="subduedText">
{% for discount_allocation in line_item.line_level_discount_allocations %}
<br>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
{% endfor %}
</span>
{% endif %}
</td>
<td style="text-align: right;">
{% if line_item.original_price != line_item.final_price %}
<span class="subduedText"><s>{{ line_item.original_price | money }}</s></span>
{% endif %}
{{ line_item.final_price | money }}
</td>
</tr>
{% endfor %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Subtotal</td>
<td style="text-align: right;">{{ order.line_items_subtotal_price | money }}</td>
</tr>
{% for discount_application in order.cart_level_discount_applications %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">{% if discount_application.title %}<span class="subduedText">{{ discount_application.title }}</span>{% endif %}</td>
<td style="text-align: right;">-{{ discount_application.total_allocated_amount | money }}</td>
</tr>
{% endfor %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Tax</td>
<td style="text-align: right;">{{ order.tax_price | money }}</td>
</tr>
{% if order.shipping_address %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Shipping</td>
<td style="text-align: right;">{{ order.shipping_price | money }}</td>
</tr>
{% endif %}
<tr>
<td scope="row" colspan="2" style="text-align: right;"><strong>Total</strong></td>
<td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
</tr>
{% if order.net_payment != order.total_net_amount %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Total Paid</td>
<td style="text-align: right;">{{ order.net_payment | money }}</td>
</tr>
{% endif %}
{% if order.total_refunded_amount > 0 %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Total Refunded</td>
<td style="text-align: right;">-{{ order.total_refunded_amount | money }}</td>
</tr>
{% endif %}
{% if order.net_payment != order.total_net_amount %}
<tr>
<td scope="row" colspan="2" style="text-align: right;"><strong>Outstanding Amount</strong></td>
<td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money }}</strong></td>
</tr>
{% endif %}
</tbody>
</table>
{% if transactions.size > 1 %}
<h2>Transaction Details</h2>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Amount</th>
<th scope="col">Kind</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{% for transaction in transactions %}
<tr>
<td scope="row">{{ transaction.gateway | payment_method }}</td>
<td>{{ transaction.amount | money }}</td>
<td>{{ transaction.kind }}</td>
<td>{{ transaction.status }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% if order.note %}
<h2>Note</h2>
<p>{{ order.note }}</p>
{% endif %}
<p style="margin-bottom: 0;">If you have any questions, please send an email to <u>{{ shop.email }}</u></p>
</div>
デフォルトの明細表テンプレート
2024年6月6日からのバージョンです。
liquid
<div>
<div class="columns">
<h1>Packing Slip</h1>
<div class="address">
<p style="text-align: right; margin: 0;">
Order {{ order.order_name }}<br />
{% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="columns" style="margin-top: 1.5em;">
<div class="address">
<strong>From</strong><br/>
{{ shop.name }}<br/>
{{ shop.address | format_address }}
</div>
{% if order.shipping_address %}
<div class="address">
<strong>Ship to</strong>
{{ order.shipping_address | format_address }}
</div>
{% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
<thead>
<tr>
<th scope="col" style="width: 15%; text-align: left;">Qty</th>
<th scope="col" style="width: 85%; text-align: left;">Item</th>
</tr>
</thead>
<tbody>
{% for line_item in order.line_items %}
<tr>
<td scope="row" style="text-align: left;">{{ line_item.quantity }}</td>
<td style="text-align: left;">{{ line_item.title }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>