自訂 Order Printer 範本

您可在 Shopify 管理介面中，為 Order Printer app 建立並自訂最多 15 個範本。預設情況下，Order Printer app 內含兩個範本：

發票：可傳送給顧客的基本發票
裝箱單：包含商店地址與顧客運送地址的列印單據

本頁內容

建立新的 Order Printer 範本

建立新的 Order Printer 範本需要您熟悉 HTML、CSS 與 Liquid。如果是在 Shopify 設計政策的範圍內，Shopify 佈景主題支援服務或許能協助微調免費的 Shopify 佈景主題。如果您需要更複雜的變更，或是使用非 Shopify 開發的佈景主題，建議您聘僱 Shopify 合作夥伴。

步驟：

在 Shopify 管理介面中，前往 應用程式 > Order Printer (舊版)。
按一下 管理範本。
按一下 新增範本。
在名稱欄位輸入新範本的名稱。
在 程式碼 欄位新增 HTML、CSS 或 Liquid 程式碼，以建立範本。
完成後，按一下儲存。

編輯 Order Printer 範本

編輯 Order Printer 範本需要您熟悉 HTML、CSS 與 Liquid。Shopify 佈景主題支援服務無法為您大幅編輯範本，但如果是在 Shopify 設計政策的範圍內，或許能協助微調免費的 Shopify 佈景主題。若需更複雜的變更，建議您聘僱 Shopify 合作夥伴。

步驟：

在 Shopify 管理介面中，前往 應用程式 > Order Printer (舊版)。
按一下 管理範本。
按一下您要編輯的範本名稱。
在 程式碼 欄位新增或編輯 HTML、CSS 或 Liquid 程式碼，以變更範本。若要預覽自訂範本的範例，請參考 範本自訂範例。
完成後，按一下儲存。

範本自訂範例

以下範例說明自訂 Order Printer 範本的常見做法：

範例：在 Order Printer 範本加入您的標誌

電腦版

在 Shopify 管理介面中，前往內容 > 檔案。
按一下 上傳檔案，然後在電腦上選取圖片檔。
在檔案頁面，找到剛上傳的檔案，然後按一下 複製網址。
在 Shopify 管理介面中，按一下設定 > 應用程式。
按一下 Order Printer 以開啟 app。
按一下 管理範本。
按一下您要編輯的範本名稱。
在希望顯示標誌的位置，將下列程式碼片段加入範本：<img src="your-image-URL">。
將 your-image-URL 替換為您複製的圖片網址。依您希望標誌顯示的位置，可能需要加入 <br/> 標籤，在圖片前或後插入斷行。

行動裝置

在 Shopify app 中，點選圖示。
在內容選單中，點選圖示，然後點選檔案。
點選 上傳檔案，然後在電腦上選取圖片檔。
在檔案頁面，找到剛上傳的檔案，然後點選 複製網址。
在 Shopify 管理介面中，點選設定 > 應用程式。
點選 Order Printer 以開啟 app。
點選 管理範本。
點選您要編輯的範本名稱。
在希望顯示標誌的位置，將下列程式碼片段加入範本：<img src="your-image-URL">。
將 your-image-URL 替換為您複製的圖片網址。依您希望標誌顯示的位置，可能需要加入 <br/> 標籤，在圖片前或後插入斷行。

在 HTML 中看起來會像這樣：

範例：將表格寬度設為 100%

若要讓表格帶有邊框並延伸至 100% 寬度，請在表格加入 table-tabular 類別：

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

範例：顯示商品縮圖

若要加入商品縮圖，請在範本插入以下程式碼：

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

加入訂單詳情

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

在 Shopify 管理介面中，前往 應用程式 > Order Printer (舊版)。
按一下 管理範本。
按一下您要編輯的範本名稱。
使用 Liquid 變數加入訂單詳情，並用 HTML 設定格式。例如，{{ line_item.price | money }} 會輸出該品項的價格。
完成後，按一下儲存。

例如，Nyla 想編輯裝箱單範本，加入要出貨的品項清單。她在 Order Printer app 的 裝箱單 範本底部新增以下程式碼：

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

因此，Nyla 的裝箱單現在會包含一個列出已購買品項的表格。