Shopify Order Printerのテンプレートを作成してカスタマイズする
テンプレートのカスタマイズにはさまざまな方法があり、自分だけのテンプレートを作成することができます。Shopify Order Printerアプリは、HTML、CSS、Liquidの変数を使用して作成されたテンプレートに対応しています。テンプレートをカスタマイズする前に、対応するテンプレートの全カスタマイズ項目に関して、Shopify Order PrinterでのLiquidの変数とフィルターのリファレンスを確認してください。
Shopify Order Printerのテンプレートをカスタマイズする方法については、以下の例をご覧ください。
目次
テンプレートにロゴを追加する
テンプレートにロゴを追加できます。
手順
- 管理画面から [コンテンツ] > [ファイル] の順に移動します。
- [ファイルをアップロード] をクリックし、アップロードする画像ファイルを選択します。
- ロゴ画像用のURLをコピーするには、[リンク] アイコンをクリックします。
- [設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
- [テンプレート] をクリックします。
- 編集するテンプレートの名前をクリックします。
- コードエディタで、以下のコードブロックを貼り付けます。
liquid
<div style="text-align: center;">
<img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
- コード内の
YOUR_IMAGE_URL_HEREを画像URLに置き換えます。 - 任意：ロゴを揃える場合は、
text-align値をleft、right、centerのいずれかに変更します。 - 任意：ロゴの幅を調整するには、
width値を8emや2emのような大きい値または小さい値に変更します。 - 任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
- [保存] をクリックします。
例：
テンプレートにロゴを追加した後は、HTMLがどのように表示されるか、以下の例で確認してください。
テンプレートに画像を追加する
テンプレートには、画像を追加することができます。
手順
- 管理画面から [コンテンツ] > [ファイル] の順に移動します。
- [ファイルをアップロード] をクリックし、アップロードする画像ファイルを選択します。
- 画像用のURLをコピーするには、[リンク] アイコンをクリックします。
- [設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
- [テンプレート] をクリックします。
- 編集するテンプレートの名前をクリックします。
- コードエディタで、コードブロック
<img src=”Image Source” />を貼り付けます。 - コード内の
Image Sourceを画像URLに置き換えます。 - [保存] をクリックします。
表の幅を100%にする
表に境界線を追加し、幅を100%に拡大できます。表にtable-tabularクラスを追加する必要があります。
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
[アプリを開く] をクリックします。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
コードエディタで、編集する表を見つけて、表に
table-tabularクラスを追加します。任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。
例：
<table class="table-tabular">
...
</table>商品のサムネイルを表示する
注文テンプレートに商品サムネイルを追加できます。カスタムコードブロックをテンプレートに挿入する必要があります。
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
[アプリを開く] をクリックします。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
テンプレートに
liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}のコードブロックを追加します。任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。
注文詳細を追加する
購入したアイテムの名前、数量、費用などの注文詳細をテンプレートに追加できます。
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
[アプリを開く] をクリックします。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
コードエディタで、Liquid変数を使用して注文の詳細を追加し、HTMLを使用して書式を追加します。たとえば、
{{ line_item.price | money }}を使用すると、アイテムの価格が表示されます。任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。
例：
Nylaは、明細表のテンプレートを編集し、配送されるアイテムのリストを追加したいと考えています。それで、Shopify Order Printerアプリの [明細表] テンプレートの下部に、以下のコードを追加します。結果として、Nylaの明細表には、購入したアイテムをリストアップした表が掲載されるようになりました。
liquid
<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>
テンプレートにバーコードを追加する
テンプレートには、バーコードを追加することができます
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
[アプリを開く] をクリックします。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
テンプレートに
<s-barcode value="a" />のコードブロックを追加します。``値を、バーコードのテキスト値に変更します。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。
テンプレートにQRコードを追加する
テンプレートには、QRコードを追加することができます。
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [Order Printer] をクリックします。
[アプリを開く] をクリックします。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
テンプレートに
<s-barcode type="qrcode" value="" />のコードブロックを追加します。``の値を、QRコードのテキストの値に置き換えます。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。
テンプレートでGoogleフォントを使用する
テンプレートでGoogleフォントを使用するには、以下のコードをテンプレートに貼り付け、FontName変数をGoogleフォントの名前に変更します。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
body {
font-family: FontName, serif;
}
</style>フォントサイズを拡大する
テンプレートのフォントサイズを拡大するには、以下のコードをテンプレートに貼り付け、この数値「14」を増減させて調整します。
<style>
:root {
--font-size: 14px;
}
</style>テンプレート内の見出しのフォントサイズを拡大するには、以下のコードをテンプレートに貼り付け、見出しの横にある数値を調整します。
<style>
:root {
--h1-font-size: 18px;
--h2-font-size: 16px;
--h3-font-size: 14px;
}
</style>従来のOrder Printerアプリからテンプレートをインポートした場合は、以下のコードブロックを使用してフォントサイズを拡大できます。
<style>
:root {
--legacy-font-size: 14px;
--legacy-print-font-size: 18px;
}
</style>