Shopify POS 的列印收據程式碼編輯器

您可以在 Shopify 管理介面的程式碼編輯器中，自訂列印收據。組成收據的檔案包含 Liquid(Shopify 的範本語言)。透過程式碼編輯器，您可以使用 HTML、CSS 與 Liquid 進行比視覺化編輯器更進階的自訂。

您可以變更收據範本，以及列印收據所使用的區段範本。收據範本檔案代表您在商店中可以列印的收據類型。區段則是收據的一部分，例如頁首或頁尾。區段可以在多種收據之間重複使用。

本頁內容

使用收據程式碼編輯器的注意事項

在使用收據程式碼編輯器前，請先檢視以下注意事項：

存取限制

程式碼編輯器僅能在電腦版 Shopify 管理介面中使用。
程式碼編輯器無法在義大利的任何 POS 地點使用。

變更適用範圍

您所做的程式碼變更僅適用於選取的地點。
在程式碼編輯器中的自訂僅套用於 POS Pro 地點。若您使用程式碼編輯器，且同時有非 POS Pro 的地點，則可為那些地點使用視覺化編輯器來自訂頁首與頁尾。
您可以在程式碼編輯器中自訂有範本的列印收據，例如銷售收據、禮品收據、禮品卡收據，以及退貨與換貨收據。

程式碼語言

組成收據的檔案包含 Liquid(Shopify 的範本語言)。瞭解如何使用 Liquid。
若要在收據程式碼編輯器中編輯範本，您需要熟悉 HTML、CSS 與 Liquid。Shopify 佈景主題支援可在 Shopify 設計政策的範圍內協助進行小幅調整。

自訂限制

您無法從程式碼編輯器預覽不同印表機尺寸的收據。若要依印表機尺寸預覽，請使用視覺化編輯器。
產品說明無法作為收據範本中的變數，且無法新增至列印的收據上。

範本維護

如果您使用收據程式碼編輯器自訂收據，目前的範本可能會缺少新屬性，例如 selling_plan_name。若要將最新可用的屬性新增至範本，您必須將收據範本重設為預設。將收據範本重設為預設會移除您對其所做的任何自訂內容。請在重設之前記下您的自訂程式碼。重設範本後，您必須手動重新套用自訂內容。

開啟程式碼編輯器

您可以使用程式碼編輯器來編輯範本。您必須先從預設的視覺化編輯器切換為使用程式碼編輯器，且可隨時切換回視覺化編輯器。

在編輯器之間切換的步驟會稍有不同，取決於您是所有的 POS 地點都符合程式碼編輯器的使用資格，或是只有部分 POS 地點符合資格 (例如，您有部分的 POS 地點未使用 POS Pro，或位於義大利或法國)。

步驟：

所有 POS Pro 地點

在 Shopify 管理介面中，前往 銷售點 > 設定。
在自訂區段中，點擊列印收據以開啟 POS 編輯器。
按一下左側邊欄的圖示。
按一下 編輯程式碼。
在 編輯列印收據程式碼 對話方塊中，編輯您要變更的程式碼。
按一下儲存。
選用：若要使用 POS 編輯器繼續編輯更多 Shopify POS 頁面，請返回瀏覽器視窗中的上一頁。

包含 Lite 或義大利地點

在 Shopify 管理介面中，前往 銷售點 > 設定。
在自訂區段中，點擊列印收據以開啟 POS 編輯器。
在 收據自訂 頁面中，按一下 程式碼編輯器。

在收據範本中使用自訂檔案

您可以使用您上傳到 Shopify 管理介面的檔案（例如圖片資產）來自訂列印收據。

檔案必須先上傳至您的 Shopify 管理介面，才能用於列印收據。瞭解檔案上傳的詳情。

步驟：

在 Shopify 管理介面中，前往內容 > 檔案。
在您要納入列印收據程式碼的檔案旁，按一下以複製連結。
前往程式碼編輯器。
在範本中加入該資產連結。

將收據範本重設為預設值

您可以使用程式碼編輯器，將收據範本重設為預設版本。

步驟：

所有 POS Pro 地點

在 Shopify 管理介面中，前往 銷售點 > 設定。
在自訂區段中，點擊列印收據以開啟 POS 編輯器。
按一下 自訂您的收據。
按一下 編輯程式碼。
按一下您要重設的程式碼檔案。
按一下圖示。
在 將檔案重設為預設值 對話方塊中，按一下重設。

包含 Lite 或義大利地點

在 Shopify 管理介面中，前往 銷售點 > 設定。
在自訂區段中，點擊列印收據以開啟 POS 編輯器。
在 收據自訂 頁面中，按一下 程式碼編輯器。
按一下您要重設的程式碼檔案。
按一下圖示。
在 將檔案重設為預設值 對話方塊中，按一下重設。

收據程式碼編輯器可用的 Liquid 變數

您可以使用 Liquid 來自訂列印收據範本與收據類型。

收據程式碼編輯器可使用下列資料物件：

收據物件

收據資料物件說明
物件	說明
shop	包含商店資訊，例如商店名稱。
location	包含零售地點資訊，例如地址與電話號碼。
order	包含訂單資料，內含商品項目、折扣、稅額與交易資訊。
return	僅可在 `return-and-exchange-receipt.liquid` 範本及其相關的部分範本中使用。包含退貨與換貨資料，內含退回的商品項目、新增的商品項目、淨額總計與交易資訊。
gift_card	僅可在 `gift-card.liquid` 範本中使用。包含禮品卡資料，內含餘額、英數代碼，以及可由 POS app 掃描的 QR 碼內容。

訂單物件

訂單物件說明
屬性	說明
id	訂單的 ID。
created_at	訂單建立的日期與時間，採用 ISO 8601 格式。
source_identifier	唯一的 POS 或第三方訂單識別碼。
change_due	訂單的應找零金額。
balance_due	此訂單尚欠金額。
name	顯示在 Shopify 管理介面的訂單頁面與訂單狀態頁面的訂單唯一識別碼。例如，「#1001」、「EN1001」或「1001-A」。此值在不同商店間可能重複。
note	與訂單相關聯的備註內容。
line_items	訂單的商品項目清單。
subtotal_price	所有商品項目折扣後、退貨前的價格總和。若 `taxesIncluded` 為 true，則小計也包含稅額。
total_price	訂單的總價，未扣除退貨。包含稅額與折扣。
total_tip_received	訂單所有小費金額的總和。
discounts	折扣總額。
transactions	與訂單相關的交易清單。
taxes_included	訂單小計是否包含稅額。
tax_lines	退貨前，套用於訂單商品項目的所有稅額明細清單。稅額明細的金額代表相同稅率與標題的所有稅額明細之總額。
customer	下訂單的顧客。
shipping_address	訂單的運送地址。
shipping_groups	訂單的運送群組清單。每個群組包含會一併履行的商品項目。

退貨物件

退貨物件的說明
屬性	說明
name	顯示在 Shopify 管理介面的訂單頁面與訂單狀態頁面的退貨唯一識別碼。例如，「#1000-R1」。此值在不同商店間可能重複。
created_at	退貨建立時的 ISO 8601 格式日期與時間。
is_unverified	布林值，指示退貨是否建立為未驗證退貨。
is_exchange	布林值，指出此退貨是否包含換貨。包含退回至禮品卡的退款。
exchange_type	若退貨包含換貨，則為換貨的類型。可能的值為 `LIKE_FOR_LIKE`、`NET_REFUNDABLE` 與 `NET_PAYABLE`。
return_discount	已退還的訂單折扣總額。
return_subtotal	所有退貨商品項目折扣前的價格總和。若 `taxesIncluded` 為 true，則小計也包含稅額。
return_total	可能的退款總額。這包括稅額、折扣、運費和小費。這可能不是實際退款金額。
exchange_subtotal	所有換貨新增商品項目在折扣前的價格總和。若 `taxesIncluded` 為 true，則小計也包含稅額。
exchange_total	所有換貨新增商品項目的總額。包含稅額與折扣。
total_cash_rounding_adjustment	套用在退貨或換貨上的現金進位調整。
total_adjusted_amount	經現金進位調整後的退貨或換貨總額。
net_total	退貨或換貨實際支付或退款的總額，為現金進位前的金額。
return_line_items	退回的商品項目。
exchange_line_items	換貨中的新商品項目。
return_tax_lines	已退回商品項目的稅額明細。
exchange_tax_lines	換貨中新增商品項目的稅額明細。
shipping_refund_amount	已退還的運費金額。
tip_refund_amount	已退還的小費金額。
transactions	與退貨或換貨相關的交易。

運送群組物件

運送群組物件的說明
屬性	說明
destination	出貨商品的收件地。
products	要出貨的商品清單。

商品項目物件

商品項目物件的說明
屬性	說明
id	商品項目的 ID。
name	商品標題；如適用，後方會加上子類名稱。
variant_title	建立訂單時的子類名稱。
price	建立訂單時，此商品項目的單價。此值不含折扣。
is_gift_card	此商品項目是否為購買禮品卡。
discount	由折扣套用分配給此商品項目的折扣總額，包含分配給已退款與已移除數量的折扣。
total_price	此商品項目的總額。
selling_plan_name	指派給此商品項目的訂閱方案名稱。
tax_rates	此商品項目的稅額明細。
custom_attributes	代表自訂功能或特殊需求的屬性清單。
variant_title	子類名稱。
variant_id	子類的 ID。
variant_metafields	商家與此子類關聯的自訂欄位清單。
staff_member_description	與此商品項目關聯的員工。
product_metafields	商家與此商品關聯的自訂欄位清單。

退貨商品項目物件

包含商品項目物件的所有內容，另加下列屬性：

商品項目物件的說明
屬性	說明
return_reason	該商品項目的退貨原因。
return_reason_note	可搭配退貨原因的備註。

收據程式碼編輯器可用的 Liquid 過濾器

您可以使用 Liquid 過濾器調整收據範本中的資訊。例如，您可以變更幣別的格式，或調整特定文字 (例如課稅碼) 的大小寫。

若要套用過濾器，請在雙大括號 {{ }} 包住的 Liquid 程式碼區塊內，加上管線符號 |，並接上過濾器。過濾器只能套用在 Liquid 程式碼區塊。

以下範例中，過濾器會將課稅碼從小寫轉為大寫。

{{ tax_line.title | upcase }}

在範例程式碼區塊中，product 為物件，title 為其屬性，upcase 為套用的過濾器。upcase 過濾器會將 tax_line.title 的值轉為全大寫。例如，若 tax_line.title 的值為 Hst，則 upcase 過濾器會將其改為 HST。

如需如何使用 Liquid 篩選器的詳細資訊，請參閱 Shopify 佈景主題的 Liquid 參考中的篩選器章節。

收據程式碼編輯器可用的過濾器如下：

收據過濾器說明
屬性	說明
t	將預先定義的標籤翻譯成您地點所設定的語言。
money	以您地點的幣別格式化價格。
escape	會跳脫 HTML 中的特殊字元，例如 `<>`、`'` 與 `&`，並將這些字元轉換成跳脫序列。
barcode	產生 1D 條碼 SVG。
qrcode	產生 2D 條碼 SVG。

列印收據範本程式碼自訂範例

您可以使用 Liquid 加入條件式訊息。此功能類似於使用視覺化編輯器僅儲存至單一地點。舉例來說，您的業務一開始只有一個地點，如今已有數個新地點，您想在列印收據上強調原始門市。

您可以在程式碼編輯器的 Sections 資料夾中，將自訂訊息加入 header.liquid 範本，並使用 Liquid 僅在您的旗艦地點顯示該訊息。

下列程式碼會檢查地點名稱；在此例中，您的原始地點名為「Home」。若名稱相符，就會顯示「歡迎光臨我們的原始門市，於 1972 年開幕。」；其餘地點列印出的收據則會顯示「歡迎光臨本店」。

{% if location.name == 'Home' %}
  Welcome to our original store, opened in 1972.
{% else %}
  Welcome to our store.
{% end %}

在程式碼編輯器中預覽您的程式碼變更

您可以在 Shopify 管理介面的 POS 程式碼編輯器中，預覽對列印收據所做的變更。

預覽視窗會依您選取的 Liquid 檔案，標示該檔案影響的收據版面或部分。預設情況下，預覽視窗會顯示您最近一筆 POS 訂單的內容。除 gift-card.liquid 檔案僅提供不同地點作為可選的預覽項目之外，您也可以為所有其他 Liquid 檔案選擇特定訂單，作為預覽視窗中的收據內容。

步驟：

所有 POS Pro 地點

在 Shopify 管理介面中，前往 銷售點 > 設定。
在自訂區段中，點擊列印收據以開啟 POS 編輯器。
按一下 自訂您的收據。
按一下 編輯程式碼。
按一下您要預覽的程式碼檔案。收據會顯示在最右側的編輯器視窗中。
選用：若要在預覽視窗中選擇特定訂單作為收據內容，請執行下列操作：
1. 按一下圖示。
2. 在「選擇要預覽的訂單」對話方塊中，會顯示所有地點透過銷售點 (POS) 管道完成的銷售。您可以從清單中選取一筆訂單，或使用搜尋列搜尋特定訂單與地點。
3. 按一下「確認」。
選用：如果您正在預覽 gift-card.liquid 檔案，請按一下圖示，並選取您要預覽該範本的地點。

包含 Lite 或義大利地點

在 Shopify 管理介面中，前往 銷售點 > 設定。
在自訂區段中，點擊列印收據以開啟 POS 編輯器。
在 收據自訂 頁面中，按一下 程式碼編輯器。
按一下您要預覽的程式碼檔案。收據會顯示在最右側的編輯器視窗中。
選用：若要在預覽視窗中選擇特定訂單作為收據內容，請執行下列操作：
1. 按一下圖示。
2. 在「選擇要預覽的訂單」對話方塊中，會顯示所有地點透過銷售點 (POS) 管道完成的銷售。您可以從清單中選取一筆訂單，或使用搜尋列搜尋特定訂單與地點。
3. 按一下「確認」。
選用：如果您正在預覽 gift-card.liquid 檔案，請按一下圖示，並選取您要預覽該範本的地點。