Shopify Order Printerを使用してテンプレートを作成およびカスタマイズする

Shopify Order Printerアプリを使用すると、管理画面でテンプレートを作成し、カスタマイズできます。Shopify Order Printerアプリには、デフォルトで以下のテンプレートが含まれています。

  • 請求書:お客様に送付する請求書
  • 明細表:ストアの住所とお客様の配送先住所のプリントアウト

Liquidを使用して、クーポン、ラベル、レシートなど、他の同封物のカスタムテンプレートを作成できます。

Shopify Order Printerアプリでテンプレートを作成する際の考慮事項

Shopify Order Printerアプリでテンプレートを作成する前に、以下の考慮事項を確認してください。

テンプレートを作成する

注文書の新しいテンプレートを作成できます。

手順

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Order Printer] をクリックします。

  3. [アプリを開く] をクリックします。

  4. [テンプレート] をクリックします。

  5. [テンプレートを作成する] をクリックします。

  6. [名前] フィールドに、ラベルやクーポンなど、テンプレートの名前を入力します。

  7. [コードを編集] セクションで、HTML、CSS、またはLiquidのコードを追加してテンプレートを作成します。

  8. 任意:テンプレートをプレビューするには、[プレビュー] をクリックします。

  9. [保存] をクリックします。

テンプレートを編集する

既存のテンプレートを編集することができます。テンプレートのカスタマイズに関する詳細は、「テンプレートのカスタマイズ例」を参照してください。

手順

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Order Printer] をクリックします。

  3. [アプリを開く] をクリックします。

  4. [テンプレート] をクリックします。

  5. 編集するテンプレートをクリックします。

  6. [コードを編集] セクションで、HTML、CSS、またはLiquidのコードを追加または編集します。

  7. 任意:テンプレートをプレビューするには、[プレビュー] をクリックします。

  8. [保存] をクリックします。

テンプレートのカスタマイズ例

Shopify Order Printerのテンプレートをカスタマイズする方法については、以下の例をご覧ください。

テンプレートにロゴを追加できます。

手順

  1. 管理画面から [コンテンツ] > [ファイル] の順に移動します。
  2. [ファイルをアップロード] をクリックし、アップロードする画像ファイルを選択します。
  3. ロゴ画像用のURLをコピーするには、[リンク] アイコンをクリックします。
  4. [設定] > [アプリと販売チャネル] の順にクリックします。
  5. [Order Printer] をクリックします。
  6. [テンプレート] をクリックします。
  7. 編集するテンプレートの名前をクリックします。
  8. コードエディタで、以下のコードブロックを貼り付けます。

liquid <div style="text-align: center;"> <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE"> </div>

  1. コード内のYOUR_IMAGE_URL_HEREを画像URLに置き換えます。
  2. 任意:ロゴを揃える場合は、text-align値をleftrightcenterのいずれかに変更します。
  3. 任意:ロゴの幅を調整するには、width値を8em2emのような大きい値または小さい値に変更します。
  4. 任意:テンプレートをプレビューするには、[プレビュー] をクリックします。
  5. [保存] をクリックします。

例:

テンプレートにロゴを追加した後は、HTMLがどのように表示されるか、以下の例で確認してください。

テンプレートにロゴを追加する方法のコードブロックを表示した例

表の幅を100%にする

表に境界線を追加し、幅を100%に拡大できます。表にtable-tabularクラスを追加する必要があります。

手順

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Order Printer] をクリックします。

  3. [アプリを開く] をクリックします。

  4. [テンプレート] をクリックします。

  5. 編集するテンプレートをクリックします。

  6. コードエディタで、編集する表を見つけて、表にtable-tabularクラスを追加します。

  7. 任意:テンプレートをプレビューするには、[プレビュー] をクリックします。

  8. [保存] をクリックします。

例:

<table class="table-tabular">
    ...
</table>

商品のサムネイルを表示する

注文テンプレートに商品サムネイルを追加できます。カスタムコードブロックをテンプレートに挿入する必要があります。

手順

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Order Printer] をクリックします。

  3. [アプリを開く] をクリックします。

  4. [テンプレート] をクリックします。

  5. 編集するテンプレートをクリックします。

  6. テンプレートにliquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}のコードブロックを追加します。

  7. 任意:テンプレートをプレビューするには、[プレビュー] をクリックします。

  8. [保存] をクリックします。

注文詳細を追加する

購入したアイテムの名前、数量、費用などの注文詳細をテンプレートに追加できます。

手順

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Order Printer] をクリックします。

  3. [アプリを開く] をクリックします。

  4. [テンプレート] をクリックします。

  5. 編集するテンプレートをクリックします。

  6. コードエディタで、Liquid変数を使用して注文の詳細を追加し、HTMLを使用して書式を追加します。たとえば、{{ line_item.price | money }}を使用すると、アイテムの価格が表示されます。

  7. 任意:テンプレートをプレビューするには、[プレビュー] をクリックします。

  8. [保存] をクリックします。

例:

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>

Shopifyで販売を開始する準備はできていますか?

無料体験を試す