Shopify Order Printerを使用したテンプレートの作成と編集

Shopify 管理画面で 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 デザインポリシーの範囲内で、Shopify テーマサポートが対応できる場合があります。より複雑な変更が必要な場合、または Shopify 製以外のテーマを使用している場合は、Shopify パートナーを雇うことをご検討ください。
最大 15 種類のテンプレートを作成できます。
サポートされているすべてのテンプレートのカスタマイズについては、Shopify Order Printer の Liquid 変数とフィルターのリファレンスを確認してください。

テンプレートを作成する

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

ピッキングリストのテンプレートを設定するには、「Shopify Order Printer アプリを使用してピッキングリストを設定および印刷する」を参照してください。

手順：

管理画面から、[アプリ] > [Order Printer] の順に移動します。
[テンプレート] をクリックします。
[テンプレートを作成] をクリックします。
[名前] フィールドに、ラベルやクーポンなど、テンプレートの名前を入力します。
[コードを編集] セクションで、HTML、CSS、または Liquid コードを追加してテンプレートを作成します。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。

テンプレートを編集する

既存のテンプレートを編集できます。Order Printer テンプレートのカスタマイズについて、詳しくはこちらをご覧ください。

手順：

管理画面から、[アプリ] > [Order Printer] の順に移動します。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
[コードを編集] セクションで、HTML、CSS、または Liquid コードを追加または編集します。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。

デフォルトのテンプレートを復元する

組み込みの明細書と請求書のテンプレートをデフォルト値に復元できます。以下のコードブロックを使用して、テンプレートをデフォルトに復元します。

請求書のデフォルトテンプレート

2024年6月6日時点のバージョン。

<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日時点のバージョン。

<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>