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

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

請求書 - お客様に送信できる基本的な請求書
明細表 - ストアの住所とお客様の配送先住所が記載された印刷物

このページの内容

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

新しい Order Printer のテンプレートを作成するには、HTML、CSS、および Liquid の知識が必要です。無料の Shopify テーマの微調整であれば、Shopify デザインポリシーの範囲内で、Shopify テーマサポートが対応できる場合があります。より複雑な変更が必要な場合、または Shopify 製以外のテーマを使用している場合は、Shopify パートナーを雇うことをご検討ください。

手順:

管理画面から、[アプリ] > [Order Printer (旧)] に移動します。
[テンプレートを管理] をクリックします。
[テンプレートを追加] をクリックします。
[名前] フィールドに、新しいテンプレートの名前を入力します。
[コード] フィールドに HTML、CSS、または Liquid コードを追加して、テンプレートを作成します。
完了したら、[保存] をクリックします。

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

Order Printer のテンプレートを編集するには、HTML、CSS、および Liquid の知識が必要です。Shopify テーマサポートはテンプレートの大幅な編集は行えませんが、Shopify デザインポリシーの範囲内で、無料の Shopify テーマの微調整を行える場合があります。より複雑な変更については、Shopify パートナーを雇うことをご検討ください。

手順:

管理画面から、[アプリ] > [Order Printer (旧)] に移動します。
[テンプレートを管理] をクリックします。
編集するテンプレートの名前をクリックします。
[コード] フィールドで HTML、CSS、または Liquid のコードを追加または編集して、テンプレートに変更を加えます。テンプレートのカスタマイズ例については、「テンプレートのカスタマイズの例」を参照してください。
完了したら、[保存] をクリックします。

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

以下の例では、Order Printer テンプレートをカスタマイズする一般的な方法をいくつか説明します。

例: Order Printer テンプレートにロゴを追加する

デスクトップ

管理画面で、[コンテンツ] > [ファイル] の順に移動します。
[ファイルをアップロード] をクリックし、コンピューター上の画像ファイルを選択します。
[ファイル] ページで、アップロードしたファイルを見つけて [URL をコピー] をクリックします。
管理画面で、[設定] > [アプリ] の順にクリックします。
[Order Printer] をクリックしてアプリを開きます。
[テンプレートを管理] をクリックします。
編集するテンプレートの名前をクリックします。
ロゴを表示させたい場所に、次のコードスニペットをテンプレートに入力します: <img src="your-image-URL">。
your-image-URL を、コピーした画像の URL に置き換えます。ロゴを表示する場所によっては、画像の前後に改行を入れるために <br/> タグを追加する必要がある場合があります。

モバイル

Shopify app から、アイコンをタップします。
[コンテンツ] メニューでアイコンをタップしてから、[ファイル] をタップします。
[ファイルをアップロード] をタップし、コンピューター上の画像ファイルを選択します。
[ファイル] ページで、アップロードしたファイルを見つけて [URL をコピー] をタップします。
管理画面で、[設定] > [アプリ] の順にタップします。
[Order Printer] をタップしてアプリを開きます。
[テンプレートを管理] をタップします。
編集するテンプレートの名前をタップします。
ロゴを表示させたい場所に、次のコードスニペットをテンプレートに入力します: <img src="your-image-URL">。
your-image-URL を、コピーした画像の 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 }} はアイテムの価格を出力します。
完了したら、[保存] をクリックします。

たとえば、ナイラさんが配送されるアイテムのリストを含めるために明細表のテンプレートを編集したい場合、Order Printerアプリで明細表テンプレートの末尾に以下のコードを追加します。

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

その結果、ナイラさんの明細表には、購入されたアイテムを一覧表示する表が含まれるようになります。