頁面功能-商品列表頁 · 要講武德，magento

# 商品列表頁配置 ***** ## 1，產品屬性過濾 (Product Filtering)， Layered Nav widget 系統自帶Layered Nav ： ![](https://img.kancloud.cn/98/7d/987d5efa56fcfe0d3ee7881d3b223ffd_1279x929.png) ![](https://img.kancloud.cn/fa/93/fa936a687e0f86748fe4370d856f6a76_1638x800.png) ***** 使用插件 UB Mega Menu Extension for Magento2 是不錯的選項： ![](https://img.kancloud.cn/00/39/0039a56311f453ea4a1714d8a2ce1fa6_1095x770.png) [UB Mega Menu | UberTheme | UberTheme](https://www.ubertheme.com/magento-extensions-2-x/ub-mega-menu/) ***** ***** ## 2，列表促銷/優惠圖標 (Promotion Icon) 插件方式： [Magento 2 Product Labels extension - Add & Customize Label – Mageplaza](https://www.mageplaza.com/magento-2-product-labels/) 自己寫代碼完成：參考freego模板Soldout插件：![](https://img.kancloud.cn/b6/c4/b6c4ea2540f9fe10143cfb9713579d10_886x33.png) ![](https://img.kancloud.cn/9e/17/9e17424eada48bb29a94bd5f8f55f5ba_1017x634.png) ***** ## 4，改變列表頁數后臺可配置 ![](https://img.kancloud.cn/84/f9/84f997cb6e37d554c95c5493c693f4f4_948x315.png) ***** ***** ***** ## 5，自定義排序 ![](https://img.kancloud.cn/41/e6/41e6a5b3b7fb2a5b5577f0a550160963_839x614.png) [Advanced Sorting Magento 2 Extension by Sparsh Technologies (sparsh-technologies.com)](https://www.sparsh-technologies.com/magento-extensions/magento-2-advanced-sorting-extension) ***** ## 6，展示品類圖片參考：http://www.hmoore.net/zouhongzhao/magento2-in-action/647792 ![](https://img.kancloud.cn/33/97/3397a997bb9ec4cdf7171f4630492f3f_1161x187.png) ![](https://img.kancloud.cn/a8/0c/a80c5df3a8a7c1b4200a9295e749881a_594x297.png) 基本上都是基于 Block + Html 的方式。 *****