在 Checkout Blocks 中使用品牌編輯器

您可使用 Checkout Blocks 中的品牌編輯器，透過 Checkout Branding API，無需修改任何程式碼即可自訂結帳與帳號頁面的外觀。

您可以使用品牌編輯器，編輯任何結帳設定的色彩與結帳元素。使用品牌編輯器調整的結帳設計會套用至結帳的所有頁面，包括感謝頁面、訂單狀態頁面，以及新的顧客帳號頁面。

若要從 Shopify 管理介面開啟品牌編輯器，按一下 應用程式 > Checkout Blocks，再按一下 品牌編輯器。

本頁內容

在顏色區段中，您可以自訂結帳頁面的基礎顏色。若需要更細部的設計調整，您也可以自訂最多 4 個套用至各區塊的顏色配置。您可以編輯不同類型的顏色，包括強調色 (用於連結等互動元素) 與品牌色 (用於主要與次要按鈕等元素)。

自訂全域顏色

在 Shopify 管理介面中，前往 應用程式 > Checkout Blocks。
按一下 品牌編輯器。
在顏色區段中，按一下 全域顏色。
若要覆寫現有的結帳頁面顏色，請在 全域顏色 區段中按一下 ⊕ 圖示，接著透過以下其中一種方式選取您要的顏色：
- 使用顏色選擇器選取顏色。
- 在欄位中輸入 HEX 色碼。
按一下儲存。

自訂顏色配置

在 Shopify 管理介面中，前往 應用程式 > Checkout Blocks。
按一下 品牌編輯器。
在顏色區段中，按一下 方案 1、方案 2、方案 3 或 方案 4，自訂特定的顏色配置。
選取您要自訂的下列元件：
- 主要顏色
- 表單控制項
- 主要按鈕
- 次要按鈕
在基礎區段中，按一下欲自訂的顏色類型旁的 ⊕ 圖示，接著透過以下其中一種方式選取您要的顏色：
- 使用顏色選擇器選取顏色。
- 在欄位中輸入 HEX 色碼。
選用：如果您正在編輯 表單控制項、主要按鈕 或 次要按鈕 的方案，您也可以自訂 選取時 或 游標懸停時 的互動狀態顏色。按一下欲自訂的顏色類型旁的 ⊕ 圖示，接著透過以下其中一種方式選取您要的顏色：
- 使用顏色選擇器選取顏色。
- 在欄位中輸入 HEX 色碼。
按一下儲存。

在品牌編輯器的自訂區段中，您可以編輯結帳頁面的下列元素：

開啟品牌行銷編輯器時，系統預設會編輯目前處於「啟用中」狀態的結帳頁面設定檔。不過，您可以使用品牌行銷編輯器變更想要編輯的結帳頁面設定檔，也可以建立新的結帳頁面設定檔。

在 Shopify 管理介面中，前往 應用程式 > Checkout Blocks。
按一下 品牌編輯器。
點擊目前結帳頁面設定檔的名稱以開啟下拉式選單，其中會列出啟用中設定檔以及所有草稿設定檔，然後選取您想自訂的結帳頁面設定檔：
- 選取您要編輯的現有設定。
- 按一下 ⊕ 建立新設定，系統會導向您 Shopify 管理介面中的結帳設定。

您可以隨時預覽您在品牌編輯器中的變更。選取要預覽的結帳設定後，按一下預覽。結帳與帳戶編輯器會在新分頁開啟，並套用所有變更，讓您查看在結帳頁面的呈現。

您可以使用 JSON 檔案匯出與匯入結帳設定。

系統會將結帳設定以 .json 檔案下載到您的裝置。

在 Shopify 管理介面中，前往 應用程式 > Checkout Blocks。
按一下 品牌編輯器。
選取您要套用匯入品牌設定檔的結帳設定。
按一下 更多操作 > 匯入設定。
在 匯入結帳品牌設定 對話方塊中，上傳您的品牌 JSON 檔案：
1. 按一下 新增檔案。
2. 從您的裝置選取正確的 JSON 檔案。
3. 按一下 匯入並繼續。
檢視預先載入的自訂設定，視需要加以修改。
按一下儲存。

在品牌編輯器中編輯顏色或結帳頁面元素時，您可以按一下已變更顏色或元素旁的重設，將該設定值恢復為預設值。

您可隨時將整個結帳組態的品牌樣式重設為 Shopify 預設值。重設結帳組態會清除品牌編輯器各頁面的所有自訂內容。此動作無法復原。