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

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

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

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

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

手順:

  1. 管理画面からアプリに移動します。

  2. [Order Printer] をクリックしてアプリを開きます。

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

    [テンプレートを管理する] ボタン

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

    [テンプレートを追加する] をクリックする

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

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

  7. 完了したら [保存] をクリックします。

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

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

手順:

  1. 管理画面からアプリに移動します。

  2. [Order Printer] をクリックしてアプリを開きます。

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

    [テンプレートを管理する] ボタン

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

    編集するテンプレートを選択する

  5. コードフィールドにHTML、CSS、またはLiquidのコードを追加あるいは編集して、テンプレートに変更を加えます。テンプレートのカスタマイズ例については、テンプレートのカスタマイズ例を参照してください。

  6. 完了したら [保存] をクリックします。

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

以下の例は、Order Printerテンプレートをカスタマイズする一般的な方法です。

  • Order Printerテンプレートにロゴを追加する
  • 表の幅を100%にする
  • 商品のサムネイルを表示する
  • 注文詳細を追加する

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

注文の請求書、明細表、カスタムテンプレートにロゴを追加できます。

  1. [ファイルをアップロード] をクリックして、コンピューター上の画像ファイルを選択します。

  2. ファイルページで画像URLをクリックして強調表示し、テキストをコピーします。

    画像URLをコピーする

  3. 管理画面からアプリに移動します。

  4. [Order Printer] をクリックしてアプリを開きます。

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

    [テンプレートを管理する] ボタン

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

    編集するテンプレートを選択する

  7. テンプレートのロゴを表示する場所に次のコードスニペットを入力します。<img src="your-image-URL">

  8. コピーした画像URLとyour-image-URLを置き換えます。ロゴを表示する場所によって、画像の前後に<br/>タグを使用して必要に応じた改行を追加します。

HTMLでは以下のようになります。

HTMLコード例

請求書では以下のようになります。

カスタマイズしたメールテンプレートの例

例: 表の幅を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を使用して書式を追加します。たとえば、``と追加すると商品の価格を印刷できます。

  6. 完了したら [保存] をクリックします。

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

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if show_line_item_taxes %}
      <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で販売を開始する準備はできていますか?

無料体験を試す