精選分類元件|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

 

步驟二

點擊「新增元件」,選擇「精選分類」元件,拖曳至中間預覽區提示可以放置元件的地方。

Screenshot 2025-08-25 at 4.35.11 PM.png
Screenshot 2025-08-25 at 4.32.47 PM copy.png

 

步驟三

於右側編輯區進行以下設定。

1. 分類圖顯示

  • 圓形圖

    Screenshot 2025-08-26 at 3.52.48 PM.png
  • 方形圖

    Screenshot 2025-08-26 at 3.52.34 PM.png

 

2. 分類圖尺寸

  • Screenshot 2025-08-26 at 3.52.48 PM.png
  • Screenshot 2025-08-26 at 3.53.06 PM.png
  • Screenshot 2025-08-26 at 3.53.22 PM.png

 

3. 每行顯示分類數

您可以設定 2 至 8 個分類。

Screenshot 2025-08-26 at 4.20.58 PM.png

 

4. 標題

輸入精選分類標題,最多 100 個字元。

Screenshot 2025-08-26 at 4.13.40 PM.png

 

5. 顯示按鈕

預設開啟,您可以修改按鈕顯示文字,最少輸入一種語言,且每種語言最多輸入 20 個字元。

Screenshot 2025-08-26 at 4.15.29 PM.png

 

6. 文字對齊

設定該元件標題對齊方式。

Screenshot 2025-09-23 at 11.29.39 AM.png

 

7. 預約上架時間

若您有設定上架日期,元件將在指定時間於 App 中顯示。

Screenshot 2024-10-24 at 12.06.30 PM.png

 

二、選擇商品分類

步驟一

於左側區塊新增商品分類,最多新增 24 個分類;您也可以在此處開啟/關閉/刪除精選分類元件。

Screenshot 2025-08-26 at 4.32.20 PM.png

 

步驟二

於右側編輯區塊,點選「選擇商品分類」。

Screenshot 2025-08-26 at 4.35.29 PM.png

 

步驟三

選擇商品分類後,您可以點選「新增圖片」自訂該分類顯示的圖片。

*注意:若您未自訂圖片,系統將自動使用該分類下的商品圖片作為分類圖片。

Screenshot 2025-08-26 at 4.36.47 PM.png
Screenshot 2025-08-26 at 4.43.40 PM.png

 

三、App 端顯示效果

若每行分類數量超出螢幕可顯示的數量,支援以左右滑動的方式查看。

*注意:按鈕將套用您於「主題設定 > 色彩 > 按鈕」所設定的顏色。

GIF-vertical.gif

 

 

 

 

 

 

還有其他問題?提交請求

評論