使用 Checkout Blocks 自訂結帳頁面的區塊總覽

Checkout Blocks app 以 UI 擴充功能打造，可協助您自訂結帳頁面；您可以將各種區塊直接拖放到結帳與帳戶編輯器中。有些區塊類型會為結帳頁面加入視覺自訂元素，例如資訊或警示橫幅，或商品項目訊息。其他區塊類型則會加入互動元素，例如商品項目的子類或數量選擇器，或提供顧客勾選或輸入額外資訊的核取方塊與文字欄位。

Checkout Blocks 每種區塊類型最多可啟用 30 個區塊。例如，您可以同時擁有最多 30 個自訂欄位、30 個動態內容區塊，等等。您可以建立超過 30 個區塊，但只有前 30 個啟用中的區塊會顯示在結帳頁面。

結帳頁面最終會顯示哪些區塊，取決於您為該區塊設定的顯示規則、區塊的優先順序，以及是否使用區塊 ID以在特定位置一律顯示特定區塊。

本頁內容

Checkout Blocks 中可用的區塊

Checkout Blocks 支援多種區塊類型。適用的類型取決於您要在結帳頁面加入的內容類型、是否要新增條件式顯示規則，以及要把區塊放在哪些頁面。

有些區塊因功能限制，無法加入特定的結帳頁面。例如，自訂欄位區塊需要顧客輸入額外資訊，例如新增自訂備註或勾選核取方塊。這些資訊必須在完成訂單前擷取，因此自訂欄位無法加入訂購後頁面，例如感謝頁面或訂單狀態頁面。

列出 Checkout Blocks 中可用區塊的表格，並附上支援這些區塊的結帳頁面以及各區塊的簡短說明。
區塊	支援的頁面	說明
地址阻擋	結帳頁面	根據地址格式規則封鎖結帳。
自訂欄位	結帳頁面	在結帳頁面加入自訂欄位，例如同意條款的核取方塊或禮物訊息欄位。
動態內容	結帳頁面感謝頁面訂單狀態頁面	根據您設定的條件規則，顯示文字、橫幅和按鈕等內容。採用 Basic Shopify 以上方案的商家可使用此區塊，且只能放置在感謝頁面及訂單狀態頁面中。若要放置在結帳頁面，需要 Shopify Plus 方案。
商品項目編輯	結帳頁面感謝頁面訂單狀態頁面	允許顧客在結帳的訂單摘要中編輯商品項目，例如選擇子類或使用數量選擇器。此外，也可作為商品項目內容的容器。
商品項目內容	結帳頁面感謝頁面訂單狀態頁面	顯示針對單一商品項目的訊息，例如 `恕不退換`。
運送與付款圖示	結帳頁面	顯示支援的運送與付款方式圖示。
靜態內容	結帳頁面感謝頁面訂單狀態頁面	與動態內容區塊不同，此內容會顯示給所有顧客，並支援文字和橫幅。採用 Basic Shopify 以上方案的商家可使用此區塊，且只能放置在感謝頁面及訂單狀態頁面中。若要放置在結帳頁面，需要 Shopify Plus 方案。

深入瞭解建立區塊。

區塊分析

每個啟用中的區塊都會在 Checkout Blocks app 的區塊詳細資料頁面頂端顯示檢視次數分析。這些分析會追蹤該區塊在結帳頁面顯示的次數。

預設會顯示今天的分析，但您可以按一下日期下拉式選單，使用日期選擇器檢視特定日期或日期範圍的分析。

若要重設該區塊的分析，請點擊 >「重設分析」。此操作無法復原。

區塊的顯示規則

許多區塊類型（例如動態內容與自訂欄位區塊）都可讓您設定條件，定義結帳區塊在何種情況下才會顯示於結帳流程。您可以為每個區塊設定多個顯示規則，並可指定必須同時符合所有規則，或符合其中任一規則即可顯示該區塊。

顯示規則的語法會因您建立的區塊類型而異，但一般而言，規則在適用時會依序由下列元素組成：

規則的類別，例如 產品類型 或 購物車總額。
邏輯運算子，例如 等於 或 不等於，或 大於、包含、結尾為。
參數，用來定義您要的特定值，例如 洋裝 或 50.00。

例如，若要向高消費顧客顯示橫幅，提示其建立帳號，您可以建立具有下列顯示規則的區塊：

僅在以下情況顯示：所有規則皆符合
購物車總額 > 大於或等於 > USD > 100.00
顧客已登入 > False

依照這組顯示規則，只有當顧客消費滿 100 美元且尚未登入顧客帳號時，才會顯示您的橫幅。若顧客已登入，將不會顯示橫幅；若消費未達 100 美元門檻，也不會顯示。

區塊 ID

部分區塊類型（例如自訂欄位或動態內容）可選擇指定區塊 ID。預設會選取 0 作為區塊 ID。

區塊 ID 可讓您在結帳流程的不同區段加入相同類型的不同區塊。您可以把編輯器中的結帳區塊視為一個佔位符，會依照您在該區塊設定的顯示規則載入不同的區塊。每個結帳頁面最多可新增 10 個區塊「佔位符」。

範例 1：使用不同的區塊 ID，將相同類型的不同區塊放在不同位置。

您希望在主要內容區顯示必填的核取方塊，同時在側邊欄顯示可選填的禮物留言。這兩個區塊都使用自訂欄位區塊類型，因此您可以在結帳與帳號編輯器中加入兩次自訂欄位區塊，並把每個區塊放到要顯示的位置。不過，您需要能夠設定各個區塊對應到哪個位置。

您可以將必填核取方塊的區塊 ID 設為 1，將可選填的禮物留言的區塊 ID 設為 2。接著在結帳與帳號編輯器中，將主要內容區的自訂欄位區塊設定為使用區塊 ID 1 來顯示必填核取方塊，並將側邊欄的自訂欄位區塊設定為使用區塊 ID 2 來顯示可選填的禮物留言。

範例 2：使用相同的區塊 ID，為同類型但顯示規則不同的區塊指定單一位置。

您提供 3 種自動運費折扣：

訂單金額超過 25 美元可享 10% 折扣
訂單金額超過 50 美元可享 25% 折扣
訂單金額超過 100 美元可享免運費

為了鼓勵顧客在完成訂單前將更多商品加入購物車，您想在結帳頁面的 運送方式 區段新增動態橫幅，並依顧客最接近達成的運送折扣，提示他們再多加入商品至購物車。

您可以設定 3 個動態內容區塊，全部使用相同的區塊 ID，例如 6：

包含三個範例動態內容區塊及其適用的顯示規則與內容的表格。
區塊名稱	顯示規則	橫幅內容
運費級距 1	購物車總計 > 小於 > 25.00 美元	「您的購物車消費滿 25 美元，即可享 10% 運費折扣。」
運費級距 2	購物車總計 > 小於 > 50.00 美元	「您的購物車消費滿 50 美元，即可享 25% 運費折扣。」
運費級距 3	購物車總計 > 小於 > 100.00 美元	「您的購物車消費滿 100 美元，即可享免運費。」

請確保 運費級距 1 區塊的排序優先順序最高，運費級距 3 區塊的排序優先順序最低。在此情況下，當顧客消費未達 25 美元時，雖然三個區塊的顯示條件都符合，仍會顯示級距 1 的區塊，並呈現最適合的訊息。當顧客消費超過 25 美元但低於 50 美元時，會優先顯示級距 2 的區塊，即使級距 3 的條件也同樣符合。

最後，在結帳與帳戶編輯器中，您可以在 運送費率 區段加入一個區塊 ID 為 6 的動態內容區塊。結帳時，系統會在該「容器」位置顯示您建立的 3 個動態內容區塊中最適合的一個。當顧客消費滿 100 美元或以上時，該區域不會顯示任何動態內容，因為區塊 ID 為 6 的動態內容區塊未符合任何顯示規則。