商品列表元件|SHOP Builder

4. EC + SC.png

您可以在進階分頁中加入「商品列表」元件,在分頁展示出您的主打商品,馬上抓住消費者的目光。

⚠️ 開始前請注意:

  • SHOP Builder 目前僅支援 Ultra ChicKingsman、Varm、Philia 版型使用。
  • 使用 SHOP Builder 建立分頁後,若切換其他店面版型,該分頁仍然可以顯示,但無法編輯且可能發生跑版情形,在確認發佈分頁前請多加留意。

 

一、增加「商品列表」元件

步驟一

前往「商店後台 > 網店設計 > 網店分頁」點按「進階分頁/編輯」按鈕,開啟「進階分頁」設定頁面。pastedGraphic.png

 

步驟二

點按「元件」按鈕。pastedGraphic_1.png


步驟三

點選「商品列表」元件。pastedGraphic_2.png

 

步驟四

您可以點擊「+ 商品」自選商品製作成商品列表,或點擊「+商品分類」選擇既有商品列表。
pastedGraphic_3.png

 

1. 自訂商品列表

點擊「+商品」可選擇商品,自訂商品列表最多可選擇 25 項商品。選取完畢後點擊「下一步」。pastedGraphic_4.png

拖拉商品可以調整商品的顯示順序,調整完後點擊「確認」。pastedGraphic_5.png

 

點擊左側欄下方「儲存」可預覽效果。點擊鉛筆圖示可以回到商品選擇視窗,點擊鉛筆右側的垃圾桶圖示則可以清除所有選取商品。點擊上方紅色垃圾桶圖示可以刪除「+商品」組件並重新選擇「+ 商品」或「+商品分類」。

*注意:

  • 自訂商品列表沒有「查看更多」按鈕。
  • 手機版的排版固定為一行 2 個商品。

pastedGraphic_6.png


2. 既有商品分類

點按「+商品分類」可選擇商品分類,選取完畢後點按「確認」。pastedGraphic_7.png


點擊左側欄下方「儲存」可預覽效果。點擊鉛筆圖示可以回到商品分類選擇視窗,點擊鉛筆右側的垃圾桶圖示則可以清除已選擇的商品分類。點擊上方紅色垃圾桶圖示可以刪除「+商品分類」組件並重新選擇「+ 商品」或「+商品分類」。pastedGraphic_8.png

 

步驟五

輸入商品列表標題,並選擇標題大小。

*備註:您也可以在此處留白,頁面將不會顯示標題。
pastedGraphic_9.png

點按上方「語系」下拉選單,會顯示商店支援的所有語系,可以個別輸入在各語系介面所要顯示的商品列表標題。pastedGraphic_10.png

您還可以設定標題的文字對齊方式(置左/置中/置右)。
pastedGraphic_11.png

 

[即將推出] 步驟六

選擇是否展示「查看更多」按鈕。


A. 若您選擇加入「商品」

無論此開關是否開啟,系統將不會顯示「查看更多」按鈕,而是顯示全部商品。

B. 若您選擇加入「商品分類」

開啟此開關後,如果商品總數超過您設定的顯示數量,系統會展示「查看更多」按鈕供顧客點擊查看完整商品列表。關閉後,系統會隱藏按鈕,並依照您設定的顯示數量顯示商品。

*注意:Shopper App 目前尚未支援此開關。

 

步驟七

編輯圖片相關設定。

A. 產品圖比例

可設定商品圖片的比例。
pastedGraphic_12.png

B. 商品欄數&商品行數

設定商品列表的欄數(橫排)以及行數(直排)。

*注意:

  • 預設為 3 欄 2 行,欄數上限為 5,行數上限為 8。
  • 僅能調整電腦版的欄、行數。手機版排版則根據電腦版的圖片數量變動,固定為每一行 2 欄。(例如:電腦版為 3 欄 2 行,總共 6 個商品;手機版會顯示 2 欄 3 行,總共 6 個商品 )。
  • 商品出現的順序是根據後台商品類別的自訂順序。如需更改,請前往「商店後台 > 商品及分類 > 分類」,點按商品類別後調整商品順序。
  • 若您在步驟四選擇的是「自訂商品列表」,商品列表只會依照欄數排列,調整行數不會產生效果。

pastedGraphic_13.png

C. 邊距

可調整圖片與頁面的邊距。有關邊距的詳細說明,請參考此篇文章pastedGraphic_14.png

 

步驟八

選擇是否顯示隱藏商品。開啟後,顧客可在前台頁面看到隱藏商品。

*備註:已下架的隱藏商品不會顯示。若想了解如何設定隱藏商品,請參閱隱藏商品|商品
pastedGraphic_15.png

 

步驟九

在設定過程中可點按下方「儲存」按鈕,於右側預覽畫面查看新增的商品列表元件。Product_List_CN_8-1.png

或是點按右上方「預覽商店」,查看完整的前台預覽畫面。Product_List_CN_8-2.png

 

步驟十

確認完成上述設定後,請點按右上角「發佈」按鈕,顧客即可在商店前台查看此分頁所有新增的內容。Product_List_CN_9.png

 

延伸閱讀

 

 

 

 

 



 

 

 

 

 

還有其他問題?提交請求

評論