網站畫面顯示選項
回想一下在管理區建立好商品資料後所做的事:回到前台點選 J2Store 運作的選單項目,看到商店商品的陳列。接著點選商品名稱,來到商品的詳細畫面。在上述例子中與 J2Store 有關的是「依分類/依標籤陳列商品」以及「商品詳細」畫面,以下是這兩個畫面共通的顯示設定,以及個別畫面的設定。
「共通選項」分頁
「依分類/依標籤陳列商品」與「商品詳細」共同使用的顯示選項。
▲「依分類/依標籤陳列商品」與「商品詳細」共同使用的顯示選項畫面。
- 子佈景主題:選擇規劃 J2Store 顯示的子佈景主題。「預設(default)」項目支援 Bootstap 2(像是內建的 Protostar 佈景主題),「bootstrap3」支援 Bootstrap 3(大部分佈景主題)。你可以建立自己的子佈景主題自訂畫面呈現,詳細作法請參考後續文章。
- 文章順序:選擇商品排列的順序依據,選擇「使用全站設定」會使用內容元件的選項設定。
- 文章排序考慮類別排序:排列商品時是否先依所屬分類排序,讓同一分類商品靠在一起。
- 排序的日期:設定排序的日期依據商品的建立/修改/發佈時間。
- 「加入購物車」按鈕類別:輸入給「加入購物車」按鈕的 CSS 類別名稱,不清楚的話留白即可。
- 「選擇」選項按鈕類別:輸入給「選擇」按鈕的 CSS 類別名稱,不清楚的話留白即可。
- 顯示「數量」欄位:是否顯示數量欄位,讓顧客選擇購買量。
- 商品選項價格:是否顯示商品資料中的額外(加購)選項。
- 商品選項前綴:是否在額外(加購)選項的價格前面顯示前綴(+或-)符號。
- 為商品選項顯示圖片:是否顯示額外(加購)選項所代表的圖片。
- 在網頁路徑內顯示分類:是否在網頁路徑中顯示商品所屬的分類。
- 自訂 CSS 代碼:輸入自訂的 CSS 資料,不清楚的話留白即可。
▲「依分類/依標籤陳列商品」與「商品詳細」共同使用的顯示選項與前台畫面對照。
「分類列表內的項目檢視選項」分頁
選單項目運作類型「商品列表畫面」與「依標籤顯示商品」的顯示選項。
▲選單項目運作類型「商品列表畫面」與「依標籤顯示商品」的顯示選項畫面。
- 顯示的項目數:輸入畫面中顯示的商品數量。
- 欄:設定一列顯示多少商品。
- 子分類層級:設定顯示子分類商品的深度。
- 顯示商品:「全部」代表顯示分類內所有商品;「僅顯示精選」則只顯示分類中標示「精選(星號)」的商品項目。
- 顯示標題:是否顯示商品名稱。
- 標題連結至商品:商品名稱是否帶有超連結,點選後前往商品詳細畫面。
- 簡短敘述:是否顯示商品簡短(摘要)敘述。
- 長篇敘述:是否顯示商品長篇(完整)敘述,建議選擇「否」。
- 一般售價:顯示或隱藏商品的一般(基本)售價。
- 特別售價:顯示或隱藏商品的特別(進階)售價。
- 折扣百分比 (一般與特價間的差異) :顯示或隱藏一般售價與特別售價間的差價百分比。
- 圖片:是否顯示商品圖片。
- 圖片類型:選擇顯示商品圖片的類型:縮圖或是主要圖片(完整尺寸)。
- 圖片寬度:設定顯示圖片的寬度,以像素計。
- 圖片連結至商品:設定商品圖片是否加上超連結,點選後前往商品詳細畫面。
- SKU:顯示或隱藏 SKU 資料,建議隱藏。
- 庫存:顯示或隱藏商品庫存量。
- 加入購物車:設定「加入購物車」按鈕的顯示方式:連同商品選項一同顯示,或是顯示為「顯示細節」。
- 啟動快速檢視:是否在商品項目下顯示「快速檢視」按鈕,點選後在浮現視窗中快速檢閱商品。
▲「商品列表畫面」與「依標籤顯示商品」的顯示選項與畫面對照。
過濾
- 頂部條過濾器:在商品項目上方顯示或隱藏過濾工具列。
- 側邊欄過濾器:在商品項目旁邊顯示或隱藏過濾工具列。
- 側邊欄過濾器位置:設定側邊欄過濾工具的位置。
- 排序過濾:顯示或隱藏排序過濾下拉選單。
- 搜尋框:顯示或隱藏搜尋文字框。
- 分類過濾:顯示或隱藏分類過濾工具。
- 增加 開啟/關閉 切換至分類過濾:設定切換為分類過濾功能的開關。
- 顯示標籤:全部:側邊欄「分類過濾」工具是否顯示「全部」項目。
- 過濾顯示的分類:點選要使用過濾功能的商品分類。
- 價格過濾:顯示或隱藏價格過濾工具。
- 價格過濾上限:輸入價格過濾的最大值。
- 過濾時價格圓標:設定價格過濾條上的圓點,移動時增減的數值。
- 商品過濾:顯示或隱藏商品過濾功能。
- 商品過濾列表類型:設定商品過濾列表顯示的過濾項目:相關項目或全部。
- 過濾搜尋條件:設定過濾條件:或(有一個符合即可)/及(全部符合)。
- 增加 開啟/關閉 切換至商品過濾:設定切換為商品過濾功能的開關。
- 製造商 / 品牌過濾:顯示或隱藏製造商 / 品牌過濾。
- 製造商過濾列表類型:設定製造商過濾列表顯示的過濾項目:相關項目或全部。
- 供應商過濾:顯示或隱藏供應商過濾。
- 供應商過濾列表類型:設定供應商過濾列表顯示的過濾項目:相關項目或全部。
▲過濾功能設定項目與畫面對照。
「項目檢視」分頁
商品詳細資訊畫面的顯示選項。
▲商品詳細資訊畫面的顯示選項。
- 頁面標題:在畫面上方顯示或隱藏商品名稱。
- 顯示標題:在價格資訊上方顯示或隱藏商品名稱。
- 稱為標題標籤:商品名稱所使用的 HTML 標籤,建議選擇「H1」。
- 簡短敘述:顯示或隱藏商品簡短(摘要)敘述。
- 長篇敘述:顯示或隱藏商品長篇(完整)敘述。
- 一般售價:顯示或隱藏商品一般(基本)售價。
- 特別售價:顯示或隱藏商品特別(進階)售價。
- 折扣百分比 (一般與特價間的差異) :顯示或隱藏一般售價與特別售價間的差價百分比。
- SKU:顯示或隱藏 SKU 資料,建議隱藏。
- 庫存:顯示或隱藏商品庫存量。
- 主要圖片:是否顯示商品主要圖片。
- 額外圖片:是否顯示商品額外(附加)圖片(如果有)。
- 主圖片寬度:設定主要圖片縮圖寬度。
- 附加圖片寬度:設定附加圖片縮圖寬度。
- 增量銷售圖片寬度:設定增量銷售商品的圖片寬度。
- 跨類銷售圖片寬度:設定跨類銷售商品的圖片寬度。
- 啟動縮放特效:是否啟動圖片縮放效果。
- 品牌:是否顯示製造商名。
- 增量銷售:是否顯示增量銷售商品。
- 跨類銷售:是否顯示跨類銷售商品。
- 給相關商品的欄位數 (增量銷售及跨類銷售) :輸入增量銷售及跨類銷售商品的顯示數。
- 顯示規格:是否顯示商品規格。
- 顯示描述及規格:設定商品描述與規格資料的顯示方式:分頁或不分頁。
- 顯示至商品列表連結:是否顯示回到上一層:商品列表的連結。
▲商品詳細資訊畫面的顯示選項與前台畫面對照。
▲增量銷售與跨類銷售商品。