若您想在頁面中呈現部分商品，例如：在首頁放入新品推薦，可以成功的吸引您的顧客將商品直接加入購物車，讓我們來設定看看吧!

新增商品列表

Step1 : 點選商店設計-頁面設計，選擇需要設計的頁面後，點選左下方編輯

Step2 : 選擇元件「商品列表」，點擊拖拉至頁面中，在按右上方儲存即可 

 

 

 

編輯商品列表

設定商品列表顯示細節，共分為個設定步驟，讓我們一一開始進行設定吧！

(1) 商品項目

篩選該商品列表要顯示的商品，請先點擊左方選擇商品

 

商品選擇方式 分為「手動選擇」與「自動新增」兩個方式：

「手動選擇」: 手動勾選該列表要顯示的商品，如後續有新上架商品，需要再次進入編輯勾選要加入的商品，系統不會自動新增，此設定可調整商品順序 

可輸入商品名稱或標籤後，勾選要顯示的商品，並點擊右下方編輯已選商品

可設定商品排序：分為「最新商品」、 「商品名稱」 、「價格低至高」 、「價格高至低」 、「自訂排序」

如要自訂商品排序，可選擇「自訂排序」後，拖拉移動下方的商品順序，並按右下方「確認」

商品列表則會依您選好的商品及順序排列，確認無誤後再點擊右上方「 儲存 」

因您已有在此商品列表進行篩選，故系統僅會依您勾選的商品及排序呈現，後續如有新上架商品也要顯示在該列表的話，您需要再次編輯商品進行勾選與排序

 

「自動新增」:  根據自訂篩選的條件，符合的商品如後續上架，系統會自動更新，

您可以使用商品標籤，找到想要呈現於商品列表的商品，確認後按右下方「查看已選商品」

商品排序：預設以最新商品排序，另可選 「商品名稱」 、「價格低至高」 、「價格高至低」作為排序

確認排序後，請點擊右下方確認，即可查看到商品列表呈現商品標籤有髮類用品的 三項商品

 

如未來您再上架新品，新品的標籤也有相同的「髮類用品」 ，

後續系統即會自動新增到該商品列表喔！

 

 

（2）點擊商品

 控制商品列表在前台，消費者點擊後顯示的方式，分為 「前往商品內容頁 」、 「開啟商品彈窗 」兩種

前往商品內容頁：如下圖，於商品列表點擊加入購物車，畫面會進入商品內頁

開啟商品彈窗 ：下方會請您選擇彈窗顯示影像的方式，分為: 商品影像1、商品影像2、商品影像1+2及皆不顯示4種。

 

 

前台點選商品顯示方式-> 彈出視窗，顯示影像1主圖

前台點選商品顯示方式-> 彈出視窗，顯示影像2圖片

前台點選商品顯示方式-> 彈出視窗，顯示影像1主圖+2下方圖片

 

（3）列表風格

商品列表風格樣式有五種版型，可依您商店的排版風格與喜好做挑選（建議開啟加入購物車開關再做預覽選擇）

[樣式一]

[樣式二]

[樣式三]

[樣式四]

[樣式五]

 

（4）加入購物車按鈕開關

請確認是否需在商品列表顯示加入購物車的按鈕，建議開啟購物車按鈕，

如是形象官網或販售網路無法販售之商品如酒類商品，可關閉購物車按鈕

 

（5）加入購物車按鈕形式

分為「文字按紐」與「圖示按鈕」兩種供選擇

 

（6）商品一列顯示數量

設定商品一列顯示幾個商品，可依照您商品數量，設定一列顯示「 1、2、3、4、5、6 」 個商品，如設定一列顯示4個，就如下圖一樣顯示4樣商品 

設定一列顯示2個，就如下圖一樣顯示2樣商品  

 

 

（7）商品一頁顯示數量

設定商品一頁顯示幾個商品，設定數值，如商品超過該數值則會分到次頁

 

（8）商品寬度

可調整商品列表的寬度，分為「100 %」、「160px」、「240px」、「320px」、「400px」五種寬度尺寸選擇

 

（09）商品圖比例

分為「原始比例」、「 直式2:3」、「 橫式4:3」

 

（10）商品間距

設定商品之間的間距大小，分為「無 」、「小8px」、「中24px」、「大48px」 

 

（11）商品垂直對齊

挑整商品列表對齊方式：分為「置頂」、「置底」、「置中」、「基準線」四種

（12）商品水平對齊

調整商品列表於頁面顯示方式，分為置中、靠左、靠右、分散

 

（13）文字水平對齊

調整文字的位置，分為「靠左」、「 置中」、「 靠右」

（14）商品收藏

如有於設定> 顧客功能設定，開啟商品收藏功能

商品列表上有愛心的圖是喔

 

以上，設定完成後，您可於該頁面的前台試試看是否是您想要的列表樣式喔 ！