Akohub | 為什麼在 Shopify 按下「立即購買」按鈕,就看不到超商地圖介面? article
Akohub Logo

為什麼在 Shopify 按下「立即購買」按鈕,就看不到超商地圖介面?

May 20, 2022

*最後更新時間:2024-03-08
*本文適用流程:地圖選店型

當您使用地圖選店型版本的超商介面,超商地圖會嵌入在商店的「購物車頁(/cart)」。而產品頁,或導覽匣購物車所提供的「立即購買」按鈕,用途是加速購物流程,因此當顧客點下「立即購買」後,會略過購物車頁,直接被傳送至結帳付款程序。

以下列出 4 種可能出現立即購買按鈕的位置,並提供相應的按鈕關閉方式。
請根據您的佈景主題進行編輯,確保顧客們都能順利選擇到超商門市:

1. 關閉產品頁的立即購買按鈕

  1. 從 Shopify 管理介面 > 網路商店 > 佈景主題 > 對著需要編輯的佈景主題按下「自訂」

  2. 在主題導覽列的選單 > 選擇「產品」> 點擊「預設產品」或其他需要編輯的產品範本


  3. 在「產品資訊」區段 > 點擊「購買按鈕」


  4. 取消勾選「顯示動態結帳按鈕」


  5. 確認更改後,點擊右上角「儲存」以完成操作。

 

2. 將購物車類型,切換為頁面式購物車

  1. 如果您在加入商品後,購物車是從網站側邊滑出,或是從網站中央彈出,通常這類型的購物車所支援的結帳按鈕,都會將顧客直接傳送至結帳程序。

  2. 前往佈景主題 > 自訂 > 佈景主題設定 > 將「購物車類型」勾選為「頁面」並儲存,就完成購物車類型切換了!
    ※ 如果無此選項,請參考您的佈景主題說明文件,或是聯繫主題開發商協助。

3. 隱藏迷你購物車的結帳按鈕

*在此以 Shopify 免費主題 Dawn 為例,其他佈景主題的按鈕編輯方式請聯繫您的主題開發商


  1. 前往佈景主題,點擊「⋯」> 選擇「編輯程式碼」

  2. 在搜尋列中輸入 "cart",以 Dawn 主題為例,找到結帳按鈕所在的檔案 "cart-notification.liquid"

  3. 用 <!-- --> 將紅匡處的 <form> 標籤前後包裹住,並點擊右上角的「儲存」按鈕。
    ※ Mac 使用者可使用快捷鍵「Command ⌘ + /」
    ※ Windows 使用者可使用快捷鍵「Ctrl + /」



  4. 接著重新整理您的網頁,就會看到迷你購物車的結帳按鈕已經隱藏起來囉:

 

4. 將導覽匣購物車的結帳按鈕,改成導連至購物車頁(/cart)

*在此以 Shopify 免費主題 Publisher 為例,其他佈景主題的按鈕編輯方式請聯繫您的主題開發商

  1. 前往佈景主題,點擊「⋯」> 選擇「編輯程式碼」

  2. 在搜尋列輸入 "cart",以 Publisher 主題為例,此結帳按鈕位於「程式碼片段」的 "cart-drawer.liquid"


  3. 輸入快捷鍵 Command+F 或是 Ctrl+F 搜尋 "checkout",然後找到包含 name="checkout" 的一組 <button> 標籤


  4. 分別刪除「type="submit"」和「name="checkout"」

  5. 接著使用 <a> 標籤:<a href="/cart" style="width:100%"> ..... </a>,將其包裹在 <button> 標籤之前和之後:

    【選用】如果想要更改導覽列結帳按鈕的文字,以 Publisher 為例,刪除「{{ 'sections.cart.checkout' | t }}」,並替換為您想要顯示的按鈕文字,例如將第 524 行修改為「檢視購物車」。

  6. 最後,點擊點擊右上角的「儲存」按鈕以套用變更,這樣就能讓導覽匣的結帳按鈕,改成導向至購物車頁囉!

 

以上教學為常見改法,實際編輯方式請以您的佈景主題開發商為準哦!