自訂 Order Printer 範本

在 Shopify 管理員中,您可以為 Order Printer 應用程式建立及自訂最多 15 個範本。根據預設,Order Printer 應用程式內含 2 個範本:

  • 發票 - 可用於傳送給客戶的基本發票
  • 裝箱單 - 載明您的商店地址及客戶運送地址的列印單據

業務發展祕訣:使用發票及裝箱單只是個小小的開始。為訂單新增其他的包裹附件 (包括如商品樣品及優惠券),是與客戶建立連結的絕佳方式。

建立新的 Order Printer 範本

若要建立新的 Order Printer 範本,您必須熟悉 HTML、CSS 及 Liquid。Shopify Theme 支援服務,可協助您於符合「Shopify 設計政策」的範圍內進行小幅調整。

步驟:

  1. 在 Shopify 管理員中,前往「應用程式」

  2. 按一下「Order Printer」,開啟應用程式。

  3. 按一下「管理範本」:

    「管理範本」按鈕

  4. 按一下「新增範本」:

    按一下「新增範本」

  5. 在「名稱」欄位中,為新的範本輸入一個名稱。

  6. 在「程式碼」欄位中,新增 HTML、CSS 或 Liquid 程式碼,以建立您的範本。

  7. 完成後,請按一下「儲存」

編輯 Order Printer 範本

若要編輯您的 Order Printer 範本,您必須熟悉 HTML、CSS 及 Liquid。Shopify Theme 支援服務,可協助您於符合「Shopify 設計政策」的範圍內進行小幅調整。

步驟:

  1. 在 Shopify 管理員中,前往「應用程式」

  2. 按一下「Order Printer」,開啟應用程式。

  3. 按一下「管理範本」:

    「管理範本」按鈕

  4. 按一下您要編輯的範本名稱:

    選擇您要編輯的範本

  5. 在「程式碼」欄位中新增或編輯 HTML、CSS 或 Liquid,即可對您的範本進行變更。若要檢視範本自訂內容的範例,請參閱「範例範本自訂內容」。

  6. 完成後,請按一下「儲存」

範例範本自訂內容

下列範例展示了自訂 Order Printer 範本的常見方法:

  • 將商標新增至 Order Printer 範本
  • 將表格寬度設為 100%
  • 顯示商品縮圖
  • 新增訂單詳細資訊

範例:將商標新增至 Order Printer 範本

您可以將商標新增至訂單發票、裝箱單及自訂範本:

  1. 按一下「上傳檔案」,然後在您的電腦中選擇圖片檔案。

  2. 在「檔案」頁面中,按一下圖片的 URL 網址將其反白,然後進行複製:

    複製圖片 URL 網址

  3. 在 Shopify 管理員中,前往「應用程式」

  4. 按一下「Order Printer」,開啟應用程式。

  5. 按一下「管理範本」:

    「管理範本」按鈕

  6. 按一下您要編輯的範本名稱:

    選擇您要編輯的範本

  7. 在您想要顯示商標的範本位置中,輸入下列程式碼片段:<img src="your-image-URL">

  8. 使用您所複製的圖片 URL 網址來取代「your-image-URL」。視您要顯示商標的位置而定,您可能需要新增一個 <br/> 標籤,在圖片的前方或後方加入換行符號。

在 HTML 中會顯示為:

範例 HTML 程式碼

您的發票會呈現為:

自訂電子郵件範本範例

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

若要使您的表格具有邊框,且寬度為 100%,請新增「table-tabular」類別至您的表格:

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

範例:顯示商品縮圖

若要顯示商品縮圖,請在您的範本中插入此程式碼:

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

新增訂單詳細資訊

您可以在範本中加入訂單詳細資訊,例如:所購買之商品的名稱、數量及金額。若要將訂單詳細資訊新增至您的範本:

  1. 在 Shopify 管理員中,前往「應用程式」

  2. 按一下「Order Printer」,開啟應用程式。

  3. 按一下「管理範本」:

    「管理範本」按鈕

  4. 按一下您要編輯的範本名稱:

    選擇您要編輯的範本

  5. 使用 Liquid 變數新增訂單詳細資訊及 HTML 來新增格式。例如,`` 會列印商品價格。

  6. 完成後,請按一下「儲存」

舉例而言,Nyla 想要編輯裝箱單範本,以包含要運送的商品清單。她在 Order Printer 應用程式中,將下列程式碼新增至其「Packing slip」(裝箱單) 範本的最下方:

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if show_line_item_taxes %}
      <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 的裝箱單就包含了客戶所購買之商品的清單:

範例裝箱單

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

免費試用