商品輪播列表元件|頁面編輯器(新版)

CN_EC%2BSC.png

您可以在編輯分頁時加入「商品輪播列表」元件,將商品以幻燈片輪播形式呈現,讓您擁有簡潔俐落的版面,也能讓顧客自由滑動瀏覽商品,增添互動感。

⚠️ 開始前請注意:

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


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

步驟一

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

Product_Slider_CN_1.png

 

步驟二

點按「元件」按鈕。

Product_Slider_CN_2.png

步驟三

點選「商品輪播列表」元件。

Product_Slider_CN_3.png

 

步驟四

點按「+新增商品類別」按鈕。

Product_Slider_CN_4-1.png

系統將跳出彈窗,您可以直接點選您想製作成輪播列表的商品類別,也可以搜尋類別名稱。選擇商品類別後,請點按「確認」。

Product_Slider_CN_4-2.png

 

步驟五

輸入商品輪播列表標題。

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

Product_Slider_CN_5-1.png

 

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

Screen_Shot_2022-06-30_at_2.45.47_PM.png

 

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

Product_Slider_CN_5-2.png

 

步驟六

編輯輪播列表相關設定。

A. 展示按鈕

若開啟「展示按鈕」開關,輪播列表下方會顯示「查看更多」按鈕。顧客點擊「查看更多」後可看進入商品類別頁面瀏覽商品。

Product_Slider_CN_6-1.png

B. 產品圖比例

可設定產品圖的比例

Product_Slider_CN_6-2.png

 

C. 商品欄數

您可分別設定電腦版商品欄數(最多 6 欄)以及手機版商品欄數(最多 3 欄)。

*備註:顧客左右滑動輪播列表可以完整瀏覽所有商品

Product_Slider_CN_6-3.png

D. 邊距

可調整圖片與頁面的邊距。

Product_Slider_CN_6-4.png

 

E. 切換樣式(瀏覽商品)

您可設定輪播列表左右滑動的方式,共有「按鈕」及「圓點」兩種可供選擇。

Product_Slider_CN_6-5.png

 

a. 按鈕

顧客可點按左右箭頭切換商品。

Product_Slider_CN_6-6.png

b. 圓點

顧客可點按列表下方的圓點切換商品。

Product_Slider_CN_6-7.png

步驟七

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

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

Product_Slider_CN_7.png

 

步驟八

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

Product_Slider_CN_8-1.png

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

Product_Slider_CN_8-2.png

 

步驟九

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

Product_Slider_CN_9.png

延伸閱讀

 

 

 

 

 

 

 

 

 

還有其他問題?提交請求

評論