Shopify Order Printer テンプレートの作成とカスタマイズ

テンプレートをさまざまな方法でカスタマイズしたり、独自のテンプレートを作成したりできます。Shopify Order Printer アプリは、HTML、CSS、Liquid 変数で作成されたテンプレートをサポートしています。テンプレートをカスタマイズする前に、サポートされているすべてのテンプレートのカスタマイズについて、Shopify Order Printer の Liquid 変数とフィルターのリファレンスをよく確認してください。

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

このページの内容

テンプレートにロゴを追加する

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

手順：

管理画面から、[コンテンツ] > [ファイル] に移動します。
[ファイルをアップロード] をクリックし、アップロードする画像ファイルを選択します。
ロゴ画像の URL をコピーするには、[リンク] アイコンをクリックします。
[設定] > [アプリ] の順にクリックします。
[Order Printer] をクリックします。
[テンプレート] をクリックします。
編集するテンプレートの名前をクリックします。
コードエディタに、以下のコードブロックを貼り付けます。

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

コード内の `YOUR_IMAGE_URL_HERE` を画像の URL に置き換えます。
任意：ロゴを配置するには、`text-align` の値を `left`、`right`、または `center` に変更します。
任意：ロゴの幅を調整するには、`width` の値を `8em` や `2em` などのように、より大きい値か小さい値に変更します。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。

例：

テンプレートにロゴを追加した後、HTMLがどのように表示されるかの例を、以下に示します。

テンプレートに画像を追加する

テンプレートに画像を追加できます。

手順：

管理画面から、[コンテンツ] > [ファイル] に移動します。
[ファイルをアップロード] をクリックし、アップロードする画像ファイルを選択します。
画像の URL をコピーするには、[リンク] アイコンをクリックします。
[設定] > [アプリ] の順にクリックします。
[Order Printer] をクリックします。
[テンプレート] をクリックします。
編集するテンプレートの名前をクリックします。
コードエディタで、`<img src=”Image Source” />` コードブロックを貼り付けます。
コード内の `Image Source` を画像の URL に置き換えます。
[保存] をクリックします。

表の幅を 100% にする

表に枠線を追加し、幅を 100% に引き延ばすことができます。表に `table-tabular` クラスを追加する必要があります。

手順：

管理画面で、[アプリ] > Order Printer に移動します。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
コードエディタで編集するテーブルを探し、そのテーブルに `table-tabular` クラスを追加します。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。

例：

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

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

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

手順：

管理画面で、[アプリ] > Order Printer に移動します。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} コードブロックをテンプレートに追加します。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。

注文詳細を追加する

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

手順：

管理画面で、[アプリ] > Order Printer に移動します。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
コードエディタで Liquid 変数を使用して注文詳細を追加し、HTML を使用してフォーマットを追加します。たとえば、`{{ line_item.price | money }}` を使用すると、アイテムの価格が表示されます。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。

例：

Nylaは、配送されるアイテムのリストを明細書テンプレートに記載したいと考えています。彼女は、Shopify Order Printerアプリの[明細書] テンプレートの下部に、以下のコードを追加します。その結果、Nylaの明細書には、購入されたアイテムを一覧表示する表が含まれるようになります。

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ 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>

テンプレートにバーコードを追加する

テンプレートにバーコードを追加できます。

手順：

管理画面で、[アプリ] > Order Printer に移動します。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
<s-barcode value="a" /> コードブロックをテンプレートに追加します。
`value` の値をバーコードのテキスト値に置き換えます。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。

テンプレートに QR コードを追加する

テンプレートに QR コードを追加できます。

手順：

管理画面で、[アプリ] > Order Printer に移動します。
[テンプレート] をクリックします。
編集するテンプレートをクリックします。
<s-barcode type="qrcode" value="" /> コードブロックをテンプレートに追加します。
`value` の値を QR コードのテキスト値に置き換えます。
任意：テンプレートをプレビューするには、[プレビュー] をクリックします。
[保存] をクリックします。

テンプレートで Google フォントを使用する

テンプレートで Google フォントを使用するには、以下のコードをテンプレートに貼り付けてから、`FontName` 変数を Google フォントの名前に置き換えます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

フォントサイズを大きくする

テンプレートのフォントサイズを大きくするには、以下のコードをテンプレートに貼り付け、`14` の数字をより大きい値または小さい値に調整します。

<style>
  :root {
    --font-size: 14px;
  }
</style>

テンプレートの見出しのフォントサイズを大きくするには、以下のコードをテンプレートに貼り付け、見出しの横にある値を調整します。

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

レガシー Order Printer アプリからテンプレートをインポートした場合、以下のコードブロックを使用してフォントサイズを大きくすることができます。

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>