Part 9
① 左側篩選：顏色／尺寸（來自屬性「電子商務篩選器＝可見」）＋價錢範圍 ② 商品卡片（圖＋名＋價） ③ 排序（精選／價格／新品…） ④ 卡片／清單檢視切換。
① 卡片左上角的「特價」緞帶（琥珀橘） ② 整張卡片；同一面板還能調卡片大小（讓主打商品占更大格）。
商店目錄頁 /shop 的呈現
顧客通常先逛「商店目錄」（/shop）再點進商品。這一章教你調目錄頁的排版與商品卡片：每頁幾件、幾欄、怎麼排序、篩選有哪些，以及替商品掛促銷緞帶（絲帶）、調卡片大小，讓熱賣品更醒目。
路徑：
/shop › 右上 編輯（頁面設定）／點卡片（單品緞帶）A. 目錄頁長什麼樣
💡 篩選哪來的左側「顏色／尺寸」篩選自動來自你在 Part 8 設「電子商務篩選器＝可見」的屬性。想讓某屬性能被篩選，就把它設為可見。
B. 逐步操作
1
調目錄排版：每頁數、欄數、間距、排序
在 /shop 按右上「編輯」，點頁面空白處，右側「自訂」面板可調整目錄整體排版：
| 設定 | 作用 | 建議 |
|---|---|---|
| 每頁商品數 | 一頁顯示幾件（超過分頁） | 16～24，兼顧載入與瀏覽 |
| 欄數 | 一排幾張卡片 | 桌機 4 欄；手機自動變 1–2 欄 |
| 間距（Gap） | 卡片之間的間隙 | 16px 起，視覺不擁擠 |
| 預設排序 | 精選／價格低→高／最新… | 促銷檔期用「精選」手動置頂 |
2
替商品加「促銷緞帶」（絲帶）
在 /shop 編輯模式下點某張商品卡片，右側面板可設「絲帶（Ribbon）」——卡片角落的斜標籤（特價／新品／熱賣）。可選現成的或新建（設文字、底色、位置）：
| 卡片設定 | 作用 |
|---|---|
| 絲帶（Ribbon） | 角落斜標籤；設文字、底色、文字色、左/右位置 |
| 卡片大小 | 讓主打商品在網格中占 2×1 或 2×2，更吸睛 |
| 背景色 / 順序 | 調卡片底色、拖曳調前後（置頂主推） |
💡 緞帶集中管理所有絲帶可在電子商務 › 產品絲帶統一維護（改一次，套用到所有掛該絲帶的商品）。
⚠️ 注意事項
- 目錄排版（每頁數、欄數、間距、排序）是全站設定；卡片緞帶與大小是單一商品。
- 緞帶文字宜短（如「特價」「新品」），太長會被截斷（上限約 20 字元）。
- 把太多商品放大卡片會破壞網格對齊，只放大主打幾件即可。
- 左側沒有出現顏色/尺寸篩選？回 Part 8 確認該屬性「電子商務篩選器＝可見」。
如何查到
目錄排版：
/shop › 編輯 › 點空白 › 自訂（每頁數/欄數/間距/排序）。單品緞帶與大小：/shop › 編輯 › 點卡片。絲帶維護：電子商務 › 產品絲帶。
評分
暫時沒有留言。
成為第一個留言的人。