圖標目錄元件|Shopper App

4. EC + SC.png

12. 品牌會員購物 App (1).png

圖標目錄元件支援設定預設類別和自訂類別的入口,您可自行選擇在 App 顯示的具體內容。元件支援隱藏或刪除功能。

⚠️ 開始前請注意:此功能於香港地區僅支援 Shopper App Pro 版本。

 

本篇文章將分別介紹:

 

一、設定圖標目錄元件

步驟一

前往 SHOPLINE 後台 >「Shopper App 管理 > App 設計 > 首頁設計 > 目前版型」,點選「設定」進入 App 頁面編輯器。

Screenshot 2025-08-20 at 3.04.37 PM.png

 

或前往「Shopper App 管理 > App 設計 > 會員中心」,點選「設定」進入會員中心頁面編輯器。

Screenshot 2025-11-04 at 11.32.23 AM.png

 

步驟二

點選左側「圖標目錄」進行編輯,或者是點擊中間預覽區元件內容進行編輯。如左側元件庫圖標目錄元件被刪除,可點擊「新增元件」進行新增。

  • 拖曳左側元件區的 _.png 圖標可調整元件的位置,點選 openeye.pngbin.png 隱藏或刪除元件。
  • 點擊中間預覽區的 up.pngdown.png調整元件位置,點選 bin.png 刪除元件。

*注意:支援設定多個圖標目錄。

Screenshot 2026-01-23 at 4.14.44 PM.png

 

步驟三

在右側編輯區進行元件展示相關設定。


1. 展示標題按鈕

  • 預設展示標題開關為關閉
  • 當打開開關,預設標題為「常用服務」,可自訂標題名稱

titleZH.png

 

2. 行數設定

  • 您可選擇顯示設置的列數,例如:當您設定了 8 個入口,支援顯示 4 行,則 App 會顯示兩列。
  • 您可藉由移動滑桿控制行數。

column_ZH.png

 

3. 圖標尺寸設定

您可設定圖標顯示尺寸,共「小」、「中」、「大」三種可選擇。

Screenshot

 

4. 預約上架時間

此為選填項目。點擊欄位右側的「日曆」圖標可選擇起迄日期。

Screenshot

 

二、設定圖標目錄內容

步驟一

點擊左側元件庫區域的「新增圖標」進行新增。圖標最多可以新增至 10 個

Screenshot 2026-01-23 at 4.18.10 PM.png

 

步驟二

在右側編輯區設定新增的圖標內容,可根據需要選擇「預設類別」「自訂類別」

ZH8.png

 

1. 預設類別

A. 選擇圖標內容

點擊「選擇圖標內容」下拉式選單,選擇需新增的圖標內容,支援圖標包含:領券中心、門市取貨、門市推薦、門市資訊、我的地址、客服中心、客服留言、我的訂單、追蹤清單、瀏覽紀錄。

*注意:若已設定圖標,但 App 介面未顯示,代表該項權益功能未開啟;如需開啟,請前往後台進行設定,設定完成後,App 端圖標目錄元件將立即生效。

  • 追蹤清單:前往「擴充功能 > 擴充功能商店」安裝功能。
  • 門市資訊:如您在全通路管理平台(ONE)已維護門市資訊,或在「Shopper App 管理 > App 設定 > 門市資訊設定」裡存在一則以上的門市資訊記錄,即可新增門市資訊。
  • 門市推薦:前往「Shopper App 管理 > App 設定 > 門市推薦設定」開啟功能。
  • 門市取貨:如您擁有零售 POS 方案並已安裝「線上買門市取」功能,即可新增門市取貨。
Screenshot 2026-01-26 at 3.15.53 PM.png

 

B. 選擇內容後,圖標內容預設選擇「預設圖標圖片」。

ZH10.png

 

也可以根據品牌視覺風格選擇「自訂圖標圖片」並新增圖片進行更改。

Screenshot 2026-01-23 at 4.33.51 PM.png

 

2. 自訂類別

A. 填寫圖標標題

預設類別

 

B. 勾選跳轉連結

  • 指定分類

    勾選「指定分類」者,點擊「⊕ 選擇商品分類」後,在彈跳視窗裡選擇活動,最後點擊「確認」。更多關於商品列表元件設定細節與注意事項,請參考此篇文章

    Screenshot 2026-01-23 at 4.36.09 PM.png

     

  • 優惠活動

    勾選「活動優惠」者,點擊「⊕ 選擇優惠活動」後,在彈跳視窗裡選擇活動,最後點擊「確認」。 更多關於優惠活動元件設定細節與注意事項,請參考此篇文章

    Screenshot 2026-01-23 at 4.37.01 PM.png

     

  • 自訂 URL

    勾選「自訂 URL」者,請於欄位內輸入連結。注意輸入之連結必須以「https://」或「http://」開頭。

    Screenshot 2026-01-23 at 4.37.38 PM.png

C. 新增圖標圖片

點選「新增圖片」進行上傳。

 *注意:「我的訂單」、「客服中心」 圖標支援設定自訂類別。

Screenshot 2026-01-23 at 4.39.28 PM.png

 

步驟三

完成設定後,可先點按「儲存」儲存元件變更;若已完成 App 首頁的所有編輯,可以點擊「更新並使用」發佈至 App。

Screenshot 2026-01-23 at 4.41.08 PM.png

 

 

 

 

還有其他問題?提交請求

評論