顯示線上商店中的動態結帳按鈕
單一產品可使用動態結帳按鈕來替代「加入購物車」按鈕。客戶可以透過動態結帳按鈕,以略過購物車直接進入結帳程序。客戶可以選擇使用 Shopify 或其他慣用的結帳方式來加速結帳作業。除了有助於加快付款流程外,也可以讓客戶使用他們慣用的方法來結帳。
此頁面上
概覽
視您的佈景主題和客戶的裝置而定,動態結帳按鈕會顯示在「加入購物車」按鈕旁邊或下方。動態結帳按鈕有兩種類型:
- 不帶有商標的按鈕會顯示「立即購買」的文字。客戶按下顯示「立即購買」的不帶商標按鈕時,可略過購物車並直接進入結帳程序。
- 帶有商標的按鈕會顯示第三方加速結帳方式的標誌。如果客戶按一下第三方加速結帳方式的帶商標按鈕 (例如 Apple Pay),就會進入該種方法的結帳程序,且他們的資訊都會預先填入。深入瞭解加速結帳作業。可使用的第三方加速結帳方式有以下幾種:
每種付款方式都必須符合特定規定後,才會顯示為帶有商標的按鈕。
顯示的按鈕類型取決於以下因素:
- 您的付款設定
- 客戶的瀏覽器
- 客戶的裝置。
如果您的商店可使用禮品卡或折扣碼,則客戶仍然可以在結帳時輸入這些代碼。
相容性
某些情況下,動態結帳按鈕可能不適合您的線上商店使用。在線上商店顯示動態結帳按鈕前,請先考量與下列功能的相容性:
應用程式
動態結帳按鈕可能與某些應用程式衝突。
如果您使用下列任何一種應用程式,那麼動態結帳按鈕可能與您的線上商店不相容:
- 貨幣轉換工具
- 與購物車互動的應用程式
- 將客戶導向外部結帳的應用程式
購物車屬性
動態結帳按鈕不支援購物車屬性。購物車屬性為自訂表單欄位,可用來在購物車頁面上收集客戶的其他資訊。
購物車屬性的範例包含下列加到購物車頁面上的新增項目:
- 條款與條件核取方塊
- 禮品包裝選項
- 配送日期選擇器
如果您需要使用購物車屬性,那麼動態結帳按鈕不適合您的線上商店使用。
產品、付款設定和按鈕文字
在線上商店顯示動態結帳按鈕前,請先考量下列細節:
動態結帳按鈕只能用來購買單一產品子類。但是如果您在產品頁面上顯示數量選擇器,客戶就可以購買多項同類產品。例如,客戶可以使用動態結帳按鈕購買三個綠色烤杯,但不能購買同時購買一個綠色和一個紫色烤杯。除非您的線上商店收到同一種產品的多筆訂單,否則動態結帳按鈕可能對您的銷售並無助益。
如果您沒有在付款設定中啟用第三方加速結帳方式,,那麼只會顯示不帶有商標的動態結帳按鈕版本。
不帶有商標的動態結帳按鈕會顯示「立即購買」文字。如果您的「加入購物車」按鈕顯示「立即購買」或其他自訂文字,可能會讓客戶感到困惑。
更新背景主題以使用動態結帳按鈕
動態結帳按鈕適用於 Shopify 佈景主題商店中所有佈景主題的最新版本。如果使用舊版的佈景主題,在更新佈景主題後就可以使用動態結帳按鈕。如果您不想更新佈景主題,則可以編輯佈景主題程式碼。
在產品頁面上顯示動態結帳按鈕
步驟:
- 在 Shopify 管理介面 ,前往「線上商店」 > 「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 開啟頁面頂端的下拉式選單。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點選「範本」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點選「範本」。
選取「產品頁面」。
點擊「產品頁面」或「產品」區段。
勾選「顯示動態結帳按鈕」。
點擊「儲存」。
在精選產品區段顯示動態結帳按鈕
多數佈景主題包含在精選產品區段中顯示動態結帳按鈕的設定。
步驟:
- 在 Shopify 管理介面 ,前往「線上商店」 > 「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
按一下現有的精選產品區段,或按一下「新增區段」以新增精選產品區段。
輸入您的產品詳細資訊,並勾選「顯示動態結帳按鈕」。
點擊「儲存」。
隱藏在產品頁面上的動態結帳按鈕
步驟:
- 在 Shopify 管理介面 ,前往「線上商店」 > 「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 開啟頁面頂端的下拉式選單。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點選「範本」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點選「範本」。
選取「產品頁面」。
點擊「產品頁面」或「產品」區段。
取消勾選「顯示動態結帳按鈕」。
點擊「儲存」。
隱藏在在精選產品區段上的動態結帳按鈕
步驟:
- 在 Shopify 管理介面 ,前往「線上商店」 > 「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
按一下「精選產品」區段。
取消勾選「顯示動態結帳按鈕」。
點擊「儲存」。
測試佈景主題上的動態結帳按鈕
由於佈景主題上顯示的動態結帳按鈕類型取決於多種因素,因此您可以執行測試以查看所有組合。測試佈景主題上的動態結帳按鈕之前,請確定會顯示按鈕。
步驟:
- 在 Shopify 管理介面 ,前往「線上商店」 > 「佈景主題」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 按一下「檢視您的商店」。
- 若要測試產品頁面上的按鈕,請前往產品頁面。若要精選產品區段上的按鈕,請停留在首頁。
-
在瀏覽器的網址列中,在目前 URL 的尾端新增下列其中一個字串:
- 若要顯示帶有 Shop Pay 商標的按鈕,請新增
?shopify-debug=true&show=Shop
。 - 如要顯示帶有 Amazon 商標的按鈕,請加入
?shopify-debug=true&show=Amazon
。 - 如要顯示帶有 Apple Pay 商標的按鈕,請加入
?shopify-debug=true&show=ApplePay
(Apple Pay 僅適用於 Safari)。 - 如要顯示帶有 Google Pay 商標的按鈕,請加入
add ?shopify-debug=true&show=Google
。 - 如要顯示帶有 PayPal 商標的按鈕,請加入
?shopify-debug=true&show=PayPal
。 - 如要顯示帶有 Venmo 商標的按鈕,請加入
?shopify-debug=true&show=Venmo
。 - 如要顯示不帶有商標的按鈕,請加入
?shopify-debug=true&show=checkout
。
- 若要顯示帶有 Shop Pay 商標的按鈕,請新增
按下
Enter
鍵以重新載入頁面。視您新增至 URL 的字串而定,您可以看到帶商標或不帶商標的動態結帳按鈕。重複使用其他字串以查看不同類型的動態結帳按鈕。
僅顯示部分產品的動態結帳按鈕
如果您只想為部分產品 (而非全部) 顯示動態結帳按鈕,您可以建立替代範本。替代範本是複製的佈景主題程式碼範本,您可以任意編輯而不會影響原始範本。您可以使用替代產品範本,為使用一個範本的產品顯示動態結帳按鈕,並為使用另一個範本的產品隱藏動態結帳按鈕。
若要建立替代產品範本,請參閱「建立新範本」。
建立替代產品範本並指派給某項產品後,您可以為該產品顯示或隱藏動態結帳按鈕。
步驟:
- 在 Shopify 管理介面 ,前往「線上商店」 > 「佈景主題」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
找到您已建立替代範本的佈景主題,然後點擊「自訂」。
在佈景主題編輯器中,前往已指派替代範本的產品之產品頁面。
點擊「產品頁面」或「產品」區段。
如要為使用替代範本的產品顯示動態結帳按鈕,請勾選「顯示動態結帳按鈕」。如要為使用替代範本的產品隱藏動態結帳按鈕,請取消選「顯示動態結帳按鈕」。
點擊「儲存」。 變更會隨即套用至使用替代範本的所有產品。