自訂欄位區塊

您可以使用自訂欄位區塊收集顧客的其他資訊。自訂欄位可設為選填或必填,因此您可以將其設為必填,讓顧客在填寫前無法繼續結帳。

Checkout Blocks 支援多種輸入類型,包括純文字、下拉式選單、核取方塊以及日期選擇器。自訂欄位的資料可儲存為訂單中繼欄位、訂單屬性或訂單備註。

提供多種範本,會依常見使用情境預先填入自訂欄位區塊的內容與設定:

  • 同意條款:此範本要求顧客在結帳前,同意您的服務條款;條款可點擊並在快顯視窗中顯示。核取方塊預設不會勾選。
  • 生日:此範本提供顧客在結帳時填寫出生日期,供行銷用途。
  • 禮物留言:此範本提供顧客在替他人下單時,加入可選填的文字留言。

支援的資料類型

自訂欄位會以訂單中繼欄位訂單備註屬性,或訂單備註本身的形式,儲存到顧客的訂單。建議在可行情況下使用訂單中繼欄位,因為這是在 Shopify 中儲存與擷取訂單自訂資料最穩健的方式。

Checkout Blocks 不支援將新欄位加入既有的結帳表單,例如運送地址或帳單地址。請改為在既有結帳表單的上方或下方加入自訂欄位區塊。

訂單中繼欄位

將自訂欄位儲存為訂單中繼欄位時,所使用的命名空間為 checkoutblocks,而鍵會在您將自訂欄位加入區塊時定義(例如 agree_to_terms)。

訂單屬性

訂單屬性(亦稱為備註屬性購物車屬性)與 Shopify 預設的裝箱單訂單草稿不相容。

若您需要使用裝箱單或訂單草稿,請改用訂單中繼欄位作為資料類型。

訂單備註

將自訂欄位儲存為訂單備註時,顧客先前在備註欄位輸入的任何內容都會被您的自訂欄位取代。若您選擇將自訂欄位資料儲存為訂單備註,而且您的佈景主題已啟用在購物車新增訂單備註的選項,建議將該選項停用。如此一來,顧客就不必重複輸入備註內容。

使用訂單備註類型的優點之一,是會在結帳頁面自動顯示先前在購物車輸入的訂單備註。這可在整個結帳流程中維持一致性,適用於訂單備註或配送備註等情境。

訂單備註與訂單草稿不相容。

支援的輸入類型

自訂欄位區塊支援下列欄位類型:

  • 核取方塊
  • 日期與時間選擇器
  • 出生日期
  • 下拉式選單
  • 電話欄位
  • 單選按鈕
  • 文字輸入欄位

建立自訂欄位區塊

您可以在 Checkout Blocks app 中建立並設定自訂欄位區塊。建立自訂欄位區塊後,您必須將區塊加入結帳頁面

步驟:

  1. 在您的 Shopify 管理介面中,前往應用程式 > Checkout Blocks

  2. 點選區塊,然後點選建立區塊

  3. 點選自訂欄位

  4. 選取您要使用的欄位範本。若不想預先填入任何欄位或設定,請選取空白範本

  5. 區塊名稱區段中,輸入區塊名稱。此名稱不會顯示給顧客。

  6. 區塊 ID區段中,使用下拉式選單套用特定 ID 編號。瞭解區塊 ID詳情。

  7. 顯示規則區段中,設定您的區塊顯示規則

    • 若要將區塊顯示給所有顧客,請將顯示規則區段留空。
    • 若要建立顯示規則,請點選⊕ 新增顯示規則,然後設定您的規則。可視需要新增多個顯示規則。
  8. 內容區段中,新增並自訂區塊內容:

    1. 儲存為選單中,選擇要將自訂欄位資料儲存到的位置。瞭解自訂欄位資料類型詳情。
    2. 欄位區段中,點選⊕ 新增自訂欄位,然後選取您要使用的自訂欄位類型
    3. 設定自訂欄位的詳細資料,例如欄位標籤、欄位鍵、選項,以及欄位是否為必填。點選完成
    4. 選用:在區段標題區段中,為您的自訂欄位新增標題與副標題。
    5. 選用:在設定區段中,選擇是否在欄位標籤後加上「(選填)」,以及是否顯示所有欄位。
  9. 選用:在樣式區段中,按一下自訂設計,自訂此區塊的邊距、容器與分隔線樣式。

  10. 選用:在發布區段中,按一下鉛筆圖示,選取您要顯示此區塊的市場與結帳頁面。

  11. 按一下儲存

系統預設會將您的區塊儲存為草稿。準備好發布時,前往狀態區段,從下拉式選單選取啟用

將自訂欄位區塊新增至結帳頁面

您可以將 existing custom field block 新增至結帳頁面。區塊必須設為啟用,才能在結帳頁面顯示。

步驟:

  1. 在您的 Shopify 管理介面中,前往應用程式 > Checkout Blocks

  2. 按一下區塊

  3. 按一下您要新增至結帳頁面的自訂欄位區塊。

  4. 按一下更多動作 ⌄ > 新增至結帳頁面

  5. 選用:在預覽區塊 ID區段中,按一下剪貼簿圖示,複製此區塊的唯一 preview ID

  6. 選取所需的結帳設定,然後按一下開啟編輯器

  7. 在結帳與帳戶編輯器中,將自訂欄位區塊新增至您的結帳頁面:

    1. 前往您要新增此區塊的結帳頁面。
    2. 在您要新增此區塊的區段內,按一下⊕ 新增區塊
    3. 按一下 Checkout Blocks 的自訂欄位選項。
    4. 設定結帳區塊的詳情,並選取此區塊對應的區塊 ID。
    5. 選用:使用預覽區塊 ID (僅供測試) 欄位與此區塊的預覽 ID,以preview 此區塊在結帳頁面的顯示方式。
    6. 選用:拖放動態區塊,調整您要在結帳頁面顯示此區塊的位置。
  8. 按一下儲存