【品牌官網】如何編輯佈景主題(Candy 或之前發佈之主題)
![](https://storage.crisp.chat/users/helpdesk/website/82010a0ce6a70800/a5e724e1-b16f-474a-a70e-e4f5dc_egcdi3.png)
此文章將講解 Candy 或之前發佈之主題,如果你想要了解 Aroma 或其後發佈之主題,請參考此文章: 【品牌官網】如何編輯佈景主題(Aroma 與其後發佈之主題)
EasyStore 目前可以分為兩類型佈景主題:新版和舊版。新版和舊版佈景主題的設定介面上會有不同,分別為 Aroma 或其後發佈之主題 和 Candy 或之前發佈之主題,簡稱新版主題、舊版主題。
新版主題
![](https://storage.crisp.chat/users/helpdesk/website/bb5b33ffc6cff800/b3ddc87a-fa16-49ec-8f2d-29d4a4_1bdk5un.png)
舊版主題
![](https://storage.crisp.chat/users/helpdesk/website/a4990d6fb4ea9000/8327044b-425a-44d6-a678-9a0b45_tlj7rx.png)
你可以參考下圖有關幾個最受歡迎的舊版主題之功能差異:
![](https://storage.crisp.chat/users/helpdesk/website/a7478f71f0aa0000/5e54a827-be2b-4c84-8863-2cb0d9_18p50wa.png)
設定佈景主題
步驟一:選擇與安裝佈景主題
EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 更多主題 → 即可看到全部的佈景主題套版
![](https://storage.crisp.chat/users/helpdesk/website/42e61e58d63b8000/7cef0147-4b9f-4907-b594-a0650f_3b7cj9.png)
選擇佈景主題後 → 點擊「立即安裝」
![](https://storage.crisp.chat/users/helpdesk/website/f57689ca0e0c5000/d9850edb-2e3d-4475-a02d-814d46_1vdrpoq.png)
步驟二:進入佈景主題設定介面
點擊「佈景主題設定」
(每個佈景主題的設定介面欄位都會有些差異,這是因為不是每個佈景主題都會有其功能,後文說明和步驟會以 Candy 佈景主題為例子)
![](https://storage.crisp.chat/users/helpdesk/website/62187ea9f4c7e80/6b5b26df-e820-4a0a-98ab-392de2_llg0dl.png)
主要設定欄位都會在左側目錄欄
![](https://storage.crisp.chat/users/helpdesk/website/80198f052707a800/9e1da786-a236-49ed-ac25-3c6695_6hosjc.png)
可切換不同螢幕的預覽,分別是:電腦瀏覽器、平板電腦、手機
![](https://storage.crisp.chat/users/helpdesk/website/f5b4a7f91acf3000/bc95fed2-6a85-4042-b930-534d5e_1183rej.png)
步驟三:設定佈景主題
一般設定 (General)
(1)設定標題和主要字體、大小、顏色
![](https://storage.crisp.chat/users/helpdesk/website/e8515a031b425000/6d6fdf25-7399-4026-84c9-498a87_61lk4a.png)
(2)選擇是否需要上傳官網背景圖、背景顏色和是否使用原始畫質圖片
![](https://storage.crisp.chat/users/helpdesk/website/943ee4abef545800/2aba1344-4cc8-4064-a259-bf465f_s9oxj7.png)
網站 Logo
(1)若你沒有上傳 Logo 圖片,就會以商店名稱作為你的網站 Logo,你可調整其字體和顏色
![](https://storage.crisp.chat/users/helpdesk/website/20b9862acaf65000/a1b6b9bb-83e1-49a6-8b1e-c9a415_dszf5b.png)
(2)若你需要上傳 Logo 圖片,你可勾選「客製化 Logo」→ 上傳圖片 → 調整 Logo 寬度
![](https://storage.crisp.chat/users/helpdesk/website/4586096f77142800/3783e92e-bea8-4710-a298-b16f95_1hekzvg.png)
(3)上傳網站圖示,這將會顯示在瀏覽器分頁上
![](https://storage.crisp.chat/users/helpdesk/website/2f2cbb55f8e11400/a7c44e53-413c-4dee-b601-bbc3c5_1ibk0w0.png)
主選單 (Top Bar)
(1)設定主選單是否固定在頂部、文字字體、Logo 和導行列位置、字體顏色
![](https://storage.crisp.chat/users/helpdesk/website/7ddf08f4f2370000/24076d4b-4a94-4c5c-b98a-7a595a_ajwrvc.png)
![](https://storage.crisp.chat/users/helpdesk/website/516d5a40582d8000/21b23a8e-c40d-4f55-aca9-f35ca3_18k9joh.png)
按鈕(Button)
(1)設定按鈕文字字體、按鈕文字和背景顏色
![](https://storage.crisp.chat/users/helpdesk/website/6c511f1b37fb3400/4889035e-464b-4858-9cfe-2fe3b9_1tnuwq.png)
(2)選擇「滾動到上方按鈕」的位置,客戶點擊後即可回到官網首部
![](https://storage.crisp.chat/users/helpdesk/website/98899c7047abb800/c8fe1e1a-1288-4a44-af38-359aea_1097v3v.png)
(3)設定結帳按鈕的背景和文字顏色,結帳按鈕將會顯示在購物車裡
![](https://storage.crisp.chat/users/helpdesk/website/d58b27e619b94800/a54e357a-7145-4882-b7cd-ce94b5_l649fy.png)
(4)選擇商品頁面的規格呈現方式
若勾選「規格標籤選項」
![](https://storage.crisp.chat/users/helpdesk/website/1c3832b274a92700/84ecb1dc-3c7d-4545-9b98-235468_67e08u.png)
若無勾選「規格標籤選項」
![](https://storage.crisp.chat/users/helpdesk/website/5928147d3dade400/64a0557a-6c2f-4ad2-8547-d787cc_qi2ic3.png)
連結(Link)
設定官網裡,關於連結的顏色
![](https://storage.crisp.chat/users/helpdesk/website/c20c3fc76ab9380/e91ea1c3-91f5-4c97-97f7-037849_ansrof.png)
邊框(Border)
設定官網邊框的顏色,例如註冊頁面的邊框
![](https://storage.crisp.chat/users/helpdesk/website/34f17df1efd3de00/bf188042-8269-4d3e-ad78-88fd38_1lybs56.png)
佈局(Layout)
(1)官網首頁將會根據你的佈局進行排版(💡 小提醒:由於舊版佈景主題的第一區塊會預設為輪播圖片,且不可更換,所以這裡第 1 部分指的是輪播圖片之後)
![](https://storage.crisp.chat/users/helpdesk/website/6bf3899f6356f400/d22b4400-ce0a-499c-be3f-620b4b_14618z6.png)
(2)自由更換哪個部分顯示哪個佈局
![](https://storage.crisp.chat/users/helpdesk/website/53bc811232c0a800/89ccb035-5b44-4546-a0c5-02c6ee_2uxxre.png)
輪播設定(Slider Settings)
(1)選擇是否自動輪播、顯示圖點、輪播時間和輪播切換效果
![](https://storage.crisp.chat/users/helpdesk/website/b60201cf042ce800/34c9c207-f301-49dd-a1d8-ba426a_spx5fr.png)
(2)設定輪播裡的文字顏色、濾鏡顏色(若設定濾鏡顏色,輪播圖片將會變得朦朧)、輪播裡的按鈕背景和文字顏色
![](https://storage.crisp.chat/users/helpdesk/website/cf36bdcfc6206000/78f6e0c3-06d4-497d-a364-639c7f_nslxv8.png)
輪播內容(Slider Content)
(1)上傳輪播圖片、手機版輪播圖片、設定輪播圖片裡的文字、按鈕文字和按鈕導向連結
![](https://storage.crisp.chat/users/helpdesk/website/ebcb66eb00973800/9ef70015-0c33-4c79-9e7d-eceddc_1awa4ez.png)
(2)同樣步驟設定第二第三......張輪播圖片
特色商品(Featured Products)
(1)這部分將會顯示「首頁推薦」商品分類裡的商品
![](https://storage.crisp.chat/users/helpdesk/website/72714e8788f17000/0e04df8b-fd88-453b-907e-a87763_1x3nzue.png)
亮點產品(Highlighted Product)
(1)你可選擇一個熱賣商品,以非常明顯的方式顯示在首頁
![](https://storage.crisp.chat/users/helpdesk/website/ac980a29333ff000/edca12e7-ca45-4f50-8c9f-fb8a11_19ippy7.png)
特色商品目錄(Featured Collections)
(1)這部分可以讓你設定多個推薦的商品目錄,你可上傳圖片、設定文字後,再放入商品分類連結作為導向
![](https://storage.crisp.chat/users/helpdesk/website/86a74dafd7efc000/51020339-d8b4-48c4-a33d-402c10_aluaop.png)
(2)以同樣的步驟,設定第二第三..........個特色商品目錄
精選推薦輪播(Testimonial Slider)
(1)這部分有別於輪播圖片,一般用途會是顯示客戶使用體驗和反饋(視乎商家的用途需求)
![](https://storage.crisp.chat/users/helpdesk/website/140ebbfe5339c800/93f178e9-25cb-4dbc-b1a1-b19925_1t0jw6e.png)
(2)你可勾選「圖形輪廓圖」後,照片就會以圓形顯示
![](https://storage.crisp.chat/users/helpdesk/website/10066f462d755500/a32e7cc6-6aac-43bb-ace1-e795a6_okuav0.png)
(3)設定其文字顏色、上傳圖片、設定標題、文字、連結導向
![](https://storage.crisp.chat/users/helpdesk/website/3dfea57943e7e800/17b1e37b-a951-4a77-b20c-425a77_11nhx40.png)
(4)以相同步驟,設定第二第三........精選推薦輪播
帶文字的圖片(Image With Text)
這部分可以讓你顯示圖片與文字,可以用於顯示優惠活動詳情,或是商品分類內容。
(1)上傳圖片、設定標題和內容文字、連結文字和連結導向
![](https://storage.crisp.chat/users/helpdesk/website/9d4becb115e7d800/b8661b2d-2dc0-4812-aa98-dad1cc_105s005.png)
影片部分(Video Section)
(1)你可以以 Youtube 連結的方式把影片上傳到官網首頁
![](https://storage.crisp.chat/users/helpdesk/website/37618433cfde300/4f29e0af-12f3-4005-a9c2-903134_1p7a50s.png)
部落格(Blog Post)
(1)選擇 3 個精選的文章顯示在官網首頁
![](https://storage.crisp.chat/users/helpdesk/website/d1133aba1a7e2000/20a70e99-adaa-45c4-be35-0ccb5b_r2rlix.png)
Logo 列表 (Logo List)
這部分可以讓你在官網首頁上傳不同的 Logo 列表,可用於顯示合作夥伴的 Logo
![](https://storage.crisp.chat/users/helpdesk/website/bab9afd8fe713000/0248daf0-47df-441d-b991-60d6a3_1m53xh9.png)
宣傳欄(Promotional Banner)
這部分可以讓你顯示單一圖片、內容即連結導向
![](https://storage.crisp.chat/users/helpdesk/website/ff3822c6ec071000/478bbc77-04c0-4f9a-b973-838bfb_yxaoim.png)
手機版目錄(Mobile Menu)
調整手機版導航列目錄的顏色
![](https://storage.crisp.chat/users/helpdesk/website/24930cfebf5c2c00/e7c4c32c-b115-451b-ac30-f0f017_110ta98.png)
手機版導航列(Mobile Navigation Bar)
設定手機版導航列的圖片、標題、連結導向
![](https://storage.crisp.chat/users/helpdesk/website/66b683a174789800/6145245e-68b7-483c-831e-0daeb5_tbjth7.png)
頁尾(Footer)
設定官網頁尾文字和背景顏色、社群媒體和連結導向、付款方式
![](https://storage.crisp.chat/users/helpdesk/website/32d7150772a7a800/588dad68-9863-42f8-a4f5-8b72c8_5bbak6.png)
步驟四:點擊儲存,完成!
點擊儲存後,你可點擊「瀏覽官網」查看你的實際官網前台
![](https://storage.crisp.chat/users/helpdesk/website/d83eb6b61beee800/0e4e2757-15fb-4800-b1a5-1a1eb6_1gysj0h.png)
💡 小提醒:若是使用 Candy 或 Wave 主題沒有出現中文設定語言,你可以到:編輯原始碼 → config → settings_schema.json → 點擊右上角 「重設」 按鈕
相關文章:
【品牌官網】如何編輯佈景主題(Aroma 與其後發佈之主題)
Updated on: 15/01/2024
感謝!