WACA 商店佈景提供豐富的網格樣式，搭配多元化的佈景元件用來編輯商店首頁樣式；操作介面簡單直覺，幫助您輕鬆建置出喜歡品牌商店氛圍！
這篇文章會介紹商店佈景的組成分佈、元件介紹以及網格對應的適用元件列表清單，如果您正在尋找商店佈景各項元件的詳細介紹，這篇文章正好提供您所需要的資訊唷～
目錄
商店佈景｜組成分佈
WACA 商店首頁佈景是從最上方的頁首 ➜ 區塊 ➜ 頁尾三大版面由上而下的順序組合而成的首頁版面；中間新增區塊後，請選擇該區塊使用網格，每一個網格內都可以選擇新增元件使用；下方表格為各版面位置示意說明表：
| 商店佈景｜組成分佈 | |||
| 【頁首／頁尾】 | 【區塊】 | 【網格】 | 【元件】 |
| 1. 頁首在功能列下方 2. 頁尾在首頁最底下 |
1. 位於頁首及頁尾之間 2. 可依需求額外加購數量 |
1. 新增區塊後請選擇網格 2. 為首頁樣式佈局使用 |
1. 網格內可新增元件 2. 各網格元件數不同 |
 |
 |
 |
 |
商店佈景｜元件清單
WACA 提供超過百種的首頁佈景元件讓您自由套入網格使用；下方表格為目前全部的元件清單連結，點擊連結可查看該元件的詳細介紹；查詢後如果需要回到此頁面，請點擊瀏覽器『回上一頁』按鈕即可！
| 商店佈景｜元件清單 | ||
| 元件名稱 | 元件說明 | 元件編號 |
| HD. 頁首元件 | 位於全域設定內；由 LOGO／上方選單組成的元件；部份元件提供下拉式選單功能 | HD01／HD02／HD06 HD03／HD04 |
| FT. 頁尾元件 |
位於全域設定內；包含商家標示／頁尾連結／商店資訊／自訂版權等內容；有 4 種版型提供選擇 |
FT01／FT02／FT03／FT04 |
| PD. 商品分類頁 |
位於全域設定內；設定其它頁面的商品列表樣式（不包含首頁商品列表） |
PD01／PD02／PD03／PD04 |
| A. 圖片元件 |
在網格置入圖片；每一種網格呈現的圖片尺寸／比例均不相同，圖片可設置超連結 | 1-A01／3-A01／4-A01／5-A01 7-A01／9-A01／10-A01／11-A01 |
| B. 影片元件 |
網格內插入 Youtube 影片連結；支援 shorts 影片，連結請直接複製瀏覽器網址列的網址 | 1-B01／3-B01／4-B01／5-B01 7-B01／9-B01／10-B01／11-B01 |
| C. 文字元件 |
可於網格內編輯文字；適合撰寫品牌特色／購買注意事項／促銷活動說明等時機使用；文字可設定超連結 | 1-C01／1-C02／1-C03／3-C01 4-C01／5-C01／7-C01／9-C01 10-C01／11-C01 |
| D. 按鈕元件 |
可於網格置入按鈕；消費者點擊按鈕，網頁會連結至指定的網址 | 1-D01／1-D02／3-D01／4-D01 5-D01／7-D01／9-D01／10-D01 11-D01 |
| E. ICON元件 |
可於網格內置入 ICON 圖標，以圖像取代文字，讓消費者容易理解商店想要傳達的訊息 | 1-E01／1-E02／3-E01／4-E01 5-E01／7-E01／9-E01／10-E01 11-E01 |
| F. 圖文影元件 |
元件內可同時呈現圖片／Youtube 影片及文字；大部份元件以圖片+文字呈現為主；部份元件因網格尺寸限制，不提供置入影片 | 1-F01／1-F02／1-F12 1-F13／1-F14／1-F03 1-F04／1-F05／1-F06 3-F01／3-F02 4-F01／4-F02／4-F03 5-F01／5-F02／5-F03 7-F01／7-F02 9-F01／9-F02 10-F01／10-F02 11-F01／11-F02 |
| G. 輪播元件 |
網格內放置圖片／影片後可輪播顯示；部份元件因網格尺寸限制，不提供置入影片 | 1-G01／1-G02／1-G07 3-G01／4-G01／7-G01 9-G01／10-G01 |
| H. 商品列表元件 |
將商品放置在商店首頁使用；首頁僅可置入一個全部商品元件，會顯示開啟首頁顯示+前台顯示的全部商品；自訂商品可加入特定商品並編輯 ICON／文字，適合放置指定商品／分類商品使用 | 1-H01／1-H02／1-H03／1-H04 1-HC01／1-HC02 1-HC03／1-HC04 |
| I. 頁籤元件 |
提供 2 個頁籤切換；一個頁籤內可置入 2 個圖影文內容（二個頁籤共可置入 4 個圖影文）；網格內可編輯 ICON／圖影／文字 | 1-I01 |
| J. 公告元件 |
首頁置入公告區塊；透過公告讓消費者得知商店最新消息；標題可設置 ICON 圖標，內文文字可設定超連結 | 1-J01／3-J01 |
| P. Blog元件 |
將部落格文章置入商店首頁的元件；包含日期／標題／封面／內文開頭；需自行加入指定部落格文章 | 1-P01／1-P02／1-P03／1-P04 3-P01／4-P01 |
| Q. 社群元件 |
首頁置入社群連結圖標；部份元件可編輯圖片／文字；如欲新增或修改社群連結，請至商店設定編輯『分享外部連結』欄位 | 1-Q01／3-Q01／3-Q03 5-Q01／7-Q01／9-Q01 10-Q01／11-Q01 |
商店佈景｜網格元件
正在規劃首頁樣式的您，是否正在苦惱網格內要套入哪些元件呢？放心！貼心的 WACA 小編為您準備了每一個網格所適用的元件清單，幫助您輕鬆規劃喜歡的首頁版面唷～點擊連結可查看該元件的詳細介紹；查詢後如果需要回到此頁面，請點擊瀏覽器『回上一頁』按鈕即可！
| 商店佈景｜網格元件 | |||
|---|---|---|---|
| 網格編號 | 適用元件 | ||
| G1-01 |  |
A. 圖片元件 |
G. 輪播元件 |
| G2-01 |  |
A. 圖片元件 |
G. 輪播元件 |
| G3-01 |  |
A. 圖片元件 |
G. 輪播元件 |
| G3-02 |  |
A. 圖片元件 |
G. 輪播元件 |
| G3-03 |  |
A. 圖片元件 |
G. 輪播元件 |
| G4-01 |  |
A. 圖片元件 |
G. 輪播元件 |
| G4-02 |  |
A. 圖片元件 |
G. 輪播元件 |
| G4-03 |  |
A. 圖片元件 |
G. 輪播元件 |
| G4-04 |  |
A. 圖片元件 |
G. 輪播元件 |
| G4-05 |  |
A. 圖片元件 |
G. 輪播元件 |
| G4-06 |  |
A. 圖片元件 |
G. 輪播元件 |
| G5-02 |  |
A. 圖片元件 |
G. 輪播元件 |
| G5-03 |  |
A. 圖片元件 |
G. 輪播元件 |
| G5-04 |  |
A. 圖片元件 |
G. 輪播元件 |
| G5-05 |  |
A. 圖片元件 |
G. 輪播元件 |
| G6-01 |  |
A. 圖片元件 |
G. 輪播元件 |
總結
商店首頁是商店最重要的門面～歡迎大家發揮巧思活用這些豐富的佈景元件，創造出專屬於您的獨一無二品牌商店首頁，用您的獨特風格吸引消費者的眼球，讓人逛了不想走！
未來 WACA 團隊還會開發更多的網格及佈景元件提供使用，敬請期待唷～
