說明
登入

使用 app 自訂您的結帳與顧客帳號頁面

您可以透過區塊自訂結帳與顧客帳號頁面，包含結帳設定、感謝頁面與訂單狀態頁面，以及顧客的訂單與個人資料頁面。應用程式開發人員與 Shopify 合作夥伴會建立 app，並在 Shopify App Store 發布。您可以安裝可搭配 checkout 或 customer accounts 使用的公開 app、與您的開發人員建立自訂應用程式，或是 雇用 Shopify 合作夥伴。

在 Shopify 管理介面安裝 app 之後，您可以使用結帳與帳號編輯器，將其新增至支援的頁面。部分區塊只能新增到頁面中的特定區域。

本頁內容

App 可用性

採用 Basic Shopify 方案或更高方案的商家，可以使用部分用於自訂結帳與顧客帳號 (包括感謝頁面與訂單狀態頁面) 的 app。用於自訂結帳中的資訊、運送與付款頁面 (包含來自 draft orders 的結帳) 的 app，僅限 Shopify Plus 使用。

依 Shopify 方案區分的結帳 app 可用性總覽。
App 類型Basic Shopify 方案或更高Shopify Plus
以 web pixel app extensions 建置的 app✔✔
以 post-purchase app extensions 建置的 app✔✔
Public apps built with Shopify Functions✔✔
Custom apps built with Shopify Functions✘✔
以 UI extensions 建置、適用於感謝頁面與訂單狀態頁面的 app✔✔
以 UI extensions 建置、適用於所有顧客帳號頁面的 app✔✔
以 UI extensions 建置、適用於資訊、運送與付款頁面的 app✘✔
Checkout Blocks，可使用 UI 擴充功能與 Shopify Functions 自訂您的結帳的免費 app✔
(有部分功能限制)		✔

安裝 app

如果您想在結帳、顧客帳號、感謝頁面與訂單狀態頁面加入更多功能，請探索可提供這些功能的 app。應用程式開發人員與 Shopify 合作夥伴可以為您建立自訂應用程式，或您也可以從 Shopify App Store 安裝用於 checkout 或 customer accounts 自訂的第三方 app。

步驟：

  1. 前往 Shopify App Store，搜尋適合您業務的結帳 app。
  2. 按一下 Add app。
  3. 按一下 Install app。

安裝 app 後，請使用結帳與帳號編輯器，將其加入您的頁面。

在結帳與帳號編輯器中使用 Apps 側邊欄

在結帳與帳號編輯器中的 Apps 側邊欄，您可以檢視可用與已安裝區塊的總覽。此側邊欄分為 All 與 Added 兩個分頁。All 分頁列出可新增到結帳與帳號頁面的可用區塊，Added 分頁則列出您已新增到結帳與帳號頁面的區塊。

使用 Search blocks 搜尋列，在所有頁面中搜尋您所有可用的區塊與區塊集合。

All 分頁

「All」分頁包含您已安裝 app 提供的所有可用區塊清單。您可以直接從「All」分頁，將區塊新增到對應的結帳與帳號頁面。

所有可用的區塊都會顯示在其所屬 app 的名稱下方。若單一 app 提供多種類型的區塊，這些區塊可能會以集合方式顯示，把相關區塊分組，例如「忠誠積分」或「願望清單管理」。同一個 app 的成組區塊通常設計為搭配運作，因此建議您將整個區塊集合內的所有區塊都加入，為顧客提供完整體驗。您必須逐一從集合中新增每個區塊，才能依需要設定各個區塊。

將區塊新增至頁面後，區塊名稱旁會顯示勾號 (✓)。若您在結帳設定中多次加入該區塊，則會顯示數字，代表該區塊在結帳設定中出現的次數。若該區塊只能新增一次，放置後，新增該區塊的選項會停用。

Added 分頁

Added 分頁列出所有已安裝、且至少在您的結帳與帳號設定中出現於 1 個位置的區塊。所有已加入的區塊都會顯示在其所屬 app 的名稱下方。清單中也會顯示每個區塊已加入的頁面。

按一下該區塊以開啟區塊設定。

從已安裝的 app 新增區塊

安裝 app 後，您可以在結帳與帳號編輯器中，將其以區塊形式加入頁面。部分 app 只能加入設定中的特定區域。每個標示的區域最多可加入 3 個 app。

您可以使用「區段」側邊欄或「應用程式」側邊欄，將現有區塊直接新增到頁面中的各區段。

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

您可以使用「區段」側邊欄，將您已安裝的 app 所提供的區塊新增到目前檢視的頁面。只有可安裝到頁面或區段的區塊，才會顯示為可選項目。

步驟：

電腦版

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。

  3. 在結帳與顧客帳號編輯器中，選取您要加入 app 的頁面，然後按一下 區段 以開啟「區段」側邊欄。

  4. 在要新增 app 的區段中，按一下「⊕ 新增區塊」。

  5. 按一下您要新增的區塊。

  6. 視需要自訂該區塊：

    • 若要重新調整區塊位置，請在「區段」清單中拖放該區塊向上或向下，或在預覽視窗中使用移動按鈕。
    • 按一下該區塊以configure any block settings。

  7. 按一下「儲存」。

行動裝置

  1. 在 Shopify app 中，點選 Menu，然後點選 Settings 設定。

  2. 在「商店設定」區段中，點選「結帳」。

  3. 在「組態」區段中，於您要自訂的結帳組態上點選「自訂」。

  4. 在結帳與顧客帳號編輯器中，選取您要加入 app 的頁面，然後點選「區段」。

  5. 在要新增 app 的區段中，點選「⊕ 新增區塊」。

  6. 點選您要新增的區塊。

  7. 視需要自訂該區塊：

    • 若要重新調整區塊位置，請在「區段」清單中拖放該區塊向上或向下，或在預覽視窗中使用移動按鈕。
    • 點選該區塊以configure any block settings。

  8. 點選「儲存」或「✓」。

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

您可以使用「應用程式」側邊欄，將您已安裝的 app 提供的區塊新增到目前檢視的頁面。僅有支援安裝該區塊的頁面，會在新增區塊時顯示為可選項目。

瞭解詳情using the Apps sidebar in the checkout and accounts editor。

步驟：

電腦版

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。

  3. 在結帳與顧客帳號編輯器中，按一下 應用程式 以開啟「應用程式」側邊欄。

  4. 在要新增的區塊旁，按一下「⊕」。

  5. 在「新增至」彈出視窗中，按一下您要新增該區塊的頁面。

  6. 視需要自訂該區塊：

  7. 按一下「儲存」。

行動裝置

  1. 在 Shopify app 中，點選 Menu，然後點選 Settings 設定。

  2. 在「商店設定」區段中，點選「結帳」。

  3. 在「組態」區段中，於您要自訂的結帳組態上點選「自訂」。

  4. 在結帳與顧客帳號編輯器中，點選「應用程式」。

  5. 在要新增的區塊旁，點選「⊕」。

  6. 在「新增至」彈出視窗中，點選您要新增該區塊的頁面。

  7. 視需要自訂該區塊：

  8. 點選「儲存」或「✓」。

移動並放置 app

您可以在特定頁面的各個區塊之間移動並放置 app。有些 app 只能放在頁面的特定區域。當您嘗試拖放 app 時，無法放置的區域會顯示為灰色。

步驟：

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。

  3. 找到您要移動的 app。

  4. 按住 app 旁的 ⠿ 圖示並拖曳，將 app 移到其他區域。

  5. 按一下「儲存」。

使用區塊在顧客帳號中新增頁面

有些 app 提供的區塊可讓您在顧客帳號的頁首新增頁面。例如，願望清單 app 可能提供可讓您在顧客帳號中新增願望清單頁面的區塊。

您可以在結帳與顧客帳號編輯器中的「應用程式」側邊欄建立 app 頁面。有些 app 頁面支援直接連結，您可以在結帳與顧客帳號編輯器中，或在 Shopify 管理介面的「選單」頁面，將該頁面連結到顧客帳號選單。

新增頁面後，您可以在「應用程式」側邊欄的「已新增」分頁中，或在結帳與顧客帳號編輯器的頁面選擇器選單中開啟該頁面。

步驟：

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「組態」區段中，按一下您要自訂之結帳組態旁的「自訂」。

  3. 在「應用程式」應用程式 區段中，找到您要為其建立頁面的 app。

  4. 按一下「+」圖示，並在「新增頁面至」區段中按一下「帳號」。

  5. 在「區塊」設定中，設定您的 app。

  6. 按一下「儲存」。

  7. 選用：若要在顧客帳號選單中向顧客顯示此 app 頁面，請按一下「加入至選單」。在「顧客帳號主選單」對話方塊中，請執行下列操作：

    1. 檢視由結帳與帳號編輯器自動帶入的「標籤」與「連結」。若您想變更連結名稱，請更新「標籤」欄位**。
    2. 選用：在「顧客帳號主選單」中新增您想加入的其他選單項目。
    3. 按一下「儲存」。

設定 app

您可以自訂 app 的設定。每個 app 都有可供自訂的獨特設定。這些設定由建立該 app 的開發人員或合作夥伴定義。若您有自己的開發團隊，則可自行決定要開放哪些設定供您自訂。

例如，若您使用可建立自訂橫幅的 app，就能自訂橫幅的標題、說明與狀態。

步驟：

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。

  3. 按一下您要設定的 app。

  4. 自訂 app 的設定。

  5. 按一下「儲存」。

管理 app 的行為控制項

在設定 app 時，您也可以管理 app 的行為控制項。這些控制項可讓您管理以下行為：

  • 允許 app block the checkout
  • 將 app 納入 加速結帳作業
  • 自動展開區段，以便在加速結帳作業，以及會顯示已儲存資料的情況（例如顧客已登入帳號）下顯示此 app

視您正在設定的 app 及其在結帳頁面中放置的區段而定，部分控制項可能無法使用。

允許 app 阻擋您的結帳流程

您可以選擇是否允許某個 app 阻擋結帳流程。若顧客在該 app 中提供的資訊不完整或無效，系統便會拒絕該筆訂單。

例如，某個 app 會在您的結帳頁面新增一個顧客必須勾選的核取方塊。若您允許該 app 阻擋結帳，而顧客未勾選該核取方塊，系統便會自動拒絕他們的訂單。

步驟：

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。

  3. 按一下您要設定的 app。

  4. 在右側欄的「結帳行為」區段中，選取「允許 app 阻擋結帳」。

  5. 按一下「允許 app 阻擋結帳」。

  6. 按一下「儲存」。

將 app 納入加速結帳作業

您可以選擇是否要將 app 納入您的 加速結帳作業（例如 Shop Pay）。您也可以允許該 app 在加速結帳作業中強制將收合的區段自動展開。

步驟：

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。

  3. 按一下您要設定的 app。

  4. 在「結帳行為」區段中，選取「將 app 納入加速結帳作業」。

  5. 選用：選取「自動展開區段以顯示 app」，以展開已收合的區段。

  6. 按一下「儲存」。

  7. 選用：若要預覽加速結帳作業在您的商店中的顯示方式，請在結帳編輯器的右上角按一下 購物車。

在結帳的訂購後頁面新增功能

您可以透過訂購後 app，為顧客的結帳體驗新增功能，例如顧客問卷或追加銷售優惠。這些 app 會在顧客完成付款後、看到訂單確認頁面之前插入內容。

若要在訂購後頁面新增功能，您需要先 安裝並設定結帳 app，然後在結帳設定中的訂購後頁面 選取該 app 以供使用。

同一時間只能使用一個結帳 app 來新增訂購後功能。若您安裝了多個具備訂購後功能的 app，您可以在 結帳設定 中選擇要使用的 app。

安裝結帳 app 以新增訂購後功能

若要在訂購後頁面新增功能，您需要使用支援在結帳加入訂購後功能的第三方 app。

如果您需要第三方 app 的協助，請 聯絡該 app 的開發者。

步驟：

  1. 前往 Shopify App Store，搜尋適合您業務的訂購後 app。
  2. 按一下「新增 app」。如果您尚未登入 Shopify 帳號，系統會提示您登入。
  3. 按一下 Install app。
  4. 前往 Shopify 管理介面的「App」區段，然後點選您的結帳 app 名稱。
  5. 輸入所有必要的設定。

選擇要在訂購後頁面使用的 app

安裝並設定結帳 app 後，您需要在結帳設定中選取該 app，供訂購後頁面使用。

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

步驟：

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「訂購後頁面」區段中，選取您要使用的結帳 app。

移除 app

您可以從結帳移除某個 app。若要從 Shopify 管理介面中完全移除該 app，請 解除安裝該 app。

步驟：

  1. 在 Shopify 管理介面中，前往「設定」> Checkout。

  2. 在「設定檔」區段中，點擊您要自訂的設定檔旁邊的「編輯」。

  3. 按一下您想從結帳移除的 app。

  4. 按一下「移除區塊」。

  5. 按一下「儲存」。