建立並自訂 Shopify Order Printer 範本

您可以透過多種方式自訂範本及建立自己專屬的範本。Shopify Order Printer 應用程式支援使用 HTML、CSS 和 Liquid 變數建立的範本。自訂範本之前，請務必熟悉 Shopify Order Printer 的 Liquid 變數和篩選條件參考，瞭解所有支援的範本自訂項目。

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

此頁面上

將標誌新增至範本

您可以在範本中新增標誌。

步驟如下：

在 Shopify 管理介面中，前往「內容」>「檔案」。
點擊「上傳檔案」，然後選取您要上傳的圖片檔案。
點按連結圖示即可複製標誌圖片網址。
點按「設定」>「應用程式和銷售管道」。
點擊「Order Printer」。
點擊「範本」。
點擊您要編輯的範本名稱。
將下列程式碼區塊貼到程式碼編輯器中：

liquid <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 管理介面中，前往「內容」>「檔案」。
點擊「上傳檔案」，然後選取您要上傳的圖片檔案。
點按連結圖示即可複製圖片網址。
點按「設定」>「應用程式和銷售管道」。
點擊「Order Printer」。
點擊「範本」。
點擊您要編輯的範本名稱。
在程式碼編輯器中貼上 <img src=”Image Source” /> 程式碼區塊。
將程式碼中的 Image Source 更換為您的圖片網址。
按一下「儲存」。

將表格寬度設為 100%

若要在表格中新增邊框，並將寬度設為 100%，您需要將 table-tabular 類別加到表格。

步驟如下：

在 Shopify 管理介面中，前往「設定」>「應用程式和銷售管道」。
按一下「Order Printer」。
點擊「開啟應用程式」。
點擊「範本」。
點按要編輯的範本。
在程式碼編輯器中找到您要編輯的表格，然後將 table-tabular 類別加到該表格。
選用：若要預覽範本，請按一下「預覽」。
按一下「儲存」。

範例：

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

顯示商品縮圖

若要在訂單範本中新增商品縮圖，需要將自訂程式碼區塊插入範本。

步驟如下：

在 Shopify 管理介面中，前往「設定」>「應用程式和銷售管道」。
按一下「Order Printer」。
點擊「開啟應用程式」。
點擊「範本」。
點按要編輯的範本。
將程式碼區塊 liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} 加到範本。
選用：若要預覽範本，請按一下「預覽」。
按一下「儲存」。

新增訂單詳細資訊

您可以在範本中加入訂單詳細資訊，例如：所購買品項的名稱、數量及價格。

步驟如下：

在 Shopify 管理介面中，前往「設定」>「應用程式和銷售管道」。
按一下「Order Printer」。
點擊「開啟應用程式」。
點擊「範本」。
點按要編輯的範本。
在程式碼編輯器中，使用 Liquid 變數新增訂單詳細資訊和 HTML 以加入格式設定。例如，使用 {{ line_item.price | money }} 可顯示品項的價格。
選用：若要預覽範本，請按一下「預覽」。
按一下「儲存」。

範例：

假設 Nyla 想要編輯裝箱單範本，以納入待運送品項的清單。她在 Shopify Order Printer 應用程式中，將下列程式碼新增至其「裝箱單」(Packing slip) 範本的最下方。於是，Nyla 的裝箱單現在包含一張列出已購買品項的表格。

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

將條碼新增至範本

您可以將條碼新增至範本

步驟如下：

在 Shopify 管理介面中，前往「設定」>「應用程式和銷售管道」。
按一下「Order Printer」。
點擊「開啟應用程式」。
點擊「範本」。
點按要編輯的範本。
在範本中新增 <s-barcode value="a" /> 程式碼區塊。
使用條碼的文字值取代 `` 值。
選用：若要預覽範本，請按一下「預覽」。
按一下「儲存」。

將 QR 碼新增至範本

您可以將 QR 碼新增至範本。

步驟如下：

在 Shopify 管理介面中，前往「設定」>「應用程式和銷售管道」。
按一下「Order Printer」。
點擊「開啟應用程式」。
點擊「範本」。
點按要編輯的範本。
在範本中新增 <s-barcode type="qrcode" value="" /> 程式碼區塊。
使用 QR 碼的文字值取代 `` 值。
選用：若要預覽範本，請按一下「預覽」。
按一下「儲存」。

在範本中使用 Google 字型

若要在範本中使用 Google 字型，請將下列程式碼貼到範本，然後以 Google 字型的名稱取代 FontName 變數：

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