自訂結帳的樣式

如果您透過網路商店販售商品，您可在 checkout and accounts editor 自訂結帳頁面的樣式。您可以新增公司標誌、變更顏色或選擇新字型，讓結帳頁面更符合您的品牌。

您為結帳頁面設定的部分品牌樣式也會套用到您的 new customer account pages。

本頁內容

自訂結帳頁面與顧客帳號樣式的注意事項

在開始自訂結帳樣式之前，請先留意以下事項：

在管理介面的 Checkout 設定中，組態區域會在您選定方案並建立首件商品後才會顯示。
若您使用 Shopify Plus，您可以使用 Checkout Branding API 進行進階的結帳品牌自訂。
若您需要協助自訂購物車與結帳的樣式，您可以聘僱 Shopify 合作夥伴。瞭解詳情：hiring a Shopify Partner。
即使您可能想為結帳頁面加入大量色彩與視覺元素，建議仍以簡潔為主。顧客會在這些頁面輸入訂單的運送與付款資訊，您不希望分散他們的注意力或讓資訊難以閱讀。請選用高對比的色彩，以及不會搶過頁面文字焦點的圖片。

建立結帳頁面與顧客帳號的調色盤

您可以建立調色盤，快速地在結帳頁面與帳號編輯器中的多項設定重複使用顏色。當您變更調色盤的顏色時，系統會動態更新所有使用該顏色的設定，替換為新顏色。這也表示，如果您想多次使用同一種顏色，不需要特地記下十六進位色碼。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在「調色盤」區段中，點擊 + 來選取要新增至調色盤的顏色。
選用：若要移除調色盤中不再需要的顏色：
1. 點擊該顏色，然後點擊「刪除顏色」。
2. 選取一個替代顏色，將結帳頁面中任何使用已刪除顏色的地方替換為該顏色。
3. 點擊「確認」。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在「調色盤」區段中，點選 + 來選取要新增至調色盤的顏色。
選用：若要移除調色盤中不再需要的顏色：
1. 點選該顏色，然後點選「刪除顏色」。
2. 選取一個替代顏色，將結帳頁面中任何使用已刪除顏色的地方替換為該顏色。
3. 點選「確認」。
點選儲存或 ✓。

在結帳頁面與帳號編輯器中使用顏色選擇器

在結帳頁面與帳號編輯器中自訂需要使用顏色的欄位時，您可以使用顏色選擇器協助挑選想要的顏色。在顏色選擇器中，您可以透過以下任一方式選取顏色：

在選擇器預覽中，使用顏色滑桿來變更可用顏色的色調。
使用十六進位欄位輸入特定顏色的代碼，例如標準純藍色的色碼為 #0000FF。
使用，將游標移至畫面上任何位置以挑選特定顏色。
使用，將選擇器預覽中的可用顏色數量縮減為 40 個。

「調色盤」區段會顯示您已在結帳頁面與帳號編輯器中，新增至調色盤的所有色樣。

若您先前在結帳頁面與帳號編輯器的工作階段中，曾手動選取任何顏色，便也可以從「最近使用過」的色樣中進行選取。

自訂頁首顏色

在各個結帳頁面與顧客帳號頁面頂端，皆有一個頁首會顯示您的商店名稱。您可以變更該橫幅的背景顏色，挑選與您的品牌相襯的顏色。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在「頁首」區段中，進行下列任一顏色自訂項目：
- 使用「背景」來設定頁首背景顏色。
- 使用「強調色」來設定購物車圖示及頁首連結的顏色。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在「頁首」區段中，進行下列任一顏色自訂項目：
- 使用「背景」來設定頁首背景顏色。
- 使用「強調色」來設定購物車圖示及頁首連結的顏色。
點選儲存或 ✓。

在結帳頁面新增標誌

您可以在結帳頁面加上商店標誌。您能將標誌對齊結帳頁面橫幅區域的左側、右側或置中對齊。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在「標誌」區段中，點擊「圖片」欄位。
點擊「從圖庫選取」，從圖庫中選取現有圖片。
選用：在「標誌」區段中，透過下列設定調整您的標誌：
- 使用「寬度」選取標誌尺寸 (單位為像素)。
- 使用「對齊方式」選取要在橫幅的左側、中間或右側顯示標誌。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在「標誌」區段中，點選「圖片」欄位。
點選「從圖庫選取」，從圖庫中選取現有圖片。
選用：在「標誌」區段中，透過下列設定調整您的標誌：
- 使用「寬度」選取標誌尺寸 (單位為像素)。
- 使用「對齊方式」選取要在橫幅的左側、中間或右側顯示標誌。
點選儲存或 ✓。

為主要內容區域新增背景顏色

您可以為結帳頁面的主要內容區域新增背景顏色。這是顧客輸入其運送和付款資訊的區域，因此請確保在該背景下能清楚閱讀各欄位。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在主要區段中，按一下顏色以開啟顏色選擇器，然後選擇一種顏色或輸入十六進位代碼。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在主要區段中，點選顏色以開啟顏色選擇器，然後選擇一種顏色或輸入十六進位代碼。
點選儲存或 ✓。

變更表單欄位的顏色

您可以變更結帳頁面中表單欄位的顏色，也可以變更錯誤訊息的顏色，將其改為白色或透明。請確保欄位中的文字清晰可讀。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在「輸入欄位」區段中，進行下列任一自訂項目：
- 若要變更輸入欄位的顏色，請前往「輸入」，然後點擊「透明」或「白色」。
- 若要變更錯誤訊息的顏色，請點擊「錯誤」欄位，然後選取一個顏色。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在「輸入欄位」區段中，進行下列任一自訂項目：
- 若要變更輸入欄位的顏色，請前往「輸入」，然後點選「透明」或「白色」。
- 若要變更錯誤訊息的顏色，請點選「錯誤」欄位，然後選取一個顏色。
點選儲存或 ✓。

在訂單摘要新增背景圖片或顏色

顧客在結帳頁面按一下 顯示訂單摘要 時，會顯示所購買的商品清單。您可以為訂單摘要加入背景圖片或顏色。您也可以在佈景主題編輯器的預覽中按一下 顯示訂單摘要，確認訂單摘要的顯示效果是否滿意。

較小的圖片會在背景垂直與水平重複，類似圖塊。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在「訂單摘要」區段中，點擊「訂單摘要」。
新增背景顏色或圖片：
- 若要新增顏色，請點擊「背景」開啟顏色選擇器，然後挑選顏色或輸入十六進位色碼。
- 若要新增圖片，請點擊「圖片」>「選取」。點擊「從圖庫選取」，從圖庫中選取現有圖片。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在「訂單摘要」區段中，點選「訂單摘要」。
新增背景顏色或圖片：
- 若要新增顏色，請點選「背景」開啟顏色選擇器，然後挑選顏色或輸入十六進位色碼。
- 若要新增圖片，請點選「圖片」>「選取」。點選「從圖庫選取」，從圖庫中選取現有圖片。
點選儲存或 ✓。

變更或移除訂單摘要的圖片

您可以變更或移除已新增至訂單摘要的圖片。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在「訂單摘要」區段中，點擊「訂單摘要」。
在欲替換的圖片下方，按一下變更，從您的媒體庫選取圖片，或瀏覽免費圖片。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在「訂單摘要」區段中，點選「訂單摘要」。
在欲替換的圖片下方，點選變更，從您的媒體庫選取圖片，或瀏覽免費圖片。
點選儲存或 ✓。

若要移除圖片，按一下變更 > 移除圖片。這不會從 Shopify 刪除該圖片。

變更結帳頁面的字型

您可以從字型清單中進行選取，以自訂結帳頁面。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在 文字排版 區段，按一下標題下拉式選單或內文下拉式選單，然後選取字型。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在 文字排版 區段，點選標題下拉式選單或內文下拉式選單，然後選取字型。
點選儲存或 ✓。

變更結帳頁面的按鈕與強調色

您可以變更結帳頁面上的按鈕和強調色 (例如連結) 顏色。若您變更顏色，請確保主要內容區域與訂單摘要背景之上的文字清晰可讀。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳頁面與帳號編輯器中，點擊進入「設定」側邊欄。
在「強調色與按鈕」區段中，點擊「強調色」或「按鈕」旁的顏色方塊以開啟顏色選擇器，然後挑選顏色或輸入十六進位色碼。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳號編輯器中，點選設定。
在「強調色和按鈕」區段中，點選「強調色」或「按鈕」旁的顏色方塊即可開啟顏色選擇器，然後請選擇一種顏色或輸入十六進位代碼。
點選儲存或 ✓。

變更結帳頁面版面配置

預設情況下，商店的結帳頁面版面配置為一頁式結帳頁面。您可以透過 Shopify 管理介面，在一頁式與三頁式結帳頁面之間切換。變更結帳頁面版面配置前，請先查看differences between the one-page and three-page checkouts。

切換結帳頁面版面配置時，結帳與帳戶編輯器中的預覽不會即時更新。儲存變更後，前往線上店面的結帳頁面檢視新的版面配置。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳與帳號編輯器中，按一下齒輪圖示以開啟設定側邊欄。
在「結帳頁面版面配置」區段中，按一下目前的版面配置以開啟結帳版面配置選項。
按一下「一頁式結帳頁面」或「三頁式結帳頁面」以設定結帳頁面版面配置。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「組態」區段中，點選「自訂」。
在結帳與帳戶編輯器中，點選齒輪圖示以開啟「設定」側邊欄。
在「結帳頁面版面配置」區段中，點選「一頁式結帳頁面」或「三頁式結帳頁面」以設定結帳頁面版面配置。
點選儲存或 ✓。

管理「再次購買」按鈕

訂單狀態頁面會顯示「再次購買」按鈕，讓顧客重新訂購已購買的品項。

步驟：

在您的 Shopify 管理介面中，前往設定 > Checkout。
在組態區段中，於欲自訂的組態旁按一下自訂。
在結帳與帳戶編輯器中，按一下「設定」圖示。
在「再次購買按鈕」區段中，開啟或關閉按鈕。

在行動裝置預設顯示折扣代碼欄位

預設情況下，顧客在行動裝置上結帳時，系統會隱藏訂單摘要與折扣代碼欄位。顧客可點選「顯示訂單摘要」，展開完整的訂單摘要並顯示折扣代碼欄位，以便將折扣代碼或禮品卡代碼加入訂單。

您可以變更預設行為，讓在行動裝置結帳時一律顯示訂單摘要與折扣代碼欄位。顧客可點選「隱藏訂單摘要」以隱藏折扣代碼欄位。

您的結帳頁面必須使用three-page checkout layout，才能使用此設定。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳與帳戶編輯器中，按一下區段圖示以開啟「區段」側邊欄。
在「資訊」、「運送」或「付款」頁面中，按一下「訂單摘要」。
啟用「一律顯示折扣代碼欄位」設定。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「設定檔」區段中，點選您要自訂的設定檔上的「編輯」。
在結帳與帳戶編輯器中，點選「區段」。
在「資訊」、「運送」或「付款」頁面中，點選「訂單摘要」。
啟用「一律顯示折扣代碼欄位」設定。
點選儲存或 ✓。

在結帳頁面新增區塊

您可使用區塊，為顧客的結帳流程加入自訂橫幅、會員回饋等功能。部分結帳 app (包含可自訂結帳中的資訊、運送與付款頁面的 app) 僅適用於使用 Shopify Plus 方案的商店。選擇要新增至結帳流程的 app 時，請參考checkout app availability。

您可以透過「區段」側邊欄或「應用程式」側邊欄，將現有區塊直接加入頁面的區段。

深入瞭解customizing your checkout configurations with apps。

使用「區段」側邊欄新增區塊

您可以透過「區段」側邊欄，將已安裝 app 的區塊加入目前檢視的頁面。只有可安裝至該頁面或區段的區塊，才會顯示為可選擇的選項。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳與帳戶編輯器中，選取要加入 app 的頁面，然後按一下以開啟「區段」側邊欄。
在要加入 app 的區段中，按一下「⊕ 新增區塊」。
按一下要新增的區塊。
視需要自訂該區塊：
- 若要重新排列區塊位置，可在「區段」清單中將區塊向上或向下拖放，或在預覽視窗中使用移動按鈕。
- 按一下該區塊以 configure any block settings。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「組態」區段中，於要自訂的結帳組態旁點選「自訂」。
在結帳與帳戶編輯器中，選取要加入 app 的頁面，然後點選「區段」。
在要加入 app 的區段中，點選「⊕ 新增區塊」。
點選要新增的區塊。
視需要自訂該區塊：
- 若要重新排列區塊位置，可在「區段」清單中將區塊向上或向下拖放，或在預覽視窗中使用移動按鈕。
- 點選該區塊以 configure any block settings。
點選儲存或 ✓。

使用「應用程式」側邊欄新增區塊

您可以透過「應用程式」側邊欄，將已安裝 app 的區塊加入目前檢視的頁面。新增區塊時，僅會顯示可安裝該區塊的頁面作為選項。

深入瞭解using the Apps sidebar in the checkout and accounts editor。

步驟：

電腦版

在您的 Shopify 管理介面中，前往設定 > Checkout。
在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。
在結帳與帳戶編輯器中，按一下以開啟「應用程式」側邊欄。
在欲新增的區塊旁，按一下「⊕」。
在「新增至」彈出視窗中，按一下要加入區塊的頁面。
視需要自訂該區塊：
- 若要重新排列區塊位置，請在預覽視窗中使用移動按鈕。
- Configure any block settings。
按一下儲存。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選結帳。
在「組態」區段中，於要自訂的結帳組態旁點選「自訂」。
在結帳與帳戶編輯器中，點選「應用程式」。
在欲新增的區塊旁，點選「⊕」。
在「新增至」彈出視窗中，點選要加入區塊的頁面。
視需要自訂該區塊：
- 若要重新排列區塊位置，請在預覽視窗中使用移動按鈕。
- Configure any block settings。
點選儲存或 ✓。