說明
登入

建立購買按鈕

在 Shopify 管理介面中 新增購買按鈕銷售管道 後，您可以為 商品 或 商品系列 建立購買按鈕。

建立購買按鈕後，請複製自動產生的程式碼，然後將其加入您要顯示該按鈕的網頁或網誌文章。例如，您可能會想把購買按鈕加到您的 Wordpress 網誌或 Squarespace 網站。

購買按鈕一旦嵌入您的網站後，其外觀就無法變更。若您要修改，必須在該管道中建立新的按鈕，並以新程式碼取代原始程式碼。

本頁內容

自訂購買按鈕

您可以自訂購買按鈕的外觀與行為方式：

  • 顏色
  • 尺寸
  • 字型
  • 按下按鈕時要執行的動作
  • 是否在新視窗開啟結帳頁面

在自訂按鈕時，您可以預覽變更。您也可按一下預覽，測試購買按鈕的行為。

版面配置樣式

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

以下說明購買按鈕可用的「基本」、「經典」與「完整檢視」版面配置。
基本選擇此版面配置可加入不含產品圖片的購買按鈕。若您已在其他線上位置展示商品，只想加上購買按鈕以便下單，這種做法會很實用。
經典選擇此版面配置可在購買按鈕旁顯示產品圖片與價格。此版面適合快速預覽商品，例如用於網誌文章。
完整檢視選擇此版面配置可在購買按鈕旁顯示產品圖片、價格與說明。此版面仿照您網路商店的商品詳情頁。

購買按鈕動作

建立購買按鈕時，您可以選取顧客按一下按鈕後要執行的動作。

若購買按鈕是針對某個商品系列，則此動作會套用到該系列內的每一項商品。

  • 加入購物車 會將商品加入購物車。顧客可以繼續購物，並將其他商品加入購物車。
  • 直接前往結帳頁面 會將顧客直接帶到您的結帳頁面，在那裡完成購買。顧客無法再將其他商品加入訂單。
  • 開啟商品詳情 會顯示 檢視商品 按鈕。顧客按一下按鈕後，可以查看商品說明、選取任何可用的產品子類選項，並將商品加入購物車。若商品有多張產品圖片，也會一併顯示。
    • 如果您選擇 完整檢視 版面配置，則無法使用這個選項，因為 完整檢視 已經顯示所有商品詳情。

您也可以選擇讓結帳頁面在新的瀏覽器視窗開啟，或在與您的網站相同的分頁開啟。預設行為是結帳頁面會在新視窗開啟。

購買按鈕外觀

  • 按鈕樣式 包含按鈕本體的形狀、顏色與字型。
  • 版面配置 視您選擇的版面配置樣式而定，您可以自訂按鈕對齊、圖片尺寸、按鈕文字、字型、顏色與大小等設定。
  • 購物車 包含嵌入式購物車的文字與顏色選項。您也可以啟用並自訂 訂單備註 欄位的標籤。您可以使用訂單備註蒐集顧客對備貨與配送的特殊指示。 其他資訊 欄位可用來向顧客傳達訊息。
    • 只有在按鈕的 action 設為 加入購物車 或 開啟商品詳情 時，才能編輯購物車的設定。
  • 詳細快顯視窗 包含產品詳情快顯視窗的設定。您可以自訂按鈕文字、是否包含數量欄位、背景與標籤的顏色，以及標籤的字型與字型大小。只有在按鈕的 action 設為 開啟商品詳情 時，才能編輯這些設定。

為單一商品建立購買按鈕

您可以為單一商品建立購買按鈕。購買按鈕可以包含該商品的一個或全部子類。建立購買按鈕時，您會選擇版面配置樣式，並自訂按鈕的顏色、文字與外觀，以及顧客按一下按鈕後要執行的動作。瞭解詳情：customizing Buy Buttons。

在為商品建立購買按鈕之前，您必須已在 added the product in your Shopify Admin，並將其 made it available 至購買按鈕銷售管道。

步驟：

電腦版

  1. 在您的 Shopify 管理介面中，前往 銷售管道 > 購買按鈕。

  2. 按一下 建立購買按鈕。

  3. 按一下 商品購買按鈕。

  4. 從商品目錄選取商品，或使用搜尋找出商品。按一下 選取。

  5. 選用：自訂購買按鈕。

    1. 如果商品有子類，請選取 所有子類，或選取您要包含的子類。
    2. 選擇 layout style，以及顧客按一下按鈕後要執行的 action。您也可以 customize the button's appearance。
    3. 預設情況下，結帳頁面會在新視窗開啟；您也可以選擇在與網站相同的瀏覽器分頁開啟。按一下 進階設定 > 在相同分頁重新導向。

  6. 按一下 下一步。

  7. 按一下 複製程式碼。

  8. 開啟要顯示購買按鈕之網頁的 HTML 編輯器。請參閱 Adding Buy Button code to HTML。

  9. 將程式碼貼到要放置購買按鈕的 HTML 中，然後儲存變更。

行動版

  1. 在 Shopify app 中，點選 Menu 圖示。

  2. 在 銷售管道 區段中，點選 購買按鈕。

  3. 點選 建立購買按鈕。

  4. 點選 商品購買按鈕。

  5. 從商品目錄選取商品，或使用搜尋找出商品，然後點選 選取。

  6. 選用：點選 自訂。

    1. 如果商品有多個子類，請選取 所有子類，或從下拉式清單選取其中一個子類。
    2. 選擇 layout style，以及顧客按一下按鈕後要執行的 action。您也可以 customize the button's appearance。
    3. 預設情況下，結帳頁面會在新視窗開啟；您也可以選擇在與網站相同的瀏覽器分頁開啟。點選 進階設定 > 在相同分頁重新導向。

  7. 點選 完成。

  8. 點選 複製程式碼。

  9. 開啟要顯示購買按鈕之網頁的 HTML 編輯器。請參閱 Adding Buy Button code to HTML。

  10. 將程式碼貼到要放置購買按鈕的 HTML 中，然後儲存變更。

為商品系列建立購買按鈕

當您為商品系列建立購買按鈕時，實際上會為該系列中的每個商品建立一個按鈕。

建立購買按鈕時，您會選擇版面配置樣式，並自訂按鈕的顏色、文字與外觀，以及顧客按一下按鈕後要執行的動作。瞭解詳情：customizing Buy Buttons。

在為商品系列建立購買按鈕之前，您必須已完成：

步驟：

電腦版

  1. 在您的 Shopify 管理介面中，前往 銷售管道 > 購買按鈕。

  2. 按一下 建立購買按鈕。

  3. 按一下 Collection Buy Button。

  4. 選取商品系列，或使用搜尋功能尋找商品系列。按一下 Select。

  5. 選用：自訂購買按鈕。

    1. 選擇當顧客按下按鈕時要執行的 action。您也可以 customize the button's appearance。
    2. 預設情況下，結帳頁面會在新視窗開啟；您也可以選擇在與網站相同的瀏覽器分頁開啟。按一下 進階設定 > 在相同分頁重新導向。

  6. 按一下 下一步。

  7. 按一下 複製程式碼。

  8. 開啟要顯示購買按鈕之網頁的 HTML 編輯器。請參閱 Adding Buy Button code to HTML。

  9. 將程式碼貼到要放置購買按鈕的 HTML 中，然後儲存變更。

行動版

  1. 在 Shopify app 中，點選 Menu 圖示。

  2. 在 銷售管道 區段中，點選 購買按鈕。

  3. 點選 建立購買按鈕。

  4. 點選 Collection Buy Button。

  5. 選取商品系列，或使用搜尋功能尋找商品系列，然後點選 Select。

  6. 選用：點選 自訂。

    1. 選擇當顧客按下按鈕時要執行的 action。您也可以 customize the button's appearance。
    2. 預設情況下，結帳頁面會在新視窗開啟；您也可以選擇在與網站相同的瀏覽器分頁開啟。點選 進階設定 > 在相同分頁重新導向。

  7. 點選 完成。

  8. 點選 複製程式碼。

  9. 開啟要顯示購買按鈕之網頁的 HTML 編輯器。請參閱 Adding Buy Button code to HTML。

  10. 將程式碼貼到要放置購買按鈕的 HTML 中，然後儲存變更。