建立與自訂 Shopify Order Printer 範本

您可以用多種方式自訂範本，並建立自己的範本。Shopify Order Printer app 支援以 HTML、CSS 與 Liquid 變數製作的範本。在自訂範本前，請先熟悉 Shopify Order Printer 的 Liquid 變數與過濾器參考，以瞭解所有支援的範本自訂項目。

請參考以下範例，瞭解如何自訂 Shopify Order Printer 範本。

本頁內容

在範本中加入標誌

您可以在範本中加入標誌。

步驟：

在 Shopify 管理介面中，前往內容 > 檔案。
按一下 上傳檔案，然後選取您要上傳的圖片檔案。
若要複製標誌圖片的網址，按一下連結圖示。
按一下設定 > app。
按一下Order Printer。
按一下範本。
按一下您要編輯的範本名稱。
在程式碼編輯器中，貼上以下程式碼區塊：

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

將程式碼中的 YOUR_IMAGE_URL_HERE 替換為您的圖片網址。
選用：若要調整標誌對齊方式，將 text-align 的值改為 left、right 或 center。
選用：若要調整標誌寬度，將 width 的值改成較大或較小的數值，例如 8em 或 2em。
選用：若要預覽範本，按一下預覽。
按一下儲存。

範例：

以下範例示範在範本加入標誌後，HTML 的呈現方式：

在範本中加入圖片

您可以在範本中加入圖片。

步驟：

在 Shopify 管理介面中，前往內容 > 檔案。
按一下 上傳檔案，然後選取您要上傳的圖片檔案。
若要複製圖片的網址，按一下連結圖示。
按一下設定 > app。
按一下Order Printer。
按一下範本。
按一下您要編輯的範本名稱。
在程式碼編輯器中，貼上 <img src=”Image Source” /> 程式碼區塊。
將程式碼中的 Image Source 替換為您的圖片網址。
按一下儲存。

將表格寬度設為 100%

您可以為表格加上框線，並將其延展到 100% 寬度。您需要在表格上加入 table-tabular 類別。

步驟：

在 Shopify 管理介面中，前往app > Order Printer。
按一下範本。
按一下您要編輯的範本。
在程式碼編輯器中，找到要編輯的表格，然後在該表格加入 table-tabular 類別。
選用：若要預覽範本，按一下預覽。
按一下儲存。

範例：

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

顯示商品縮圖

您可以在訂單範本中加入商品縮圖。您需要在範本中插入自訂程式碼區塊。

步驟：

在 Shopify 管理介面中，前往app > Order Printer。
按一下範本。
按一下您要編輯的範本。
在範本中加入 {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} 程式碼區塊。
選用：若要預覽範本，按一下預覽。
按一下儲存。

加入訂單詳情

您可以在範本中加入訂單詳情，例如已購買品項的名稱、數量與價格。

步驟：

在 Shopify 管理介面中，前往app > Order Printer。
按一下範本。
按一下您要編輯的範本。
在程式碼編輯器中，使用 Liquid 變數加入訂單詳情，並用 HTML 加上格式。例如，使用 {{ line_item.price | money }} 會顯示該品項的價格。
選用：若要預覽範本，按一下預覽。
按一下儲存。

範例：

Nyla 想要編輯她的裝箱單範本，加入將出貨的品項清單。她在 Shopify Order Printer app 中的裝箱單範本底部加入以下程式碼。因此，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>

在範本中加入條碼

您可以在範本中加入條碼。

步驟：

在 Shopify 管理介面中，前往app > Order Printer。
按一下範本。
按一下您要編輯的範本。
在範本中加入 <s-barcode value="a" /> 程式碼區塊。
將 `` 的值替換為您的條碼文字值。
選用：若要預覽範本，按一下預覽。
按一下儲存。

在範本中加入 QR 碼

您可以在範本中加入 QR 碼。

步驟：

在 Shopify 管理介面中，前往app > Order Printer。
按一下範本。
按一下您要編輯的範本。
在範本中加入 <s-barcode type="qrcode" 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 app 匯入範本，則可使用下列程式碼區塊調大字型大小：

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