建立購買按鈕

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

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

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

此頁面上

自訂購買按鈕

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

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

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

版面配置樣式

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

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

購買按鈕的動作

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

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

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

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

購買按鈕的外觀

按鈕樣式：供您調整購買按鈕其按鈕部分的樣式、顏色和字體。
版面配置：根據您選擇的版面配置樣式，您可以自訂設定，例如對齊按鈕、圖片尺寸、按鈕文本、字體、顏色和尺寸。
購物車：提供內嵌購物車的文字和顏色選項。您還可以在訂單備註欄位啟用和自訂標籤。您可以透過訂單備註，收集客戶對準備和配送訂單的相關特殊指示。其他資訊欄位可助您與客戶互相聯絡。
- 您必須把「將產品加入購物車」或「開啟產品詳細資訊頁面」設為按鈕的動作，才能夠編輯購物車設定。
詳細內容彈出式視窗：供您設定商品詳細資訊的彈出式視窗。無論系統是否包括數量欄位，您都可自訂按鈕文字、背景和標籤的顏色，以及標籤的字型和字型大小。您必須把「開啟商品詳細資訊頁面」設為按鈕的動作，才能夠編輯這些設定。

為單一產品建立購買按鈕

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

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

步驟：

電腦版

在 Shopify 管理介面中，前往「設定」>「應用程式和銷售管道」。
在「應用程式和銷售管道」頁面中，點擊 Buy Button。
點擊「開啟銷售管道」。
按一下「建立購買按鈕」。
按一下「產品購買按鈕」。
從目錄中選擇產品，或使用搜尋功能找到所需產品。按一下「選擇」。
選用：自訂購買按鈕。
1. 如果您的產品有子類，請選擇「所有子類」或選擇您要包含的子類。
2. 選擇版面配置樣式和客戶按下按鈕後會執行的動作。此外，您也能自訂按鈕外觀。
3. 根據預設，結帳行為會開啟新視窗，但您可以選擇在與網站相同的瀏覽器索引標籤中開啟結帳頁面。按一下「進階設定」>「在相同索引標籤中重新導向」。
點擊「下一步」。
按一下「複製代碼」。
開啟您要顯示購買按鈕的網頁 HTML 編輯器。請參閱「新增購買按鈕程式碼到 HTML」。
在 HTML 內您想要顯示購買按鈕的位置貼上程式碼，然後儲存變更。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在「銷售管道」區段中，點一下「購買按鈕」。
點選「建立購買按鈕」。
點選「商品購買按鈕」。
從目錄中選取商品，或使用搜尋功能找到所需商品，然後點選「選取」。
選用：點選「自訂」。
1. 如果您的產品有多個子類，請選擇「所有子類」或從下拉式清單中選擇一個子類。
2. 選擇版面配置樣式和客戶按下按鈕後會執行的動作。此外，您也能自訂按鈕外觀。
3. 根據預設，結帳行為會開啟新視窗，但您可以選擇在與網站相同的瀏覽器分頁中開啟結帳頁面。點選「進階設定」>「在相同分頁中重新導向」。
點選「完成」。
點選「複製代碼」。
開啟您要顯示購買按鈕的網頁 HTML 編輯器。請參閱「新增購買按鈕程式碼到 HTML」。
在 HTML 內您想要顯示購買按鈕的位置貼上程式碼，然後儲存變更。

Android

在 Shopify 應用程式中，點選「…」按鈕。
在「銷售管道」區段中，點一下「購買按鈕」。
點選「建立購買按鈕」。
點選「商品購買按鈕」。
從目錄中選取商品，或使用搜尋功能找到所需商品，然後點選「選取」。
選用：點選「自訂」。
1. 如果您的產品有多個子類，請選擇「所有子類」或從下拉式清單中選擇一個子類。
2. 選擇版面配置樣式和客戶按下按鈕後會執行的動作。此外，您也能自訂按鈕外觀。
3. 根據預設，結帳行為會開啟新視窗，但您可以選擇在與網站相同的瀏覽器分頁中開啟結帳頁面。點選「進階設定」>「在相同分頁中重新導向」。
點選「完成」。
點選「複製代碼」。
開啟您要顯示購買按鈕的網頁 HTML 編輯器。請參閱「新增購買按鈕程式碼到 HTML」。
在 HTML 內您想要顯示購買按鈕的位置貼上程式碼，然後儲存變更。

建立商品系列的購買按鈕

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

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

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

步驟：

電腦版

在 Shopify 管理介面中，前往「設定」>「應用程式和銷售管道」。
在「應用程式和銷售管道」頁面中，點擊 Buy Button。
點擊「開啟銷售管道」。
按一下「建立購買按鈕」。
按一下「商品系列購買按鈕」。
選擇商品系列，或者使用搜尋功能找到所需商品系列。按一下「選擇」。
選用：自訂購買按鈕。
1. 選擇客戶按下按鈕後會執行的動作。您還可以自訂按鈕外觀。
2. 根據預設，結帳行為會開啟新視窗，但您可以選擇在與網站相同的瀏覽器索引標籤中開啟結帳頁面。按一下「進階設定」>「在相同索引標籤中重新導向」。
點擊「下一步」。
按一下「複製代碼」。
開啟您要顯示購買按鈕的網頁 HTML 編輯器。請參閱「新增購買按鈕程式碼到 HTML」。
在 HTML 內您想要顯示購買按鈕的位置貼上程式碼，然後儲存變更。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在「銷售管道」區段中，點一下「購買按鈕」。
點選「建立購買按鈕」。
點選「商品系列購買按鈕」。
選取商品系列，或者使用搜尋功能找到所需商品系列，然後點選「選取」。
選用：點選「自訂」。
1. 選擇客戶按下按鈕後會執行的動作。您還可以自訂按鈕外觀。
2. 根據預設，結帳行為會開啟新視窗，但您可以選擇在與網站相同的瀏覽器分頁中開啟結帳頁面。點選「進階設定」>「在相同分頁中重新導向」。
點選「完成」。
點選「複製代碼」。
開啟您要顯示購買按鈕的網頁 HTML 編輯器。請參閱「新增購買按鈕程式碼到 HTML」。
在 HTML 內您想要顯示購買按鈕的位置貼上程式碼，然後儲存變更。

Android

在 Shopify 應用程式中，點選「…」按鈕。
在「銷售管道」區段中，點一下「購買按鈕」。
點選「建立購買按鈕」。
點選「商品系列購買按鈕」。
選取商品系列，或者使用搜尋功能找到所需商品系列，然後點選「選取」。
選用：點選「自訂」。
1. 選擇客戶按下按鈕後會執行的動作。您還可以自訂按鈕外觀。
2. 根據預設，結帳行為會開啟新視窗，但您可以選擇在與網站相同的瀏覽器分頁中開啟結帳頁面。點選「進階設定」>「在相同分頁中重新導向」。
點選「完成」。
點選「複製代碼」。
開啟您要顯示購買按鈕的網頁 HTML 編輯器。請參閱「新增購買按鈕程式碼到 HTML」。
在 HTML 內您想要顯示購買按鈕的位置貼上程式碼，然後儲存變更。