「初次使用網路開店，對於商店風格、版面排版一點概念都沒有，不知道該如何設定。」

「擁有自己的網路商店多年，想要設計一個可以凸顯品牌特色的商店，讓顧客一眼就被吸引，並留下深刻印象。」

WACA 的商店佈景可以一次滿足新手店家和資深店家的心願。透過模板可以讓新手快速套版，變更圖片和文字資訊，快速打造商店佈景；透過靈活度高的排版功能，則可以讓資深店家規劃獨具風格的商店設計。現在就跟著文章說明，先了解商店佈景的基本功能位置和權限介紹，緊接著依序完成商店整體和首頁的佈景設定吧！

目錄

• 注意事項
• 介面功能介紹與權限說明
• 商店佈景模板選擇
• 商店整體風格設定-全域設定
  • 商店主題色
  • 商店背景
  • 商店頁首(上方選單)
  • 商店頁尾
  • 商品分類頁
• 商店首頁獨特設計-首頁設定
  • 首頁版面配置
    • 圖片上傳限制 
    • 圖片滿版設定
    • 首頁商品展示設定
  • 彈跳廣告
• 總結

注意事項

• 商店佈景後臺編輯器僅限裝置大小大於 1024px 的裝置使用，建議以電腦操作設定。瀏覽器則建議使用 Chrome 瀏覽器；若使用 Safari 瀏覽器，請使用 ios 15 以上的版本。
• 商店佈景分為兩個版本，可使用的區塊和元件會因為版本而不同。如需使用進階的選項，可以至帳務中心升級商店版本；或在商店佈景左上角點選「升級」按鈕，加購升級商店佈景。

商店佈景版本升級	賣家中心商店版本升級

介面功能介紹與權限說明

介面功能介紹

1. 升級：可升級「商店佈景版本」；加購「首頁版型區塊數量」。
2. 編輯語系：切換語系針對商店前台提供的多國語言頁面（繁體、簡體、英文），個別設定商店佈景。
3. 預覽：可以預覽商店首頁當前設定在前台呈現的畫面。
4. 儲存：每個區塊完成設定後，請務必點選「儲存」按鈕，儲存當前設定。儲存後，設定完成的呈現畫面僅可於後台編輯器瀏覽。
5. 發佈：完成設定並想同步於商店前台時，請點選「發佈」按鈕。
6. 離開商店佈景：即可回到後台儀表板，操作其他功能。
7. 全域：主要設定全站背景及按鈕顏色；商店頁首、頁尾、及商品分類頁的排版、配色。
8. 首頁：主要設定商店首頁的版型設計，及彈跳廣告的設定。

權限說明

主帳號在賣家中心的「帳號管理」，可以針對子帳號個別設定權限。鎖頭開啟時，子帳號擁有該項目的操作權限；關閉時，則沒有權限操作。完成權限設定，別忘了「儲存」。

• 檢視：僅可以編輯後台及預覽。
• 編輯：可以編輯後台，執行升級、儲存等動作。
• 發佈：可以發佈設定，同步至商店前台。

權限設定完成，子帳號登入後台的商店佈景，可以在左上角看到帳號擁有的權限。綠色底代表該權限有開啟；灰色底則是沒有權限。

清楚了解商店佈景的基本功能設定位置和權限管理的方式後，接著跟著步驟進到商店佈景，選擇適合的模板開始規劃商店設計囉！

商店佈景模板選擇

商店佈景模板分為六款（LA01~LA06），不同產業的商品，主要呈現的方式不太一樣，所以每個模板適合的產業也不同，建議可以先預覽模板，再套用適合的模板。

如果想做出原先舊版商店佈景首頁排版，可以選擇 LA01 的模板喔！

選擇模板後，後續如需更換模板，請進到左側的「首頁」的功能列表中，就可以在最上方看到「模板庫」的按鈕，重新選擇模板。

1. 先點開「首頁」功能列表	2. 進到「模板庫」，更換模板

多國語系設定小提醒

• 各語系的商店佈景可以個別設定；選擇模板後，所有語系會自動帶入系統預設的圖影文資訊。
• 第一語系（預設語系）首頁編輯完成後，請務必再分別進入第二／第三語系編輯頁設定圖影文資訊。
• 若第二／第三語系區塊想延用第一語系使用的圖片／影片，請進入該語系編輯頁，刪除系統預設的圖片／影片後儲存並發佈至前台，這樣在前台切換語系時，就會顯示第一語系的圖片／影片資訊喔！

商店整體風格設定-全域設定

全域設定是針對商店「整體風格」進行設定，包含了商店主題配色、整體的背景顏色、頁首頁尾的版型呈現、商品分類頁面排版等，首先我們就從商店的主題色開始了解，並跟著說明一起設定。

商店主題色

商店每個主題配色的選項都是由六種顏色搭配而成，顏色由左至右分別調整商店由大至小的範圍和功能鍵配色。

主要配色位置說明

主題色設定路徑：

1.全域設定 → 2.（風格）主題色→ 3.選擇主題色→ 4.預覽→ 5.儲存→ 6.發佈

商店最上方為功能列，主題色的設置會影響功能列顯示的顏色

在網頁版的商店中分成深色與淺色系兩種

• 深色系：麥穗金、海棠紅、海松綠
• 淺色系：珊瑚橘、莫蘭紫、湛藍海

在手機版的商店中，功能列與選單點開後顯示的底色主要以主題色中的頁面副色為主

商店背景

商店背景可以選擇單純的顏色背景、系統內建的花紋圖片，也可以上傳自行設計的背景圖片。確認圖片後，再透過背景重複、圖片位置、背景尺寸等內建功能，調整圖片至符合需求的呈現樣貌。

商店背景設定路徑：

1.全域設定→ 2.（風格）背景→ 3. 選擇背景顏色或圖片，調整圖片顯示方式→ 4.預覽→ 5.儲存→ 6.發佈

商店頁首 (上方選單)

商店頁首包含「商店 LOGO 和上方選單」，透過元件的選擇，決定 LOGO 和選單呈現的位置；透過元件的設計，調整 LOGO 和選單合適的搭配。

特別留意，商店頁首區塊是商店固定的預設區塊，所以商店頁首只能更改樣式，無法刪除喔！

商店頁首設定路徑：

1.全域設定→ 2.（共用）頁首元件→ 3.選擇頁首元件

4.（右側）元件設定→ 5.區塊設定→ 6.網格設定→ 7.預覽→ 8.儲存→ 9.發佈

元件設定

完成首次設定，後續要編輯頁首元件時，可以點選「元件設定」，就會出現右側元件設定的編輯欄位。

頁首元件設定包含「LOGO 管理」、「桌機選單管理」、「更換元件」三個部分。

• LOGO 管理：LOGO 圖片可以選擇上傳圖片；或是輸入文字，並透過內建系統設計。
• 桌機選單管理：可以調整「上方選單」文字的大小、顏色、背景色、固定選單。
• 更換元件：可以重新選擇頁首元件，決定頁首 LOGO 和選單想呈現的位置。

LOGO 圖片上傳限制：

• 檔案格式 : 僅限JPG、PNG、GIF。
• 檔案大小 : JPG、PNG (650KB)、 GIF (300KB)。
• 檔案尺寸：
  桌機版圖片高度不限，寬度建議小於 1140px。若寬度大於 1140px，桌機版會以寬度 1140px 呈現。
  手機版會因為裝置大小，自動調整圖片顯示比例。圖片寬度小於行動裝置寬度，將以原圖的1/2比例呈現；寬度大於行動裝置寬度，將以原圖100%比例呈現。

「固定選單」是商店佈景 Gold 版本限定的元件設定功能，店家可依照商店每個頁面呈現的長度，決定固定選單呈現方式，讓消費者瀏覽網站時，可以更方便的切換選單。

由左至右依序為

• 不設定：固定顯示在頁首位置，不會隨著頁面移動。
• 釘選選單：將選單釘選於頁面頂端，頁面往下滑動時，選單會浮動在上方。
• 上滑出現：頁面上滑瀏覽時，選單即會出現在畫面頂端。

區塊設定

頁首區塊設定為浮動工具，點一下左側「頁首區塊標題」即會出現，區塊設定可以調整內邊距、背景顏色、設定背景圖片。

功能由左至右依序為

• 內邊距：可以調整 LOGO 和 選單的網格和區塊間的上下距離。
• 背景顏色：可挑選單一顏色。
• 加入背景圖：可選擇內建花紋背景，或自行上傳圖片；另外還可以調整圖片濾鏡效果；進行背景設定，選擇背景呈現方式。

網格設定

點選「網格設定」，就會出現網格設定的浮動工具。網格設定主要調整 LOGO 和 選單的網格，在區塊中是否要滿版呈現，貼齊區塊左、右邊界。

商店頁尾

商店頁尾包含商家標示管理、頁尾連結管理、商店資訊、自訂版權、電子報按鈕顏色、更換和刪除元件等六個部分，且商店頁尾區塊可以選擇是否放置。

商店頁尾設定路徑：

1.全域設定→ 2.（共用）頁尾元件→ 3.選擇頁尾元件

4.（右側）元件設定→ 5.區塊設定→ 6.預覽→ 7.儲存→ 8.發佈

頁尾底色設定

點擊左側「頁尾區塊」，會出現浮動工具，可以設定頁尾的背景顏色，或是上傳背景圖片

商家標示管理

可以選擇放置圖片 LOGO、編輯文字 LOGO、或嵌入 FB 粉絲專頁。

LOGO 圖片上傳限制：

• 檔案格式 : 僅限JPG、PNG、GIF。
• 檔案大小 : JPG、PNG (650KB)、 GIF (300KB)。
• 檔案尺寸 : 寬200px X 高200px，正方形。

商家標示管理若選擇「FB 粉絲專頁」，粉絲專頁設定必須編輯以下設定才會顯示：

• 國家限制 → 「所有人」都可以看到粉絲專頁
• 年齡限制 →　專頁對「所有人」顯示

頁尾連結管理

透過「編輯連結」可以調整頁尾文字連結的文字、連結、排序，也能開啟顯示頁尾連結標題，變更連結文字顯示顏色。

如果商店有變更網址，可以透過編輯連結的「還原預設值」按鈕，讓連結自動更新為新的網址。

但要特別注意的是連結還原預設值後，就必須重新排序喔！

商店資訊

在頁尾區塊內，可以看到「商店資訊...」的編輯框，點一下編輯框即會出現文字編輯的浮動工具，可以自行編輯商店資訊的內容。

自訂版權

自訂版權欄位需要另外加購，才能編輯喔！

電子報按鈕顏色

在行銷推廣，如果要開啟電子報功能，才會出現電子報文字和按鈕顏色的編輯欄位。

更換/刪除元件

• 更換元件：可以重新選擇頁尾元件的樣式。
• 刪除元件：會直接移除頁尾區塊，商品列表商品數量較多，且未使用分頁功能時，頁尾不易被瀏覽，建議選擇刪除頁尾元件。

商品分類頁

商品分類頁主要針對「分類頁的商品列表」和「左側選單」進行設定。

商品分類頁設定路徑

1.全域設定→ 2.（共用）商品分類頁→ 3.選擇元件

4.元件設定→ 5.套用→ 6.儲存→ 7.發佈

PD. 商品分類頁的元件總共有四個樣式可以選擇

前台顯示畫面	元件名稱	樣式說明
	PD01	無邊框陰影 直接顯示品名
	PD02	有邊框陰影 直接顯示品名
	PD03	無邊框陰影 滑鼠移入商品圖上方，顯示品名
	PD04	有邊框陰影 滑鼠移入商品圖上方，顯示品名

分類頁元件設定包含「商品管理」和「樣式管理」兩個部分。

商品管理

• 陳列版型：商品列表圖片陳列的方式，不同的陳列版型，商品圖顯示比例也不同，建議留意一下圖片比例，才能完整呈現商品圖！
• 商品品名：品名文字大小、對齊位置、顏色的呈現
• 商品金額：金額顯示的位置
• 背景色：商品列表商品的背景色

陳列版型對應商品圖片顯示比例

樣式管理

• 左側選單：設定項目選取和未選取時的文字顏色

• 商品排序樣式：需開啟商品登錄全域設定中的「前台商品排序」開關才會出現。

• 分頁：可選擇是否開啟，開啟後每一頁最多可以設定顯示筆數為 50 筆。分頁關閉時，會顯示所有商品，若商品數量較多，因頁面最底部被瀏覽的頻率較低，則不建議開啟全域設定的「頁尾」區塊。

更換元件

如需更換商品分類頁元件的樣式，請至「全域設定→（共用）商品分類頁」，重新選擇適合的商品分類頁元件。

請留意：若重新選擇商品分類頁元件時，元件設定(商品管理、樣式管理)都要重新設定喔！

商店首頁獨特設計-首頁設定

首頁設定包含「商店首頁」的排版和「彈跳廣告」兩個部分，是商店設定十分重要的一環，首頁通常是顧客進到商店的第一個頁面，因此會大大影響顧客對店家的第一印象，好的印象會刺激消費者購買的意願喔！

首頁版面配置

首頁版面指的是「頁首」和「頁尾」中間的部分，是由多個「區塊」組成，店家可以依照需求選擇需要的區塊樣式；自由編輯區塊內呈現的內容；還能上下移動靈活調整區塊擺放的位置。

首頁設定路徑：

1. 首頁設定→ 2.（版面配置）新增區塊→ 3.選擇網格樣式

小提醒：區塊分隔的數量和大小會影響圖片和影片的呈現，所以不同的網格樣式，後續可以選擇的元件樣式也不同喔！

4.編輯區塊名稱→ 5.重新命名區塊

6. 新增元件→ 7.選擇元件→ 8.（右側）元件設定

9. 編輯元件內的元素→ 10.區塊設定→ 11.網格設定→ 12.預覽→ 13.儲存→ 14.發佈

更換網格

若新增區塊後，欲更換區塊網格，可以點按區塊左下角的更換圖示，

即可以重新選擇網格

選擇完畢後，會跳通知視窗，點按確定後，選擇的新網格即會出現

請留意：若更換網格，原先舊網格上的元件會被刪除喔

元素設定

元件內包含文字、圖片、影片等不同元素，當游標點入元素內時，會出現「浮動工具」，可以編輯元素內容，若要刪除圖片，請點按紅色底的垃圾桶。

上傳圖片後，可以手動調整要顯示的圖片位置，調整圖片放大縮小，最後按下「確認裁切」

若裁切完畢後，欲調整圖片裁切設定，可點按「重新裁切」的按鈕喔

圖片上傳限制

• 【影片】請插入 Youtube 影片連結。
• 【圖片／GIF】相關說明請參考下方表格：

區塊與網格設定

區塊設定：點一下「區塊標題」會出現浮動工具，可以調整內部元件和區塊邊界之間邊距；設定背景顏色或圖片。

網格設定：點一下「網格設定」會出現浮動工具，可以調整元件在區塊內是否要滿版呈現。

• 圖片滿版設定

因此欲要讓區塊圖片左右滿版，需開啟網格設定的寬度滿版。

若設定區塊內邊距為0，就會緊鄰上下區塊喔！　

• 首頁商品展示設定
1. 請先將要展示的商品在「商品登錄」開啟「首頁顯示」及「前台顯示」的顯示開關。
2. 選擇區塊網格時，請選擇不分隔的 1 格區塊(編號 G1-01)。
3. 新增元件時，請選擇 H 商品列表元件。

商品列表元件有「全部商品」和「自訂商品」兩個選項可以選擇。

• 全部商品：
  限制首頁只有一個區塊可以設定此元件，顯示商品會以有開啟「首頁顯示和前台顯示」的商品為主。
  元件設定可設定版型呈列的樣式，及是否開啟分頁。
  關閉分頁且首頁顯示商品數量較多的店家，下方區塊不易被瀏覽，商品列表區塊下方不建議再放置其他區塊或頁尾區塊。
• 自訂商品：
  可以在元件設定加入要顯示在此區塊的商品，最多可以放置 30 個商品。
  自訂商品元件只會顯示「首頁顯示和前台顯示」或「首頁顯示和預設前台顯示」顯示開關同時開啟的商品。

每個商品列表元件的樣式都不太一樣，主要可以分成有無邊框陰影與品名是否直接顯示在商品封面圖下方

前台顯示畫面	元件名稱	樣式說明
	1-H01、1-HC01	無邊框陰影 直接顯示品名
	1-H02、1-HC02	有邊框陰影 直接顯示品名
	1-H03、1-HC03	無邊框陰影 滑鼠移入商品圖上方，顯示品名
	1-H04、1-HC04	有邊框陰影 滑鼠移入商品圖上方，顯示品名

小提醒：

1.首頁只能使用一個 H.全部商品列表元件，因此欲更換全部商品列表元件時，要先點按本來全部商品列表，右側會出現「元件設定」，往下滑到最底，點按「刪除元件」，才能新增。

2.商品列表元件選用的陳列版型，會影響圖片顯示比例，建議選擇與「商品分類頁陳列版型」顯示比例相同的版型喔！

陳列版型對應商品圖片顯示比例表

彈跳廣告

彈跳廣告是進到商店首頁時，會彈出的廣告視窗，可以立即抓住顧客的目光。彈跳廣告分為「圖文廣告」和「電子報訂閱」兩種元件，一次只能設定一個彈跳廣告。彈跳視窗在顧客瀏覽商店時多次出現，容易干擾顧客，所以顧客使用同一個瀏覽器 24 小時內，彈跳廣告只會出現一次喔！

彈跳廣告設定路徑：

1.首頁設定→ 2.（首頁彈跳廣告）新增廣告→ 3.（更換廣告）選擇廣告類型→ 4.選擇廣告元件

5.元件設定→ 6.編輯元件內的圖文元素→ 7.結束編輯→ 8.儲存 → 9. 發佈

元件設定

可以調整彈跳廣告彈出時的「彈跳效果」。

元素設定

元件內包含文字、圖片等不同元素，當游標點入元素內時，會出現「浮動工具」，可以編輯元素內容。

總結

在經營網路商店時，商店佈景是商店設定重要的一個環節。商店佈景除了可以調整商店整體的主題色、背景、頁首和頁尾區塊，營造出商店整體的氛圍；還能透過首頁區塊組合，設計一個令人印象深刻，想繼續瀏覽的商店首頁。建議搭配經營的理念、販售的主要商品，好好規畫商店想呈現的風格，讓商店成為眾多品牌中，亮眼的主角。