自訂您的結帳樣式

此頁面列印時間為 Jun 26, 2024。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/checkout-settings/customize-checkout-configurations/checkout-style。

如果您使用網路商店販售商品，則可以在結帳頁面和帳號編輯器中自訂結帳頁面的樣式。新增公司標誌、變更顏色或選擇新字型，讓結帳頁面的風格更貼近商家形象。

您為結帳頁面選擇的部分品牌行銷選項也會套用至新版顧客帳號頁面。

此頁面上

自訂結帳頁面樣式的考量事項

自訂結帳樣式之前，請查看下列考量事項：

  • 選擇方案並建立第一項商品之前，管理介面「結帳頁面設定」區段中的「設定」區域會保持隱藏。
  • 如果您目前採用 Shopify Plus，則可使用 Checkout Branding API 自訂結帳頁面品牌行銷的進階內容。

  • 如需自訂購物車和結帳頁面樣式的相關協助，可以聘僱 Shopify 合作夥伴。深入瞭解如何聘僱 Shopify 合作夥伴。

  • 雖然您可能希望為結帳頁面添加大量顏色和趣味，但最好保持設計簡潔。客戶會使用這些頁面輸入訂單的運送和付款資訊，盡量不要分散他們的注意力或使資訊難以閱讀。選擇具有高對比度的顏色，以及不會搶走頁面文字焦點的圖片。

上傳橫幅的背景圖片

在每個結帳頁面頂端都有橫幅，會顯示您的商店名稱。您可以變更該橫幅的背景圖片。請選擇適合您品牌的圖片，例如若您販售珠寶，那麼彩色串珠圖片就相當適合。橫幅圖片的最佳解析度為 1000 x 400 像素。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在「結帳頁面頁首」區段中，點按「背景圖片」選項上的「選取圖片」。

  5. 點按「新增圖片」來上傳圖片檔，或從圖庫選取現有圖片。

  6. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「結帳頁面頁首」區段中，點選「背景圖片」選項上的「選取圖片」。
  6. 點選「新增圖片」來上傳圖片檔，或從圖庫選取現有圖片。
  7. 點選「儲存」。
  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「結帳頁面頁首」區段中，點選「背景圖片」選項上的「選取圖片」。
  6. 點選「新增圖片」來上傳圖片檔，或從圖庫選取現有圖片。
  7. 點選「儲存」。

您可以在結帳頁面加上商店標誌。若您使用橫幅圖片，則標誌會顯示在橫幅上方。標誌可以對齊結帳頁面橫幅區域的左側、右側或中間。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在「標誌」區段中，點按「新增圖片」來上傳圖片檔，或從圖庫選取現有圖片。

  5. 選用：在「結帳頁面頁首」區段中，透過下列設定調整標誌：

    • 使用「標誌寬度上限」選取標誌大小 (以像素為單位)。
    • 使用「標誌對齊」選取標誌要顯示在橫幅的左側、中央還是右側。
    • 使用「標誌位置」選取標誌在結帳頁面的顯示位置。

  6. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「標誌」區段中，點選「新增圖片」來上傳圖片檔，或從圖庫選取現有圖片。

  6. 選用：在「結帳頁面頁首」區段中，透過下列設定調整標誌：

    • 使用「標誌寬度上限」選取標誌大小 (以像素為單位)。
    • 使用「標誌對齊」選取標誌要顯示在橫幅的左側、中央還是右側。
    • 使用「標誌位置」選取標誌在結帳頁面的顯示位置。

  7. 點選「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「標誌」區段中，點選「新增圖片」來上傳圖片檔，或從圖庫選取現有圖片。

  6. 選用：在「結帳頁面頁首」區段中，透過下列設定調整標誌：

    • 使用「標誌寬度上限」選取標誌大小 (以像素為單位)。
    • 使用「標誌對齊」選取標誌要顯示在橫幅的左側、中央還是右側。
    • 使用「標誌位置」選取標誌在結帳頁面的顯示位置。

  7. 點選「儲存」。

為主要內容區域加上背景圖片或顏色

您可以為結帳頁面的主要內容區域加上背景圖片或顏色。此為顧客輸入運送和付款資訊的區域，因此請確保您可清楚閱讀背景上的欄位。

您無法同時加上背景圖片和顏色。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在「背景 1」區段中，新增背景顏色或圖片。

    • 若您要新增顏色，請按一下「背景顏色」旁的方塊以開啟顏色挑選器，接著選擇顏色或輸入十六進位顏色代碼。
    • 若要新增圖片，請點按「背景圖片」>「新增圖片」來上傳圖片檔，或從圖庫中選取現有圖片。較小的圖片會在背景上以類似瓷磚的方式縱橫重複排列。

  5. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。

  5. 在「背景 1」區段中，新增背景顏色或圖片。

    • 若您要新增顏色，請點選「背景顏色」旁的方塊以開啟顏色挑選器，接著選擇顏色或輸入十六進位顏色代碼。
    • 若要新增圖片，請點選「背景圖片」>「新增圖片」來上傳圖片檔，或從圖庫中選取現有圖片。較小的圖片會在背景上以類似瓷磚的方式縱橫重複排列。

  6. 點選「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。

  5. 在「背景 1」區段中，新增背景顏色或圖片。

    • 若您要新增顏色，請點選「背景顏色」旁的方塊以開啟顏色挑選器，接著選擇顏色或輸入十六進位顏色代碼。
    • 若要新增圖片，請點選「背景圖片」>「新增圖片」來上傳圖片檔，或從圖庫中選取現有圖片。較小的圖片會在背景上以類似瓷磚的方式縱橫重複排列。

  6. 點選「儲存」。

變更表單欄位的顏色

欄位顏色可變更為白色或透明；您可能會想讓欄位變透明，使背景圖片清晰可見。請確保您可以清楚閱讀欄位中的文字。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在「顏色」區段中，點按「表單欄位和卡片背景」下拉式選單以選取想要的顏色。

  5. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「顏色」區段中，點選「表單欄位和卡片背景」下拉式選單以選取想要的顏色。
  6. 點選「儲存」。
  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「顏色」區段中，點選「表單欄位和卡片背景」下拉式選單以選取想要的顏色。
  6. 點選「儲存」。

為訂單摘要加上背景圖片或顏色

顧客在結帳頁面點按「顯示訂單摘要」後，會看見所購買商品的清單。您可以為訂單摘要加上背景圖片或顏色。建議您在佈景主題編輯器的預覽中點按「顯示訂單摘要」，以確保訂單摘要的顯示方式符合您的需求。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在「背景 2」區段中，新增背景顏色或圖片：

    • 若您要新增顏色，請按一下「背景顏色」旁的方塊以開啟顏色挑選器，接著選擇顏色或輸入十六進位顏色代碼。
    • 若要新增圖片，請點按「背景圖片」>「新增圖片」來上傳圖片檔，或從圖庫中選取現有圖片。較小的圖片會在背景上以類似瓷磚的方式縱橫重複排列。

  5. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。

  5. 在「背景 2」區段中，新增背景顏色或圖片：

    • 若您要新增顏色，請點選「背景顏色」旁的方塊以開啟顏色挑選器，接著選擇顏色或輸入十六進位顏色代碼。
    • 若要新增圖片，請點選「背景圖片」>「新增圖片」來上傳圖片檔，或從圖庫中選取現有圖片。較小的圖片會在背景上以類似瓷磚的方式縱橫重複排列。

  6. 點選「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。

  5. 在「背景 2」區段中，新增背景顏色或圖片：

    • 若您要新增顏色，請點選「背景顏色」旁的方塊以開啟顏色挑選器，接著選擇顏色或輸入十六進位顏色代碼。
    • 若要新增圖片，請點選「背景圖片」>「新增圖片」來上傳圖片檔，或從圖庫中選取現有圖片。較小的圖片會在背景上以類似瓷磚的方式縱橫重複排列。

  6. 點選「儲存」。

變更或移除結帳頁面的圖片

您可以變更或移除任何新增至結帳頁面的圖片。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在要更換的圖片下點按「變更」，然後選取圖片庫中的圖片或瀏覽免費圖片。

  5. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在要更換的圖片下點選「變更」，然後選取圖片庫中的圖片或瀏覽免費圖片。
  6. 點選「儲存」。
  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在要更換的圖片下點選「變更」，然後選取圖片庫中的圖片或瀏覽免費圖片。
  6. 點選「儲存」。

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

新增圖片替代文字

將圖片新增到結帳頁面後，您可以新增圖片替代文字。這些文字有助於實現無障礙存取和搜尋引擎最佳化 (SEO)。深入瞭解搜尋引擎最佳化 (SEO)。

步驟如下：

  1. 在要新增替代文字的圖片上點按「編輯」。
  2. 在「替代文字」下方輸入圖片的替代文字。為圖片選擇簡潔的描述性標題。
  3. 按一下「儲存」。

變更結帳頁面的字型

您可從字型清單中選擇以自訂您的結帳頁面。您無法變更結帳頁面上的文字顏色。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在「字體」區段中，點按「標題」下拉式選單或「正文」下拉式選單，然後選取字型。

  5. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「字體」區段中，點選「標題」下拉式選單或「正文」下拉式選單，然後選取字型。
  6. 點選「儲存」。
  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「字體」區段中，點選「標題」下拉式選單或「正文」下拉式選單，然後選取字型。
  6. 點選「儲存」。

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

您可以變更結帳頁面上的按鈕、錯誤訊息和連結等強調色的顏色。若要變更顏色，請確保您在主要內容區域和訂單摘要的背景仍可清楚地閱讀文字。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在「顏色」區段中，點擊「強調色」、「按鈕」或「錯誤」旁的顏色方塊來開啟顏色選擇器，接著選擇顏色或輸入十六進位顏色代碼。

  5. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「顏色」區段中，點選「強調色」、「按鈕」或「錯誤」旁的顏色方塊來開啟顏色選擇器，接著選擇顏色或輸入十六進位顏色代碼。
  6. 點選「儲存」。
  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「顏色」區段中，點選「強調色」、「按鈕」或「錯誤」旁的顏色方塊來開啟顏色選擇器，接著選擇顏色或輸入十六進位顏色代碼。
  6. 點選「儲存」。

變更結帳頁面版面配置

預設情況下，商店的結帳頁面版面配置會設定為一頁式結帳頁面。您可以在 Shopify 管理介面切換一頁式和三頁式的結帳頁面。變更結帳頁面的版面配置前，請先瞭解一頁式和三頁式結帳頁面之間的差異。

切換結帳頁面版面配置時，不會即時顯示結帳頁面或帳號編輯器的預覽畫面。儲存變更後，請前往店面結帳頁面以檢視新的結帳頁面版面配置。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，點按齒輪圖示以存取「設定」側邊欄。

  4. 在「結帳頁面版面配置」區段中，點擊目前版面配置以開啟結帳頁面版面配置選項。

  5. 點擊「一頁式結帳頁面」或「三頁式結帳頁面」以設定結帳頁面的版面配置。

  6. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 在「設定」區段中，點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「結帳頁面的版面配置」區段中，點選「一頁式結帳頁面」或「三頁式結帳頁面」以設定結帳頁面的版面配置。
  6. 點選「儲存」。
  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 在「設定」區段中，點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，點選齒輪圖示以存取「設定」側邊欄。
  5. 在「結帳頁面的版面配置」區段中，點選「一頁式結帳頁面」或「三頁式結帳頁面」以設定結帳頁面的版面配置。
  6. 點選「儲存」。

將應用程式區塊新增至結帳頁面

為提升顧客結帳體驗，您可以使用應用程式區塊新增自訂橫幅或忠實顧客獎勵等項目。部分結帳應用程式 (包含可在結帳頁面自訂資訊、運送和付款頁面的應用程式) 僅適用於採用 Shopify Plus 方案的商家。選擇要新增到結帳頁面的應用程式時，請參閱結帳應用程式可用性。

深入瞭解如何使用應用程式自訂結帳頁面設定。

步驟如下：

  1. 從 Shopify 管理介面 中，前往「設定」>「結帳」。

  2. 前往「設定」區段，在要自訂的結帳頁面設定旁點按「自訂」。

  3. 在結帳頁面和帳號編輯器中，選取要新增應用程式的頁面，然後點按區段圖示以存取「區段」側邊欄。

  4. 點按「⊕ 新增應用程式區塊」。

  5. 在「此頁面可用的應用程式」區段，點按要新增至結帳頁面的應用程式，系統會自動將應用程式置於頁面的建議區域。

  6. 按一下「儲存」。

  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，選取要新增應用程式的頁面，然後點按區段圖示以存取「區段」側邊欄。
  5. 點按「⊕ 新增應用程式區塊」。
  6. 在「此頁面可用的應用程式」區段，點按要新增至結帳頁面的應用程式，系統會自動將應用程式置於頁面的建議區域。
  7. 按一下「儲存」。
  1. 在 Shopify 應用程式中，依序點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 前往「設定」區段，在要自訂的結帳頁面上點選「自訂」。
  4. 在結帳頁面和帳號編輯器中，選取要新增應用程式的頁面，然後點按區段圖示以存取「區段」側邊欄。
  5. 點按「⊕ 新增應用程式區塊」。
  6. 在「此頁面可用的應用程式」區段，點按要新增至結帳頁面的應用程式，系統會自動將應用程式置於頁面的建議區域。
  7. 按一下「儲存」。

準備好開始透過 Shopify 銷售商品了嗎？

免費試用