Order Printerのテンプレートをカスタマイズ
管理画面で、Order Printerアプリ用に最大15個のテンプレートを作成してカスタマイズできます。デフォルトでは、Order Printerアプリには以下の2つのテンプレートが含まれています。
- 請求書 - お客様に送信できる基本の請求書
- 明細表 - ショップの住所とお客様の配送先住所のプリントアウト
Order Printerの新しいテンプレートを作成する
Order Printerの新しいテンプレートを作成するには、HTML、CSS、Liquidに精通している必要があります。Shopifyテーマのサポートは、Shopifyのデザインポリシーの範囲内で小規模な調整を行うのに役立ちます。
手順
管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
[Order Printer] をクリックしてアプリを開きます。
[テンプレートを管理する] をクリックします。
[テンプレートを追加する] をクリックします。
名前フィールドに新しいテンプレートの名前を入力します。
コードフィールドにHTML、CSS、またはLiquidのコードを追加してテンプレートを作成します。
完了したら [保存] をクリックします。
Order Printerのテンプレートを編集する
Order Printerのテンプレートを編集するには、HTML、CSS、Liquidに精通している必要があります。Shopifyテーマのサポートは、Shopifyのデザインポリシーの範囲内で小規模な調整を行うのに役立ちます。
手順
管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
[Order Printer] をクリックしてアプリを開きます。
[テンプレートを管理する] をクリックします。
編集するテンプレートの名前をクリックします。
コードフィールドでHTML、CSS、またはLiquidのコードを追加あるいは編集して、テンプレートに変更を加えます。テンプレートのカスタマイズ例をプレビューするには、テンプレートのカスタマイズ例を参照してください。
完了したら [保存] をクリックします。
テンプレートのカスタマイズ例
以下の例は、Order Printerテンプレートをカスタマイズする一般的な方法について説明しています。
例：Order Printerテンプレートにロゴを追加する
- 管理画面から [コンテンツ] > [ファイル] の順に移動します。
- [ファイルをアップロード] をクリックし、コンピューター上の画像ファイルを選択します。
- ファイルページで、アップロードされたファイルを探して [URLをコピー] をクリックします。
- 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックしてアプリを開きます。
- [テンプレートを管理する] をクリックします。
- 編集するテンプレートの名前をクリックします。
- テンプレートのロゴを表示する場所に次のコードスニペットを入力します。
<img src="your-image-URL"> - コピーした画像URLと
your-image-URLを置き換えます。ロゴを表示する場所によって、画像の前後に<br/>タグを使用して必要に応じた改行を追加します。
- Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
- [ストアの設定] セクションで、[ファイル] をタップします。
- [ファイルをアップロード] をタップし、コンピューター上の画像ファイルを選択します。
- [ファイル] ページで、アップロードされたファイルを探して [URLをコピー] をタップします。
- 管理画面から、[設定] > [アプリと販売チャネル] の順にタップします。
- [Order Printer] をタップしてアプリを開きます。
- [テンプレートを管理] をタップします。
- 編集するテンプレートの名前をタップします。
- テンプレートのロゴを表示する場所に次のコードスニペットを入力します。
<img src="your-image-URL"> - コピーした画像URLと
your-image-URLを置き換えます。ロゴを表示する場所によって、画像の前後に<br/>タグを使用して必要に応じた改行を追加します。
- Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
- [ストアの設定] セクションで、[ファイル] をタップします。
- [ファイルをアップロード] をタップし、コンピューター上の画像ファイルを選択します。
- [ファイル] ページで、アップロードされたファイルを探して [URLをコピー] をタップします。
- 管理画面から、[設定] > [アプリと販売チャネル] の順にタップします。
- [Order Printer] をタップしてアプリを開きます。
- [テンプレートを管理] をタップします。
- 編集するテンプレートの名前をタップします。
- テンプレートのロゴを表示する場所に次のコードスニペットを入力します。
<img src="your-image-URL"> - コピーした画像URLと
your-image-URLを置き換えます。ロゴを表示する場所によって、画像の前後に<br/>タグを使用して必要に応じた改行を追加します。
HTMLでは以下のようになります。 
例：表の幅を100%にする
表に境界線を表示し、100%の幅に伸ばすには、表にtable-tabularクラスを追加します。
<table class="table-tabular">
...
</table>例：商品のサムネイルを表示する
商品のサムネイルを含めるには、以下のコードをテンプレートに挿入します。
{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}注文詳細を追加する
購入したアイテムの名前、数量、費用などの注文詳細をテンプレートに追加できます。テンプレートに注文詳細を追加するには、以下の手順を実行します。
管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
[Order Printer] をクリックしてアプリを開きます。
[テンプレートを管理する] をクリックします。
編集するテンプレートの名前をクリックします。
Liquid変数を使用して注文詳細を追加し、HTMLを使用して書式を追加します。たとえば、
{{ line_item.price | money }}と追加するとアイテムの価格を印刷できます。完了したら [保存] をクリックします。
たとえば、Nylaは、配送されるアイテムのリストを含めるように明細表のテンプレートを編集することを検討しています。彼女はOrder PrinterアプリのPacking slipテンプレートの下に次のコードを追加します。
<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<thead>
<tr>
<th>Quantity</th>
<th>Item</th>
{% if tax_lines.size > 0 %}
<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>{{ line_item.price | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>結果として、Nylaの明細表には、購入したアイテムをリストアップした表が掲載されるようになりました。