商店佈景元件|網格/元件清單列表
最後更新 2023-08-31

 

WACA 商店佈景提供豐富的網格樣式,搭配多元化的佈景元件用來編輯商店首頁樣式;操作介面簡單直覺,幫助您輕鬆建置出喜歡品牌商店氛圍!

這篇文章會介紹商店佈景的組成分佈、元件介紹以及網格對應的適用元件列表清單,如果您正在尋找商店佈景各項元件的詳細介紹,這篇文章正好提供您所需要的資訊唷~

 

目錄

 

 

商店佈景|組成分佈

 

WACA 商店首頁佈景是從最上方的頁首 ➜ 區塊  ➜ 頁尾三大版面由上而下的順序組合而成的首頁版面;中間新增區塊後,請選擇該區塊使用網格,每一個網格內都可以選擇新增元件使用;下方表格為各版面位置示意說明表:

商店佈景|組成分佈
【頁首/頁尾】 【區塊】 【網格】 【元件】
 1. 頁首在功能列下方
 2. 頁尾在首頁最底下
 1. 位於頁首及頁尾之間
 2. 可依需求額外加購數量
 1. 新增區塊後請選擇網格
 2. 為首頁樣式佈局使用
 1. 網格內可新增元件
 2. 各網格元件數不同

 

 

商店佈景|元件清單

 

WACA 提供超過百種的首頁佈景元件讓您自由套入網格使用;下方表格為目前全部的元件清單連結,點擊連結可查看該元件的詳細介紹;查詢後如果需要回到此頁面,請點擊瀏覽器『回上一頁』按鈕即可!

商店佈景|元件清單
元件名稱 元件說明 元件編號
HD. 頁首元件 位於全域設定內;由 LOGO/上方選單組成的元件;部份元件提供下拉式選單功能  HD01HD02HD06
 HD03
HD04
FT. 頁尾元件
位於全域設定內;包含商家標示/頁尾連結/商店資訊/自訂版權等內容;有 4 種版型提供選擇
 FT01FT02FT03FT04
PD. 商品分類頁
位於全域設定內;設定其它頁面的商品列表樣式(不包含首頁商品列表)
 PD01PD02PD03PD04
A. 圖片元件
在網格置入圖片;每一種網格呈現的圖片尺寸/比例均不相同,圖片可設置超連結  1-A013-A014-A015-A01
 7-A019-A0110-A0111-A01
B. 影片元件
網格內插入 Youtube 影片連結;支援 shorts 影片,連結請直接複製瀏覽器網址列的網址  1-B013-B014-B015-B01
 7-B019-B0110-B0111-B01
C. 文字元件
可於網格內編輯文字;適合撰寫品牌特色/購買注意事項/促銷活動說明等時機使用;文字可設定超連結  1-C011-C021-C033-C01
 4-C015-C017-C019-C01
 10-C0111-C01
D. 按鈕元件
可於網格置入按鈕;消費者點擊按鈕,網頁會連結至指定的網址   1-D011-D023-D014-D01
 5-D017-D019-D0110-D01
 11-D01
E. ICON元件
可於網格內置入 ICON 圖標,以圖像取代文字,讓消費者容易理解商店想要傳達的訊息  1-E011-E023-E014-E01
 5-E017-E019-E0110-E01
 11-E01
F. 圖文影元件
元件內可同時呈現圖片/Youtube 影片及文字;大部份元件以圖片+文字呈現為主;部份元件因網格尺寸限制,不提供置入影片  1-F011-F021-F12
 1-F131-F141-F03
 1-F041-F051-F06
 3-F013-F02
 4-F014-F024-F03
 5-F015-F025-F03
 7-F017-F02
 9-F019-F02
 10-F0110-F02
 11-F0111-F02
G. 輪播元件
網格內放置圖片/影片後可輪播顯示;部份元件因網格尺寸限制,不提供置入影片  1-G011-G021-G07
 3-G014-G017-G01
 9-G0110-G01
H. 商品列表元件
將商品放置在商店首頁使用;首頁僅可置入一個全部商品元件,會顯示開啟首頁顯示+前台顯示的全部商品;自訂商品可加入特定商品並編輯 ICON/文字,適合放置指定商品/分類商品使用  1-H011-H021-H031-H04
 1-HC011-HC02
 1-HC031-HC04
I. 頁籤元件
提供 2 個頁籤切換;一個頁籤內可置入 2 個圖影文內容(二個頁籤共可置入 4 個圖影文);網格內可編輯 ICON/圖影/文字  1-I01
J. 公告元件
首頁置入公告區塊;透過公告讓消費者得知商店最新消息;標題可設置 ICON 圖標,內文文字可設定超連結  1-J013-J01
P. Blog元件
將部落格文章置入商店首頁的元件;包含日期/標題/封面/內文開頭;需自行加入指定部落格文章  1-P011-P021-P031-P04
 3-P014-P01
Q. 社群元件
首頁置入社群連結圖標;部份元件可編輯圖片/文字;如欲新增或修改社群連結,請至商店設定編輯『分享外部連結』欄位  1-Q013-Q013-Q03
 5-Q017-Q019-Q01
 10-Q0111-Q01

 

 

商店佈景|網格元件

 

正在規劃首頁樣式的您,是否正在苦惱網格內要套入哪些元件呢?放心!貼心的 WACA 小編為您準備了每一個網格所適用的元件清單,幫助您輕鬆規劃喜歡的首頁版面唷~點擊連結可查看該元件的詳細介紹;查詢後如果需要回到此頁面,請點擊瀏覽器『回上一頁』按鈕即可!

商店佈景|網格元件
網格編號 適用元件
G1-01

 A. 圖片元件
 1-A01
 B. 影片元件
 1-B01
 C. 文字元件
 1-C011-C021-C03
 D. 按鈕元件
 1-D011-D02
 E. ICON元件
 1-E011-E02
 F. 圖文影元件
 1-F011-F021-F121-F13
 1-F141-F031-F041-F05
 1-F06

 G. 輪播元件
 1-G011-G021-G07
 H. 商品列表元件
 1-H011-H021-H031-H04
 1-HC011-HC02
 1-HC031-HC04
 I. 頁籤元件
 1-I01
 J. 公告元件
 1-J01
 P. Blog元件
 1-P011-P021-P031-P04
 Q. 社群元件
 1-Q01

G2-01

 A. 圖片元件
 3-A01
 B. 影片元件
 3-B01
 C. 文字元件
 3-C01
 D. 按鈕元件
 3-D01
 E. ICON元件
 3-E01
 F. 圖文影元件
 3-F013-F02

 G. 輪播元件
 3-G01
 H. 商品列表元件
 -
 I. 頁籤元件
 -
 J. 公告元件
 3-J01
 P. Blog元件
 3-P01
 Q. 社群元件
 3-Q013-Q03

G3-01

 A. 圖片元件
 4-A01
 B. 影片元件
 4-B01
 C. 文字元件
 4-C01
 D. 按鈕元件
 4-D01
 E. ICON元件
 4-E01
 F. 圖文影元件
 4-F014-F024-F03

 G. 輪播元件
 4-G01
 H. 商品列表元件
 -
 I. 頁籤元件
 -
 J. 公告元件
 -
 P. Blog元件
 4-P01
 Q. 社群元件
 -

G3-02

 A. 圖片元件
 7-A01
10-A01
 B. 影片元件
 
7-B0110-B01
 C. 文字元件
 7-C01
10-C01
 D. 按鈕元件
 7-D01
10-D01
 E. ICON元件
 7-E01
10-E01
 F. 圖文影元件
 7-F017-F0210-F01
10-F02

 G. 輪播元件
 7-G01
10-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 7-Q01
10-Q01

G3-03

 A. 圖片元件
 7-A01
10-A01
 B. 影片元件
 
7-B0110-B01
 C. 文字元件
 7-C01
10-C01
 D. 按鈕元件
 7-D01
10-D01
 E. ICON元件
 7-E01
10-E01
 F. 圖文影元件
 7-F017-F0210-F01
10-F02

 G. 輪播元件
 7-G01
10-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 7-Q01
10-Q01

G4-01

 A. 圖片元件
 
5-A01
 B. 影片元件
 
5-B01
 C. 文字元件
 
5-C01
 D. 按鈕元件
 
5-D01
 E. ICON元件
 
5-E01
 F. 圖文影元件
 5-F015-F02
5-F03

 G. 輪播元件
 

 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
5-Q01

G4-02

 A. 圖片元件
 
10-A01
 B. 影片元件
 
10-B01
 C. 文字元件
 
10-C01
 D. 按鈕元件
 
10-D01
 E. ICON元件
 
10-E01
 F. 圖文影元件
 10-F01
10-F02

 G. 輪播元件
 
10-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
10-Q01

G4-03

 A. 圖片元件
 9-A01
11-A01
 B. 影片元件
 
9-B0111-B01
 C. 文字元件
 
9-C0111-C01
 D. 按鈕元件
 
9-D0111-D01
 E. ICON元件
 
9-E0111-E01
 F. 圖文影元件
 9-F01
9-F0211-F0111-F02

 G. 輪播元件
 
9-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
9-Q0111-Q01

G4-04

 A. 圖片元件
 9-A01
11-A01
 B. 影片元件
 
9-B0111-B01
 C. 文字元件
 
9-C0111-C01
 D. 按鈕元件
 
9-D0111-D01
 E. ICON元件
 
9-E0111-E01
 F. 圖文影元件
 9-F01
9-F0211-F0111-F02

 G. 輪播元件
 
9-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
9-Q0111-Q01

G4-05

 A. 圖片元件
 4-A019-A01
11-A01
 B. 影片元件
 
4-B019-B0111-B01
 C. 文字元件
 4-C01
9-C0111-C01
 D. 按鈕元件
 4-D01
9-D0111-D01
 E. ICON元件
 4-E01
9-E0111-E01
 F. 圖文影元件
 4-F014-F024-F03
 9-F01
9-F0211-F0111-F02

 G. 輪播元件
 
4-G019-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 
4-P01
 Q. 社群元件
 
9-Q0111-Q01

G4-06

 A. 圖片元件
 4-A019-A01
11-A01
 B. 影片元件
 
4-B019-B0111-B01
 C. 文字元件
 4-C01
9-C0111-C01
 D. 按鈕元件
 4-D01
9-D0111-D01
 E. ICON元件
 4-E01
9-E0111-E01
 F. 圖文影元件
 4-F014-F024-F03
 9-F01
9-F0211-F0111-F02

 G. 輪播元件
 
4-G019-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 
4-P01
 Q. 社群元件
 
9-Q0111-Q01

G5-02

 A. 圖片元件
 9-A01
11-A01
 B. 影片元件
 
9-B0111-B01
 C. 文字元件
 
9-C0111-C01
 D. 按鈕元件
 
9-D0111-D01
 E. ICON元件
 
9-E0111-E01
 F. 圖文影元件
 9-F01
9-F0211-F0111-F02

 G. 輪播元件
 
9-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
9-Q0111-Q01

G5-03

 A. 圖片元件
 9-A01
11-A01
 B. 影片元件
 
9-B0111-B01
 C. 文字元件
 
9-C0111-C01
 D. 按鈕元件
 
9-D0111-D01
 E. ICON元件
 
9-E0111-E01
 F. 圖文影元件
 9-F01
9-F0211-F0111-F02

 G. 輪播元件
 
9-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
9-Q0111-Q01

G5-04

 A. 圖片元件
 9-A01
11-A01
 B. 影片元件
 
9-B0111-B01
 C. 文字元件
 
9-C0111-C01
 D. 按鈕元件
 
9-D0111-D01
 E. ICON元件
 
9-E0111-E01
 F. 圖文影元件
 9-F01
9-F0211-F0111-F02

 G. 輪播元件
 
9-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
9-Q0111-Q01

G5-05

 A. 圖片元件
 9-A01
11-A01
 B. 影片元件
 
9-B0111-B01
 C. 文字元件
 
9-C0111-C01
 D. 按鈕元件
 
9-D0111-D01
 E. ICON元件
 
9-E0111-E01
 F. 圖文影元件
 9-F01
9-F0211-F0111-F02

 G. 輪播元件
 
9-G01
 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
9-Q0111-Q01

G6-01

 A. 圖片元件
 
11-A01
 B. 影片元件
 
11-B01
 C. 文字元件
 
11-C01
 D. 按鈕元件
 
11-D01
 E. ICON元件
 
11-E01
 F. 圖文影元件
 
11-F0111-F02

 G. 輪播元件
 -

 H. 商品列表元件
 -

 I. 頁籤元件
 -

 J. 公告元件
 -

 P. Blog元件
 -

 Q. 社群元件
 
11-Q01


 

 

總結

 

商店首頁是商店最重要的門面~歡迎大家發揮巧思活用這些豐富的佈景元件,創造出專屬於您的獨一無二品牌商店首頁,用您的獨特風格吸引消費者的眼球,讓人逛了不想走!

未來 WACA 團隊還會開發更多的網格及佈景元件提供使用,敬請期待唷~


電商充電站

 

馬上預約諮詢,整合線下與線上商機
您有興趣的內容
必填
您的姓名
必填
連絡電話
必填
電子信箱
必填
目前使用什麼工具進行預約管理
必填
服務類型與產業別
必填
商店規模
必填
公司/商店名稱
所在區域
專人諮詢
預約專人諮詢
馬上免費註冊