使用 Checkout Blocks 自訂結帳頁面區塊概述

Checkout Blocks 應用程式的區塊使用 UI 擴充功能構建，透過提供可直接拖放到結帳頁面和帳戶編輯器的應用程式區塊來協助您自訂結帳頁面。某些區塊類型可新增視覺自訂元素至您的結帳頁面，例如資訊和警告橫幅或商品項目訊息。其他區塊類型可新增互動元素至您的結帳頁面，例如商品項目的子類或數量選擇器，或供顧客選取或輸入其他資訊的核取方塊或文字欄位。

Checkout Blocks 的每個區塊類型最多可支援 30 個有效區塊。您一次最多可有 30 個自訂欄位、30 個動態內容區塊或其他類型區塊。您可以建立超過 30 個區塊，但結帳頁面僅顯示前 30 個有效區塊。

結帳頁面顯示的區塊取決於您套用至該區塊的顯示規則、區塊的優先順序，以及是否一律使用應用程式區塊 ID 顯示於特定位置的特定區塊。

此頁面上

Checkout Blocks 的可用應用程式區塊

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

由於區塊本身的功能，某些區塊無法新增至某些結帳頁面。例如，自訂欄位區塊依賴顧客輸入其他資訊，例如新增自訂備註或核取方塊。必須在訂單完成之前獲取此資訊，因此無法新增自訂欄位至訂購後頁面，例如感謝您或訂單狀態頁面。

表格列出了可用 Checkout Blocks 應用程式區塊、支援的結帳頁面，以及每個應用程式區塊的簡要說明。
應用程式區塊	支援頁面	說明
地址封鎖工具	結帳	根據地址格式規則封鎖結帳作業。
自訂欄位	結帳	在結帳頁面包含自訂欄位，例如同意條款核取方塊或禮品訊息欄位。
動態內容	結帳感謝您訂單狀態	根據設定的條件規則顯示文字、橫幅和按鈕等內容。此區塊適用於採用 Basic Shopify 或更高等級方案的商家。
編輯商品項目	結帳感謝您訂單狀態	可讓顧客編輯結帳頁面訂單摘要中的商品項目，例如包括子類或數量選擇器。也可作為商品項目內容的容器。
商品項目內容	結帳感謝您訂單狀態	顯示商品項目的特定訊息，例如`最終銷售`。
運送及付款圖示	結帳	顯示支援的運送和付款方式圖示。
靜態內容	結帳感謝您訂單狀態	與動態內容區塊不同，靜態內容區塊會向所有顧客顯示內容，並且支援文字和橫幅。此區塊適用於採用 Basic Shopify 或更高等級方案的商家。

深入瞭解如何建立應用程式區塊。

區塊分析

每個啟用區塊都有檢視分析，顯示於 Checkout Blocks 應用程式區塊詳情頁面的頂部。這些分析會追蹤該區塊在結帳頁面顯示的次數。

在預設情況下，該區塊會顯示今日的分析資料，但您可以按一下拉式選單，使用日期選擇器查看特定天數或日期範圍的分析資料。

若要重設該區塊的分析資料，請按一下「⋮」>「重設分析資料」。此動作無法復原。

顯示區塊規則

許多區塊類型（例如動態內容和自訂欄位區塊）可用於設定條件，這些條件定義了結帳頁面區塊必須滿足哪些條件才能顯示於結帳頁面。您可以針對每個區塊設定多個顯示規則，還可以定義必須滿足所有規則或是滿足任一規則才能顯示該區塊。

顯示規則語法視您構建的區塊類型而異，但一般來說，規則是按順序使用以下元素來構建（如適用）：

規則類別，例如 Product type 或 Cart total。
邏輯運算子，例如 Is 或 Is not，或 Is greater than、 Contains，或 Ends in。
定義所需特定值的參數，例如 Dresses 或 50.00。

例如，若要向高消費顧客顯示橫幅以提示他們建立帳戶，您可以使用以下顯示規則構建區塊：

Only show when: All rules pass
Cart total > Is greater than or equal to > USD > 100.00
Customer is logged in > 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 時，即使就技術而言滿足所有 3 個區塊的顯示條件，層級 1 區塊仍會顯示最適當的訊息。當顧客消費超過 $25 但低於 $50 時，即使就技術而言也滿足層級 3 區塊的條件，但層級 2 區塊會以較高優先順序顯示。

最後，在結帳頁面和帳戶編輯器，您可以將包含應用程式區塊 ID 6 的動態內容應用程式區塊新增至運費費率區段，這樣一來您建立的 3 個可能的動態內容區塊中最合適的區塊將在結帳期間顯示於該「容器」空間。當顧客消費 $100 或以上時，結帳頁面區域不會顯示任何動態內容，因為對於應用程式區塊 ID 為 6 的動態內容區塊而言，未滿足任何顯示規則。