> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 【品牌官網】如何編輯佈景主題（Candy 或之前發佈之主題） ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/6ygp55so5ywo6yoo5pa55qgi_1y8a10.png) 此文章將講解 Candy 或之前發佈之主題，如果你想要了解 Aroma 或其後發佈之主題，請參考此文章： [【品牌官網】如何編輯佈景主題（Aroma 與其後發佈之主題）](/zh-tw/article/aroma-1bwe7z6/) 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) --- # 💡 注意： 1. 不建議在佈景主題設定中輸入「/」、「\」或「>」等符號，以避免顯示或設定異常。 --- ## 設定佈景主題 ### 步驟一：選擇與安裝佈景主題 1. EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 更多主題 → 即可看到全部的佈景主題套版 ![](https://storage.crisp.chat/users/helpdesk/website/42e61e58d63b8000/7cef0147-4b9f-4907-b594-a0650f_3b7cj9.png) ![](e7af8d2e-9a1b-47bc-8a50-acaefb8eb0b6) 2. 選擇佈景主題後 → 點擊「立即安裝」 ![](https://storage.crisp.chat/users/helpdesk/website/f57689ca0e0c5000/d9850edb-2e3d-4475-a02d-814d46_1vdrpoq.png) ### 步驟二：進入佈景主題設定介面 1. 點擊「佈景主題設定」 *（每個佈景主題的設定介面欄位都會有些差異，這是因為不是每個佈景主題都會有其功能，後文說明和步驟會以 **Candy** 佈景主題為例子）* ![](https://storage.crisp.chat/users/helpdesk/website/62187ea9f4c7e80/6b5b26df-e820-4a0a-98ab-392de2_llg0dl.png) 2. 主要設定欄位都會在左側目錄欄 ![](https://storage.crisp.chat/users/helpdesk/website/80198f052707a800/9e1da786-a236-49ed-ac25-3c6695_6hosjc.png) 3. 可切換不同螢幕的預覽，分別是：電腦瀏覽器、平板電腦、手機 ![](https://storage.crisp.chat/users/helpdesk/website/f5b4a7f91acf3000/bc95fed2-6a85-4042-b930-534d5e_1183rej.png) ### 步驟三：設定佈景主題 1. 一般設定 （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) 2. 網站 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) 3. 主選單 （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) 4. 按鈕（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) 5. 連結（Link） 設定官網裡，關於連結的顏色 ![](https://storage.crisp.chat/users/helpdesk/website/c20c3fc76ab9380/e91ea1c3-91f5-4c97-97f7-037849_ansrof.png) 6. 邊框（Border） 設定官網邊框的顏色，例如註冊頁面的邊框 ![](https://storage.crisp.chat/users/helpdesk/website/34f17df1efd3de00/bf188042-8269-4d3e-ad78-88fd38_1lybs56.png) 7. 佈局（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) （3）「頁面內容」為 顯示從品牌官網 → 官網分頁 → 首頁的內容 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_qjsinw.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1mv40z4.png) 8. 輪播設定（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) 9. 輪播內容（Slider Content） （1）上傳輪播圖片、手機版輪播圖片、設定輪播圖片裡的文字、按鈕文字和按鈕導向連結 ![](https://storage.crisp.chat/users/helpdesk/website/ebcb66eb00973800/9ef70015-0c33-4c79-9e7d-eceddc_1awa4ez.png) （2）同樣步驟設定第二第三......張輪播圖片 10. 特色商品（Featured Products） （1）這部分將會顯示「首頁推薦」商品分類裡的商品 ![](https://storage.crisp.chat/users/helpdesk/website/72714e8788f17000/0e04df8b-fd88-453b-907e-a87763_1x3nzue.png) 11. 亮點產品（Highlighted Product） （1）你可選擇一個熱賣商品，以非常明顯的方式顯示在首頁 ![](https://storage.crisp.chat/users/helpdesk/website/ac980a29333ff000/edca12e7-ca45-4f50-8c9f-fb8a11_19ippy7.png) 12. 特色商品目錄（Featured Collections） （1）這部分可以讓你設定多個推薦的商品目錄，你可上傳圖片、設定文字後，再放入商品分類連結作為導向 ![](https://storage.crisp.chat/users/helpdesk/website/86a74dafd7efc000/51020339-d8b4-48c4-a33d-402c10_aluaop.png) （2）以同樣的步驟，設定第二第三..........個特色商品目錄 13. 精選推薦輪播（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）以相同步驟，設定第二第三........精選推薦輪播 14. 帶文字的圖片（Image With Text） 這部分可以讓你顯示圖片與文字，可以用於顯示優惠活動詳情，或是商品分類內容。 （1）上傳圖片、設定標題和內容文字、連結文字和連結導向 ![](https://storage.crisp.chat/users/helpdesk/website/9d4becb115e7d800/b8661b2d-2dc0-4812-aa98-dad1cc_105s005.png) 15. 影片部分（Video Section） （1）你可以以 Youtube 連結的方式把影片上傳到官網首頁 ![](https://storage.crisp.chat/users/helpdesk/website/37618433cfde300/4f29e0af-12f3-4005-a9c2-903134_1p7a50s.png) 16. 部落格（Blog Post） （1）選擇 3 個精選的文章顯示在官網首頁 ![](https://storage.crisp.chat/users/helpdesk/website/d1133aba1a7e2000/20a70e99-adaa-45c4-be35-0ccb5b_r2rlix.png) 17. Logo 列表 （Logo List） 這部分可以讓你在官網首頁上傳不同的 Logo 列表，可用於顯示合作夥伴的 Logo ![](https://storage.crisp.chat/users/helpdesk/website/bab9afd8fe713000/0248daf0-47df-441d-b991-60d6a3_1m53xh9.png) 18. 宣傳欄（Promotional Banner） 這部分可以讓你顯示單一圖片、內容即連結導向 ![](https://storage.crisp.chat/users/helpdesk/website/ff3822c6ec071000/478bbc77-04c0-4f9a-b973-838bfb_yxaoim.png) 19. 手機版目錄（Mobile Menu） 調整手機版導航列目錄的顏色 ![](https://storage.crisp.chat/users/helpdesk/website/24930cfebf5c2c00/e7c4c32c-b115-451b-ac30-f0f017_110ta98.png) 20. 手機版導航列（Mobile Navigation Bar） 設定手機版導航列的圖片、標題、連結導向 ![](https://storage.crisp.chat/users/helpdesk/website/66b683a174789800/6145245e-68b7-483c-831e-0daeb5_tbjth7.png) 21. 頁尾（Footer） 設定官網頁尾文字和背景顏色、社群媒體和連結導向、付款方式 ![](https://storage.crisp.chat/users/helpdesk/website/32d7150772a7a800/588dad68-9863-42f8-a4f5-8b72c8_5bbak6.png) ### 步驟四：點擊儲存，完成！ 1. 點擊儲存後，你可點擊「瀏覽官網」查看你的實際官網前台 ![](https://storage.crisp.chat/users/helpdesk/website/d83eb6b61beee800/0e4e2757-15fb-4800-b1a5-1a1eb6_1gysj0h.png) --- 💡 小提醒：若是使用 Candy 或 Wave 主題沒有出現中文設定語言，你可以到：編輯原始碼 → `config` → `settings_schema.json` → 點擊右上角 「重設」 按鈕 --- ### 相關文章： * [【品牌官網】如何編輯佈景主題（Aroma 與其後發佈之主題）](/zh-tw/article/aroma-1bwe7z6/)