使用 Shopify Order Printer 自訂範本

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

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

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

步驟如下:

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

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

  1. 將程式碼中的 YOUR_IMAGE_URL_HERE 更換為您的圖片網址。
  2. 選用:若要對齊標誌,請將 text-align 值變更為 leftrightcenter
  3. 選用:若要調整標誌寬度,請將 width 值變更為較大或較小的值,例如 8em2em
  4. 選用:若要預覽範本,請按一下「預覽」。
  5. 按一下「儲存」。

範例:

請看以下範例,瞭解在範本中加入標誌後,HTML 的呈現方式:

顯示如何在範本新增標誌的程式碼區塊範例

將圖片新增至範本

您可以在範本中新增圖片。

步驟如下:

  1. 在 Shopify 管理介面 中,依序前往「內容」>「檔案」。
  2. 點擊「上傳檔案」,然後選取您要上傳的圖片檔案。
  3. 點按連結圖示即可複製圖片網址。
  4. 點按「設定」>「應用程式和銷售管道」。
  5. 點擊「Order Printer」。
  6. 點擊「範本」。
  7. 點擊您要編輯的範本名稱。
  8. 在程式碼編輯器中貼上 <img src=”Image Source” /> 程式碼區塊。
  9. 將程式碼中的 Image Source 更換為您的圖片網址。
  10. 按一下「儲存」。

將表格寬度設為 100%

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

步驟如下:

  1. 在 Shopify 管理介面中,點擊「設定」>「應用程式和銷售管道」。
  2. 按一下「Order Printer」。
  3. 點擊「開啟應用程式」。

  4. 點擊「範本」。

  5. 點按要編輯的範本。

  6. 在程式碼編輯器中找到您要編輯的表格,然後將 table-tabular 類別加到該表格。

  7. 選用:若要預覽範本,請按一下「預覽」。

  8. 按一下「儲存」。

範例:

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

顯示商品縮圖

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

步驟如下:

  1. 在 Shopify 管理介面中,點擊「設定」>「應用程式和銷售管道」。
  2. 按一下「Order Printer」。
  3. 點擊「開啟應用程式」。

  4. 點擊「範本」。

  5. 點按要編輯的範本。

  6. 將程式碼區塊 liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} 加到範本。

  7. 選用:若要預覽範本,請按一下「預覽」。

  8. 按一下「儲存」。

新增訂單詳細資訊

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

步驟如下:

  1. 在 Shopify 管理介面中,點擊「設定」>「應用程式和銷售管道」。
  2. 按一下「Order Printer」。
  3. 點擊「開啟應用程式」。

  4. 點擊「範本」。

  5. 點按要編輯的範本。

  6. 在程式碼編輯器中,使用 Liquid 變數新增訂單詳細資訊和 HTML 以加入格式設定。例如,使用 {{ line_item.price | money }} 可顯示品項的價格。

  7. 選用:若要預覽範本,請按一下「預覽」。

  8. 按一下「儲存」。

範例:

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

將條碼新增至範本

您可以將條碼新增至範本

步驟如下:

  1. 在 Shopify 管理介面中,點擊「設定」>「應用程式和銷售管道」。
  2. 按一下「Order Printer」。
  3. 點擊「開啟應用程式」。

  4. 點擊「範本」。

  5. 點按要編輯的範本。

  6. 在範本中新增 <s-barcode value="a" /> 程式碼區塊。

  7. 使用條碼的文字值取代 `` 值。

  8. 選用:若要預覽範本,請按一下「預覽」。

  9. 按一下「儲存」。

將 QR 碼新增至範本

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

步驟如下:

  1. 在 Shopify 管理介面中,點擊「設定」>「應用程式和銷售管道」。
  2. 按一下「Order Printer」。
  3. 點擊「開啟應用程式」。

  4. 點擊「範本」。

  5. 點按要編輯的範本。

  6. 在範本中新增 <s-barcode type="qrcode" value="" /> 程式碼區塊。

  7. 使用 QR 碼的文字值取代 `` 值。

  8. 選用:若要預覽範本,請按一下「預覽」。

  9. 按一下「儲存」。

在範本中使用 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>

準備好開始透過 Shopify 銷售商品了嗎?

免費試用