商品清單

在選單中以單一卡片、格狀、清單或輪播方式顯示商品。

參考資料所有方案 1 分鐘閱讀

直接在大型選單中顯示含圖片、廠商、名稱與價格的商品卡片。使用 Single product（單一商品，所有方案皆可使用）來重點介紹一項熱銷商品，或使用格狀、清單或輪播（Growth Navigation、Pro Navigation）來展示新品、熱銷商品或整個商品系列。

新增區塊

選擇版面

在預覽的大型選單面板中，點擊 Add block（新增區塊）。點擊 Add product（新增商品），將游標移到某個版面上，然後點擊 Select（選擇）。

(1) 點擊 Add product，(2) 選擇版面。
選擇商品

若使用 Single product，請在 Add product 下點擊 Select products（選擇商品）並挑選一項商品。若使用其他版面，請選擇 Source（來源）；選擇 Collection（商品系列）時請挑選一個商品系列，選擇 Manual（手動）時請挑選商品。

預覽中的商品清單區塊，設定顯示在 Edit Item 中。
儲存並發佈

調整下列設定，然後點擊 Save（儲存）和 Publish（發佈）。

Add product 分頁最前面是 Lookbook hotspots（Lookbook 熱點，請參閱 Lookbook 熱點），接著是下列版面：

Width（寬度）預設: 25%: 區塊佔大型選單一列的比例：Auto（自動）或 8.33% 到 100%。
Layout（版面）預設: 您選擇的版面: Image above（圖片在上）或 Image left（圖片在左）。
Add product（新增商品）預設: None: 要顯示的商品。
Visibility（顯示設定）預設: Off: Hide on desktop（在桌面裝置隱藏）、Hide on mobile（在行動裝置隱藏）、Hide when logged in（登入時隱藏）、Only show when logged in（僅在登入時顯示）、Schedule publishing（排程發佈）。請參閱每個區塊都有的設定。

Title / Link（標題 / 連結）預設: New products: 商品上方的標題，以及它連結的位置，例如整個商品系列。
Width（寬度）預設: 格狀 75% · 清單、輪播 25%: 區塊佔大型選單一列的比例。
List view（清單檢視）預設: 您選擇的版面: Carousel（輪播）、List（清單）或 Grid（格狀）。
Number of products（商品數量）預設: 格狀 6 · 清單、輪播 4: 要顯示幾項商品。
Item(s) per row（每列項目數）預設: 格狀 3 · 輪播 1: 僅限 Grid 與 Carousel：每列 1、2、3、4 或 6 項商品。
Item view（項目檢視）預設: 您選擇的版面: 僅限 Grid 與 Carousel：Image above 或 Image left。
Image ratio（圖片比例）預設: Auto: Auto、1:1、4:3、3:4、16:9 或 9:16。讓所有商品圖片的形狀一致。
Source（來源）預設: Newest products: Newest products（最新商品，最近新增的商品）、Best selling（熱銷商品）、Collection（您挑選的一個商品系列中的商品）或 Manual（只顯示您挑選的商品）。
Visibility（顯示設定）預設: Off: 選項與 Single product 相同。

每項商品都會顯示圖片、廠商、名稱與價格。有多個子類的商品會在最低價格前顯示 From，比較價格會以刪除線顯示並附上 Sale 標籤，無法購買的商品則顯示 Sold out。

若要在選單中每項商品下方加上 Add to cart（加入購物車）按鈕，請開啟 Settings（設定）> Advanced（進階）> Show add to cart button（顯示加入購物車按鈕）。
輪播的自動播放與循環設定位於 Settings > Carousel（輪播）。
商品資料會自動更新，以 Collection 為來源時一律會顯示該商品系列目前的商品。若您刪除了商品或商品系列，或變更了它的handle（網址），請重新挑選。

這個頁面有幫助嗎？