建立購買按鈕

在 Shopify 管理介面新增「購買按鈕」銷售管道後,即可為產品商品系列建立購買按鈕。

建立購買按鈕後,您可複製自動生成的代碼並將代碼新增到您希望按鈕出現的網頁或部落格文章中。例如,您可能想將購買按鈕新增到您的 Wordpress 部落格或 Squarespace 網站。

將購買按鈕嵌入網站後,就無法變更按鈕外觀。若要變更,您必須在銷售管道中新建一個按鈕,然後用新的程式碼取代原始程式碼。

自訂購買按鈕

您可以自訂購買按鈕的外觀和行為:

  • 顏色
  • 尺寸
  • 字型
  • 按一下按鈕後執行的動作
  • 結帳頁面是否在新的瀏覽器視窗中開啟

您在自訂按鈕時,可以預覽變更後的樣貌。只要按一下預覽,即可測試購買按鈕的行為。

版面配置樣式

您可以選擇購買按鈕的版面配置。

購買按鈕的可用版面配置
基本 選擇此版面配置可新增無任何產品圖片的購買按鈕。若您已在線上其他地方顯示產品圖片,而只想新增購買按鈕,則可採用此選項。
經典 選擇此版面配置以在購買按鈕旁顯示產品圖片和價格。這種版面配置方便您快速預覽產品,例如在部落格貼文所呈現的樣貌。
全視圖 選擇此版面配置以在購買按鈕旁顯示產品圖片、價格和說明。這種版面配置與線上商店的產品詳細資訊頁面相似。

購買按鈕的動作

建立購買按鈕時,您可以選擇按一下按鈕時進行的動作。

若您將購買按鈕用於商品系列,則該動作將套用於商品系列中的每項產品。

  • 將產品加入購物車:可將產品新增至購物車,且客戶可繼續購物並新增其他產品至購物車。
  • 直接前往結帳頁面:可將客戶直接導向結帳頁面以購買產品,但客戶無法在訂單新增其他產品。
  • 開啟產品詳細資訊頁面可顯示「檢視產品」按鈕。客戶按一下按鈕後便可看到產品說明、選擇任何可供應的產品子類,以及將產品加入購物車。如果單項產品有多張產品圖片,畫面也會一併顯示這些圖片。
    • 若您選擇全視圖版面配置就不會出現此選項,因為全視圖版面配置會預設顯示所有商品詳細資訊。

您也可以選擇結帳頁面是否在新的瀏覽器視窗開啟,或在相同索引標籤中開啟。預設行為是在新視窗中開啟結帳頁面。

購買按鈕的外觀

  • 按鈕樣式:供您調整購買按鈕其按鈕部分的樣式、顏色和字體。
  • 版面配置:根據您選擇的版面配置樣式,您可以自訂設定,例如對齊按鈕、圖片尺寸、按鈕文本、字體、顏色和尺寸。
  • 購物車:提供內嵌購物車的文字和顏色選項。您還可以在訂單備註欄位啟用和自訂標籤。您可以透過訂單備註,收集客戶對準備和配送訂單的相關特殊指示。其他資訊欄位可助您與客戶互相聯絡。

    • 您必須把「將產品加入購物車」或「開啟產品詳細資訊頁面」設為按鈕的動作,才能夠編輯購物車設定。
  • 詳細內容彈出式視窗:供您設定產品詳細資訊的彈出式視窗。無論系統是否顯示數量欄位,您都可自訂按鈕文字、背景和標籤的顏色,以及標籤的字體和字體大小。您必須把「開啟產品詳細資訊頁面」設為按鈕的動作,才能夠編輯這些設定。

為單一產品建立購買按鈕

您可建立單一產品的購買按鈕。此購買按鈕可包含一個或所有產品的子類選項。建立購買按鈕時,由您選擇版面配置樣式並自訂按鈕顏色、文字和外觀,以及客戶按一下該按鈕後系統會出現的動作。深入瞭解如何自訂購買按鈕

建立產品的購買按鈕之前,您必須先在 Shopify 管理介面新增產品,並開放產品使用購買按鈕作為銷售管道。

步驟:

建立商品系列的購買按鈕

建立商品系列的購買按鈕,代表您其實為此商品系列的每個產品都建立一個按鈕。

建立購買按鈕時,選擇版面配置樣式並自訂按鈕顏色、文字和外觀,以及客戶按一下該按鈕後系統會出現的動作。深入瞭解如何自訂購買按鈕

建立商品系列的購買按鈕之前,您必須:

步驟:

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

免費試用