• 商店佈景設定|打造商店獨特風格

    • 最後更新 2022-07-20 13:54

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

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

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

     

    目錄

     

     

    注意事項

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

     

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

     

     

    介面功能介紹與權限說明

     

    介面功能介紹

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

    商店佈景介面功能位置

     

    權限說明

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

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

    商店佈景權限設定

     

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

    商店佈景子帳號權限

     

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

     

     

    商店佈景模板選擇

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

    模板編號 LA01 LA02~LA06
    模板類型 自訂模板
    從頭開始,自行打造商店佈景
    設計模板
    選擇產業適合模板,一鍵套用
    適用對象 有設計團隊
    對商店佈景呈現有特色想法
    商店設計沒有想法
    對於產業適合的呈現沒概念
    排版、美感沒自信

     

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

    選擇適合的佈景模板

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

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

     

    多國語系設定小提醒

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

    切換語系個別設定商店佈景

     

     

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

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

    全預設定是針對商店整體風格設定

     

     

    商店主題色

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

    商店主題色由六個顏色搭配

     

    主要配色位置說明

    主題色

    由左至右

    1 2 3 4 5 6
    主要配色位置

    頁面主色

    頁面副色

    彈跳視窗
    ex 錯誤訊息

    彈跳視窗
    ex 成功訊息

    按鈕
    ex 確定按鈕

    按鈕
    ex 取消按鈕

     

    主題色設定路徑:

    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,正方形。

    商家標示管理可以設定 logo、文字、FB粉專

     

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

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

     

     

    頁尾連結管理

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

    頁尾連結設定位置

     

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

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

    商店變更網址,頁尾網址可以點選還原預設值更新

     

    商店資訊

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

    編輯頁尾商店資訊

     

    自訂版權

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

     

    電子報按鈕顏色

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

    電子報按鈕設定

     

    更換/刪除元件

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

    更換或刪除頁尾區塊

     

     

    商品分類頁

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

    商品分類頁設定路徑

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

    選擇商品分類元件樣式

     

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

    元件設定

    儲存發佈元件

     

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

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

     

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

    分類頁元件可設定欄位

     

    商品管理

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

    商品管理設定

     

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

    陳列
    版型
    A B C D E F G H I J K L
    圖片
    比例
    16:9 4:3 1:1 1:1 1:1 1:1 1:1 1:1 1:1 4:3 9:15 9:15

     

    樣式管理

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

    左側選單設定

     

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

    商品排序樣式設定

     

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

    分頁設定

     

    更換元件

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

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

    更換商品分類元件

     

     

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

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

     

     

    首頁版面配置

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

     

    首頁設定路徑:

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

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

    選擇區塊網格

     

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

    重新命名區塊

     

    6. 新增元件→ 7.選擇元件→ 8.(右側)元件設定

    元件選擇與設定

     

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

    首頁區塊、網格、元素設定

     

    更換網格

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

    更換網格

     

    即可以重新選擇網格

    重選網格

     

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

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

    通知視窗

     

    元素設定

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

    元件內的元素設定

     

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

    調整圖片

     

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

    重新裁切

     

     

     

    圖片上傳限制

    • 【影片】請插入 Youtube 影片連結。
    • 【圖片/GIF】相關說明請參考下方表格:
    檔案類型 JPG PNG GIF
    檔案大小 800KB
    500KB內 1MB內
    圖片尺寸

    G1-01、G2-01、G3-01、G4-01:

    • 寬度:需大於網格內顯示的圖片寬度
    • 高度:上傳的高度上限值為3000px

    G1-01、G2-01、G3-01、G4-01:

    • 寬度:請依照網格內顯示的圖片寬度尺寸,上傳相同寬度尺寸的圖檔
    • 高度:上傳的高度上限值為3000px

     其他網格:

    • 寬度:需大於網格內顯示的圖片寬度
    • 高度:需大於網格內顯示的圖片高度,上限值為3000px

     其他網格:

    • 寬度請依照網格內顯示的圖片寬度尺寸,上傳相同寬度尺寸的圖檔
    • 高度:請依照網格內顯示的圖片高度尺寸,上傳相同高度尺寸的圖檔
    上傳方式 本機上傳/Funto/圖片網址 本機上傳/Funto/圖片網址 本機上傳
    注意事項
    • 如圖片檔案大小/圖片尺寸不符規則,無法上傳該圖片。
    • 圖片上傳後,
      1.若使用G1-01、G2-01、G3-01、G4-01的網格,會直接顯示圖片上傳的高度
      2.若使用其他網格,圖片會顯示在系統預設高度,商家可使用拖拉裁切功能,手動調整要顯示的圖片位置。

     

     

    區塊與網格設定

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

    首頁區塊設定

     

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

    首頁網格設定

     

     

     

    • 圖片滿版設定

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

    寬度滿版

     

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

    區塊內邊距0

     

     

     

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

    首頁展示圖片 

     

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

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

    商品列表可以選擇全部或自訂要顯示的商品

     

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

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

     

    小提醒:

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

     

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

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

    陳列
    版型
    A B C D E F G H I J K L
    圖片
    比例
    16:9 4:3 1:1 1:1 1:1 1:1 1:1 1:1 1:1 4:3 9:15 9:15

     

     

    彈跳廣告

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

    彈跳廣告設定路徑:

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

    彈跳廣告設定途徑1

     

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

    彈跳廣告設定途徑2

    儲存及發佈設定

     

    元件設定

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

    彈跳廣告彈跳效果設定

     

    元素設定

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

    彈跳廣告圖文元素設定

     

     

    總結

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

     

    電商充電站

     

TOP