Shopify Order Printerのテンプレートを作成してカスタマイズする

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

  • 請求書 - お客様に送信できる基本の請求書
  • 明細表 - ショップの住所とお客様の配送先住所のプリントアウト

Shopify Order Printerの新しいテンプレートを作成する

Shopify Order Printerの新しいテンプレートを作成するには、HTML、CSS、Liquidの機能を確認する必要があります。Shopifyテーマのサポートは、Shopifyのデザインポリシーの範囲内で小規模な調整を行うのに役立ちます。

手順

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

  2. [Order Printer] をクリックします。

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

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

  5. 名前フィールドに新しいテンプレートの名前を入力します。

  6. コードフィールドにHTML、CSS、またはLiquidのコードを追加してテンプレートを作成します。

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

Shopify Order Printerのテンプレートを編集する

Shopify Order Printerのテンプレートを編集するには、HTML、CSS、Liquidの機能を確認する必要があります。Shopifyテーマのサポートは、Shopifyのデザインポリシーの範囲内で小規模な調整を行うのに役立ちます。

手順

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

  2. [Order Printer] をクリックします。

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

  4. 編集するテンプレートの名前をクリックします。

  5. [コード] フィールドでHTML、CSS、Liquidのコードを追加または編集して、テンプレートを更新します。テンプレートのカスタマイズに関する詳細は、「テンプレートのカスタマイズ例」を参照してください。

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

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

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

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

Example HTML code

表の幅を100%にする

表に境界線を追加し、幅を100%に拡大するには、表にtable-tabularクラスを追加します。

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

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

注文テンプレートに商品のサムネイルを追加するには、以下のコードをテンプレートに挿入します。

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

注文詳細を追加する

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

手順

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

  2. [Order Printer] をクリックします。

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

  4. 編集するテンプレートの名前をクリックします。

  5. Liquid変数を使用して注文詳細を追加し、HTMLを使用して書式を追加します。たとえば、{{ line_item.price | money }}コードを使用すると、アイテムの価格を印刷できます。

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

たとえば、Nylaは、配送されるアイテムのリストを記載するように明細表のテンプレートの印刷を検討しています。彼女はShopify Order PrinterアプリのPacking slipテンプレートの下に次のコードを追加します。

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>

結果として、Nylaの明細表には、購入したアイテムをリストアップした表が含まれるようになりました。

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

無料体験を試す