在 Checkout Blocks 使用品牌行銷編輯器

方案要求

The Checkout Blocks branding editor 僅適用於採用 Shopify Plus 方案的商家。

您可以使用 Checkout Blocks 品牌行銷編輯器（由 Checkout Branding API 支援）來自訂結帳頁面和帳戶頁面的美觀性，而無需修改任何程式碼。

您可以使用品牌行銷編輯器來編輯任何結帳頁面配置的顏色和結帳頁面元素。使用品牌行銷編輯器對結帳頁面設計所做的變更將套用至所有結帳頁面，包括感謝頁面、訂單狀態頁面和新顧客帳戶頁面。

若要從 Shopify 管理介面啟用品牌行銷編輯器，按一下「銷售管道」>「Checkout Blocks」，然後按一下「品牌行銷編輯器」。

自訂結帳頁面顏色

在顏色區段，您可以自訂結帳頁面的基本顏色。若您要針對設計進行更精細的編輯，您還可以自訂最多 4 種顏色配置並套用至個別區段。您可以編輯顏色類型，包括強調色（用於互動式元素，例如連結）和品牌顏色（用於主要按鈕和輔助按鈕等元素）。

步驟如下：

Customize global colors

1. 在 Shopify 管理介面中，按一下「銷售管道」>「Checkout Blocks」。
2. 按一下「品牌行銷編輯器」。
3. 在顏色區段， 按一下「全域顏色」。

4. 若要覆寫任何現有結帳頁面顏色，在全域顏色區段，按一下「⊕」圖示，然後執行以下任一動作來選取您想要的顏色：

   • 使用顏色選擇器選取顏色。
   • 在可用欄位輸入十六進位顏色代碼。

5. 按一下「儲存」。

Customize color schemes

1. 在 Shopify 管理介面中，按一下「銷售管道」>「Checkout Blocks」。
2. 按一下「品牌行銷編輯器」。
3. 在顏色區段，按一下「配置 1」、配置 2、配置 3 或 配置 4 以自訂特定顏色配置。

4. 選取要自訂的以下任何元件：

   • 主要顏色
   • 表單控制項目
   • 主要按鈕
   • 次要按鈕

5. 在基礎區段，在要自訂的顏色類型旁邊，按一下「⊕」圖示，然後執行以下任一動作來選取您想要的顏色：

   • 使用顏色選擇器選取顏色。
   • 在可用欄位輸入十六進位顏色代碼。

6. 可選：如果您正在編輯表單控制、主要按鈕或輔助按鈕的配置，您還可以自訂選取時或懸停時互動行為的顏色。在要自訂的顏色類型旁邊，按一下「⊕」圖示，然後執行以下任一動作來選取您想要的顏色：

   • 使用顏色選擇器選取顏色。
   • 在可用欄位輸入十六進位顏色代碼。

7. 按一下「儲存」。

自訂結帳頁面元素

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

• favicon：選擇結帳時在瀏覽器分頁中向顧客顯示的圖示。
• 全域：調整所有元素（表單輸入、按鈕和卡片）的圓角半徑範圍。
• 標頭和標誌：選取結帳頁面的標頭位置，以及是否顯示頁面路徑、購物車連結和標誌。
• 主要：將設計配置套用至結帳頁面的主要內容區域，包括背景圖片、邊框寬度和顏色配置。
• 訂單摘要：將設計配置套用至包含顧客訂單摘要的結帳頁面側邊欄，包括背景圖片、邊框寬度和顏色配置。
• 頁尾：選取結帳頁面的頁尾寬度，以及是否顯示商店政策。
• 印刷樣式：選取字型大小、字型系列和字型粗細、大小、字距以及最多三個標題層級的字母大小寫樣式。
• 按鈕：選取主要按鈕和輔助按鈕的邊框間距、邊框和樣式。
• 表單：自訂結帳頁面表單輸入樣式，例如核取方塊、文字欄位和清單的選定選項。
• 商品縮圖：調整結帳頁面商品圖片的邊框和圓角半徑樣式。

步驟如下：

1. 在 Shopify 管理介面中，按一下「銷售管道」>「Checkout Blocks」。
2. 按一下「品牌行銷編輯器」。
3. 在自訂區段，按一下要自訂的任何元素，例如標頭和標誌。
4. 使用可用的自訂選項，根據偏好調整結帳頁面元素。
5. 按一下「儲存」。

切換結帳頁面配置

當您開啟品牌行銷編輯器時，您將編輯目前預設為即時的結帳頁面配置。然而，您可以使用品牌行銷編輯器來變更要編輯的結帳頁面配置，以及建立新結帳頁面配置。

深入瞭解如何管理即時和草稿結帳頁面配置。

步驟如下：

1. 在 Shopify 管理介面中，按一下「銷售管道」>「Checkout Blocks」。
2. 按一下「品牌行銷編輯器」。
3. 按一下當前結帳頁面配置的名稱以開啟下拉式選單，其中包含即時設定清單以及任何草稿設定，然後選取要自訂的結帳頁面配置：
   • 選取要編輯的現有配置。
   • 按一下「⊕ 建立新設定」以重新導向到 Shopify 管理介面的結帳頁面設定。

預覽結帳頁面

您可隨時預覽在品牌行銷編輯器所做的變更，方法是選取要預覽的結帳頁面配置，然後按一下「預覽」。結帳頁面和帳戶編輯器會在單獨的分頁啟用，並套用所有變更，以便您可預覽這些變更在結帳頁面的顯示方式。

步驟如下：

1. 在 Shopify 管理介面中，按一下「銷售管道」>「Checkout Blocks」。
2. 按一下「品牌行銷編輯器」。
3. 針對結帳頁面配置的顏色或要調整的結帳頁面元素進行任何自訂。
4. 點擊「預覽」。

匯出和匯入結帳頁面配置

您可以使用 JSON 檔匯出和匯入結帳頁面配置。

匯出結帳頁面配置：

1. 在 Shopify 管理介面中，按一下「銷售管道」>「Checkout Blocks」。
2. 按一下「品牌行銷編輯器」。
3. 使用品牌行銷編輯器選取已套用自訂內容的結帳頁面配置。
4. 按一下「更多動作」>「匯出設定」。

結帳頁面配置將以 .json 格式下載至本機裝置。

匯入結帳頁面設定：

1. 在 Shopify 管理介面中，按一下「銷售管道」>「Checkout Blocks」。
2. 按一下「品牌行銷編輯器」。
3. 選取所需結帳頁面配置，以便套用匯入的品牌行銷設定檔。
4. 按一下「更多動作」>「匯入設定」。

5. 在「匯入 Checkout Branding」對話方塊 ，上傳您的品牌行銷 JSON 檔：

   1. 按一下「新增檔案」。
   2. 從您的裝置中選取適當的 JSON 檔案。
   3. 按一下「匯入並繼續」。

6. 查看預先載入的自訂設定。請視需求修改。

7. 按一下「儲存」。

將結帳風格重設為預設值

使用品牌行銷編輯器來編輯顏色或結帳頁面元素時，您可以在變更的顏色或元素旁邊按一下「重設」來將特定值重設回預設值。

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

步驟如下：

1. 在 Shopify 管理介面中，按一下「銷售管道」>「Checkout Blocks」。
2. 按一下「品牌行銷編輯器」。
3. 選取要重設的結帳頁面配置。
4. 按一下「重設為預設」。
5. 在「重設為預設樣式？」對話方塊，按一下「繼續」。