自訂您的結帳樣式

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

如果您使用線上商店販售產品，則可以在佈景主題編輯器中自訂結帳頁面的樣式。新增公司標誌、變更顏色或選擇新字型，讓結帳作業更能搭配您的業務風格。

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

此頁面上

上傳橫幅的背景圖片

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

步驟：

  1. 從 Shopify 管理介面 中，前往「設定 > 結帳」。
  2. 在「結帳頁面樣式」區段中，點擊「自訂結帳頁面」以開啟佈景主題編輯器。
  3. 在佈景主題編輯器中，按一下齒輪圖示以存取「佈景主題設定」。
  4. 按一下「結帳」。
  5. 在「橫幅」區段點按「選取圖片」。
  6. 按一下「新增圖片」以上傳圖片檔，或選取已上傳至圖庫的圖片。
  7. 按一下「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 在「結帳頁面樣式」區段中，點選「自訂結帳頁面」以開啟佈景主題編輯器。
  4. 在佈景主題編輯器中，點選齒輪圖示以存取「佈景主題設定」。
  5. 點選「結帳頁面」。
  6. 在「橫幅」區段點選「選取圖片」。
  7. 點選「新增圖片」以上傳圖片檔，或選取已上傳至圖庫的圖片。
  8. 點選「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 在「結帳頁面樣式」區段中，點選「自訂結帳頁面」以開啟佈景主題編輯器。
  4. 在佈景主題編輯器中，點選齒輪圖示以存取「佈景主題設定」。
  5. 點選「結帳頁面」。
  6. 在「橫幅」區段點選「選取圖片」。
  7. 點選「新增圖片」以上傳圖片檔，或選取已上傳至圖庫的圖片。
  8. 點選「儲存」。

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

步驟：

  1. 從 Shopify 管理介面 中，前往「設定 > 結帳」。
  2. 在「結帳頁面樣式」區段中，點擊「自訂結帳頁面」以開啟佈景主題編輯器。
  3. 在佈景主題編輯器中，按一下齒輪圖示以存取「佈景主題設定」。
  4. 按一下「結帳」。
  5. 在「標誌」區段點按「選取圖片」。
  6. 按一下「新增圖片」以上傳圖片檔，或選取已上傳至圖庫的圖片。
  7. 選擇標誌位置。
  8. 選擇標誌尺寸。
  9. 按一下「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 在「結帳頁面樣式」區段中，點選「自訂結帳頁面」以開啟佈景主題編輯器。
  4. 在佈景主題編輯器中，點選齒輪圖示以存取「佈景主題設定」。
  5. 點選「結帳頁面」。
  6. 在「標誌」區段點選「選取圖片」。
  7. 點選「新增圖片」以上傳圖片檔，或選取已上傳至圖庫的圖片。
  8. 選擇標誌位置。
  9. 選擇標誌尺寸。
  10. 點選「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕和「設定」。
  2. 在「商店設定」區段中，點選「結帳」。
  3. 在「結帳頁面樣式」區段中，點選「自訂結帳頁面」以開啟佈景主題編輯器。
  4. 在佈景主題編輯器中，點選齒輪圖示以存取「佈景主題設定」。
  5. 點選「結帳頁面」。
  6. 在「標誌」區段點選「選取圖片」。
  7. 點選「新增圖片」以上傳圖片檔，或選取已上傳至圖庫的圖片。
  8. 選擇標誌位置。
  9. 選擇標誌尺寸。
  10. 點選「儲存」。

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

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

步驟：

  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. 按一下「結帳」。

  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. 點選「儲存」。

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

新增圖片替代文字

若您滿意結帳頁面上的圖片，建議您新增圖片替代文字。這些文字有助於進行無障礙存取和搜尋引擎最佳化。深入瞭解搜尋引擎最佳化。

步驟：

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

變更結帳頁面的字型

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

步驟：

  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 App Store，搜尋適合您商家的售後應用程式。
  2. 點擊「新增應用程式」。若您尚未登入 Shopify 帳號，系統會提示您登入。
  3. 按一下「安裝 App」。
  4. 前往 Shopify 管理介面的「應用程式」區段，然後點選結帳應用程式的名稱。
  5. 輸入所需的任何配置設定。

選取要在購買後頁面上使用的應用程式

安裝和設定結帳應用程式後，您需要選取該應用程式以在您的結帳設定中的售後頁面使用。

您也可以在結帳設定中變更要使用的應用程式。

步驟：

  1. 在 Shopify 管理介面 中，按一下「設定」。
  2. 按一下「結帳」。
  3. 在「售後頁面」區段中，選取您想要使用的結帳應用程式。

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

免費試用