圖標目錄元件|Shopper App

4. EC + SC.png

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

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

 

步驟一

前往商店後台 >「App 管理 > App 設計 > 目前版型 > Simple 版型」點按「設定」並開始編輯圖標目錄元件。

Screenshot

 

步驟二

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

  • 按住左側元件區的 _.png 圖標可上下拖曳物件的位置,按住 openeye.pngbin.png 圖標以隱藏或刪除元件。
  • 點擊中間預覽區的 up.png 與 down.png 調整物件位置;按住 bin.png 圖標以刪除元件。

ZH2.png

*注意:若您尚未設定圖標目錄元件,將預設顯示「我的訂單」與「客服中心」;圖標目錄僅支援新增 1 個。

 

步驟三

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


1. 展示標題按鈕

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

titleZH.png

 

2. 行數設定

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

column_ZH.png

 

3. 圖標尺寸設定

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

Screenshot

 

4. 預約上架時間

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

Screenshot

 

步驟四

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

Screenshot

 

步驟五

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

ZH8.png

 

1. 預設類別

i. 選擇圖標內容

點擊「選擇圖標內容」下拉式選單,選擇需新增的圖標內容。您可選擇顯示「門市資訊、門市推薦、門市取貨、追蹤清單」等類別的圖標內容。

Screenshot

 

*注意:
反灰的圖標內容即無法新增。若圖標內容標註「已新增」說明該內容已加到目錄,無法重複新增;若標註為「未設定」則說明該功能尚未開啟,需前往相對應之頁面開啟功能後才可新增至目錄。以下為各圖標內容開啟的方法:

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

 

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

ZH10.png

 

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

ZH11.png

 

2. 選擇「自訂類別」

i. 填寫圖標標題

ii. 勾選跳轉連結

  • 商品分類

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

    Screenshot

  • 優惠活動

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

    Screenshot

  • 自訂 URL

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

    Screenshot

iii. 新增圖標圖片

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

 

步驟六

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

Screenshot

 

 

 

 

 

還有其他問題?提交請求

評論