【品牌官網】如何編輯佈景主題(Candy 或之前發佈之主題)

此文章將講解 Candy 或之前發佈之主題,如果你想要了解 Aroma 或其後發佈之主題,請參考此文章: 【品牌官網】如何編輯佈景主題(Aroma 與其後發佈之主題)
EasyStore 目前可以分為兩類型佈景主題:新版和舊版。新版和舊版佈景主題的設定介面上會有不同,分別為 Aroma 或其後發佈之主題 和 Candy 或之前發佈之主題,簡稱新版主題、舊版主題。
新版主題

舊版主題

你可以參考下圖有關幾個最受歡迎的舊版主題之功能差異:

設定佈景主題
步驟一:選擇與安裝佈景主題
EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 更多主題 → 即可看到全部的佈景主題套版

選擇佈景主題後 → 點擊「立即安裝」

步驟二:進入佈景主題設定介面
點擊「佈景主題設定」
(每個佈景主題的設定介面欄位都會有些差異,這是因為不是每個佈景主題都會有其功能,後文說明和步驟會以 Candy 佈景主題為例子)

主要設定欄位都會在左側目錄欄

可切換不同螢幕的預覽,分別是:電腦瀏覽器、平板電腦、手機

步驟三:設定佈景主題
一般設定 (General)
(1)設定標題和主要字體、大小、顏色

(2)選擇是否需要上傳官網背景圖、背景顏色和是否使用原始畫質圖片

網站 Logo
(1)若你沒有上傳 Logo 圖片,就會以商店名稱作為你的網站 Logo,你可調整其字體和顏色

(2)若你需要上傳 Logo 圖片,你可勾選「客製化 Logo」→ 上傳圖片 → 調整 Logo 寬度

(3)上傳網站圖示,這將會顯示在瀏覽器分頁上

主選單 (Top Bar)
(1)設定主選單是否固定在頂部、文字字體、Logo 和導行列位置、字體顏色


按鈕(Button)
(1)設定按鈕文字字體、按鈕文字和背景顏色

(2)選擇「滾動到上方按鈕」的位置,客戶點擊後即可回到官網首部

(3)設定結帳按鈕的背景和文字顏色,結帳按鈕將會顯示在購物車裡

(4)選擇商品頁面的規格呈現方式
若勾選「規格標籤選項」

若無勾選「規格標籤選項」

連結(Link)
設定官網裡,關於連結的顏色

邊框(Border)
設定官網邊框的顏色,例如註冊頁面的邊框

佈局(Layout)
(1)官網首頁將會根據你的佈局進行排版(💡 小提醒:由於舊版佈景主題的第一區塊會預設為輪播圖片,且不可更換,所以這裡第 1 部分指的是輪播圖片之後)

(2)自由更換哪個部分顯示哪個佈局

輪播設定(Slider Settings)
(1)選擇是否自動輪播、顯示圖點、輪播時間和輪播切換效果

(2)設定輪播裡的文字顏色、濾鏡顏色(若設定濾鏡顏色,輪播圖片將會變得朦朧)、輪播裡的按鈕背景和文字顏色

輪播內容(Slider Content)
(1)上傳輪播圖片、手機版輪播圖片、設定輪播圖片裡的文字、按鈕文字和按鈕導向連結

(2)同樣步驟設定第二第三......張輪播圖片
特色商品(Featured Products)
(1)這部分將會顯示「首頁推薦」商品分類裡的商品

亮點產品(Highlighted Product)
(1)你可選擇一個熱賣商品,以非常明顯的方式顯示在首頁

特色商品目錄(Featured Collections)
(1)這部分可以讓你設定多個推薦的商品目錄,你可上傳圖片、設定文字後,再放入商品分類連結作為導向

(2)以同樣的步驟,設定第二第三..........個特色商品目錄
精選推薦輪播(Testimonial Slider)
(1)這部分有別於輪播圖片,一般用途會是顯示客戶使用體驗和反饋(視乎商家的用途需求)

(2)你可勾選「圖形輪廓圖」後,照片就會以圓形顯示

(3)設定其文字顏色、上傳圖片、設定標題、文字、連結導向

(4)以相同步驟,設定第二第三........精選推薦輪播
帶文字的圖片(Image With Text)
這部分可以讓你顯示圖片與文字,可以用於顯示優惠活動詳情,或是商品分類內容。
(1)上傳圖片、設定標題和內容文字、連結文字和連結導向

影片部分(Video Section)
(1)你可以以 Youtube 連結的方式把影片上傳到官網首頁

部落格(Blog Post)
(1)選擇 3 個精選的文章顯示在官網首頁

Logo 列表 (Logo List)
這部分可以讓你在官網首頁上傳不同的 Logo 列表,可用於顯示合作夥伴的 Logo

宣傳欄(Promotional Banner)
這部分可以讓你顯示單一圖片、內容即連結導向

手機版目錄(Mobile Menu)
調整手機版導航列目錄的顏色

手機版導航列(Mobile Navigation Bar)
設定手機版導航列的圖片、標題、連結導向

頁尾(Footer)
設定官網頁尾文字和背景顏色、社群媒體和連結導向、付款方式

步驟四:點擊儲存,完成!
點擊儲存後,你可點擊「瀏覽官網」查看你的實際官網前台

💡 小提醒:若是使用 Candy 或 Wave 主題沒有出現中文設定語言,你可以到:編輯原始碼 → config → settings_schema.json → 點擊右上角 「重設」 按鈕
相關文章:
【品牌官網】如何編輯佈景主題(Aroma 與其後發佈之主題)
Updated on: 15/01/2024
感謝!