網店版面佈局 被一般人認為比較死板,不能靈活,因此認為必須花錢追求度身訂做的網店設計方案。10 年前這種說法可能是真的,今天這這種說法不是完全正確的事實。實際上今天標準網上商店版面佈局已經是非常靈活,可以實現許多以前需要設計師來實現的功能,通過設計人員可以實現的功能。網上商店平台是為了令設置商店步驟清楚,日常操作管理容易,才在版面佈局 Page Layout 上添加限制。其實網上商店版面佈局亦可靈活運用變化成不同的版面設計,情況就好似切積木的原理,一層層堆砌出來,您可以一層用一大舊積木或一層用三小舊積木堆砌起來。版面佈局當然具有一些限制,例如:每個元件塊是矩形的並且不能重疊。
網店版面佈局頁面都一樣,分為頁眉 Header、本體 Body、頁腳 Footer 三部份,在 Body 的部份可利用側邊欄 Sidebar 製作出豐富的版面元素。
有一些要求甚高的網店模板設計師,並不滿足於網上商店的默認佈局設計,將板面佈局劃分得更細緻,例如設定幻燈片區域,推廣橫額區域,細分頁腳等等。您可以簡單地將元素拖放 Drag and Drop 到該區域。
一般來說網店的版面佈局預定義分為主要三種佈局:主頁 Homepage 版面佈局、分類頁 Category Page 版面佈局、產品頁 Product Page 版面佈局。其他不經常修改的版面佈局包括:帳戶頁 Account Page 版面佈局,信息頁 Information Page 版面佈局,Affiliate Page 版面佈局等等。您可應用左側邊欄或右側邊欄添加產品模組 Module、廣告橫額 Banner 等元素於以上佈局位置。所以分開不同版面佈局是為了簡化配置步驟。例如分類頁面必需在本體列出這個分類以下的所有商品,這工作自然交給模板處理,而店主可以配置側欄內容或其他內容放在本體的上面或下面。
自定義版面佈局
有些時候是需要自定義版面佈局。例如:網店同時銷售化妝品和平價衣服。假設一般用戶瀏覽化妝品時喜歡按品牌,而瀏覽平價衣服時按顏色。化妝品分類版面佈局側欄就應該顯示品牌方便用戶篩選,而平價衣服就應該顯示顏色尺碼篩選,這就有二種不同的側欄設定而需要自定義版面佈局。所謂的自定義版面佈局是:
- 您可以從基本佈局複製定義新的佈局。例如使用上面的例子:您決定使用標準產品佈局頁面顯示衣服。您從標準產品佈局 product 中衍生出另一頁面,稱為 product-cosmetics,用於展示化妝品。
- 那麼您可以使用標準程序在 product-cosmetics 添加側邊欄,然後在側邊欄中添加品牌模塊,Best Seller 模塊, Newest 模塊等等。
- 佈局 product-cosmetics 完成。您現在可以選擇適用於此佈局的單個產品,並將個個產品佈局設置從 product 更改為 product-cosmetics.
- 自定義版面佈局不包括頁眉和頁腳。
網店版面佈局 – 設定不同分類佈局顯示不同幻燈片
通常廣告幻燈片 (Slider) 只能定義在某些類型的佈局,例如:主頁版面佈局,但您可透過使用版面佈局設置個別廣告幻燈片顯示於某分類或某產品頁面。但不停賣廣告可能令訪客覺得煩厭兼且下載速度較慢,所以一般只會在主頁使用。
後台管理員操作流程:
1. 定義您想設置這幻燈片於哪一指定頁出現,如:”Collection 2012″ 分類頁面。
2. 建立 “Collection 2012” 分類頁面所會顯示的幻燈片圖片集。
3. 建立特定版面布局路徑。
添加一個新佈局,然後選擇默認路徑。默認路徑指它會使用哪個默認佈局。如您想加在某分類頁面中路徑請設定為 “product/category”,如您想加在某產品頁面中路徑請設定為 “product/product”。
4. 進入您想設置這幻燈片於哪一指定頁內 (可以是分類頁面或產品頁面),然後將佈局覆蓋選為第 3 步驟所設定的名稱 “Category – Collection 2012″。
5. 最後進入幻燈片設定頁面,新增功能欄定義顯示哪個幻燈片圖片集及設定佈局路徑。
上述例子使用 Opencart 中文網上商店系統作示範。不同的網上商店系統有不同的具體操作程序。網店版面佈局通常用於在使用多店功能 Multi-store 時為不同商店定義不同的佈局。
參考更多不同的網上商店設計。