> ## 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). # 【品牌官網】如何編輯佈景主題（Aroma 與其後發佈之主題） ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/6ygp55so5ywo6yoo5pa55qgi_1y8a10.png) 此文章將講解_ Aroma 或其後發佈之主題，如果你想要了解 Candy 或之前發佈之主題，可以移步到此文章： [【品牌官網】如何編輯佈景主題（Candy 或之前發佈之主題）](/zh-tw/article/candy-iya9z5/) EasyStore 目前可以分為兩類型佈景主題：新版和舊版。新版和舊版佈景主題的設定介面上會有不同，分別為 **Aroma 或其後發佈之主題** 和 **Candy 或之前發佈之主題**，簡稱新版主題、舊版主題。 1. [設定佈景主題](#2-6kit5a6a5l2i5pmv5li76agm) 2. [頂端主選單編輯](#2-6acc56uv5li76yg45zau57eo6lyv) 3. [主頁](#2-5li76acb) 4. [商品分類頁面](#2-5zwg5zob5yig6age6acb6z2i) 5. [購物車頁面](#2-6lo854mp6luk6acb6z2i) 6. [商品頁面](#2-5zwg5zob6acb6z2i) 7. [頁尾設定](#2-6acb5bc6kit5a6a) 8. [其他設定](#2-5yw25luw6kit5a6a) --- # 💡 注意： 1. 不建議在佈景主題設定中輸入「/」、「\」或「>」等符號，以避免顯示或設定異常。 --- ### 新版主題 ![](https://storage.crisp.chat/users/helpdesk/website/d1fa6a5e84db3800/273169d1-e2f8-4a5f-805c-c00228_a2nwpm.png) ### 舊版主題 ![](https://storage.crisp.chat/users/helpdesk/website/6dfc3ec79d698c00/4e6221bd-d4d0-41b4-854f-368a5c_1rs68zj.png) ### 你可以參考下圖有關新版主題的功能差異： ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1n4cfnn.png) --- ## 設定佈景主題 ### 步驟一：選擇與安裝佈景主題 1. EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 更多主題 → 即可看到全部的佈景主題套版 ![](https://storage.crisp.chat/users/helpdesk/website/3f38e6dba1ff3c00/a3b404a8-cb55-4f25-929f-e0fda3_sj022n.png) ![](9b6e11df-ccb0-4cd4-b420-1af6c7034931) 2. 選擇佈景主題後 → 點擊「立即安裝」 ![](https://storage.crisp.chat/users/helpdesk/website/527812ccc085f400/b0b51f6d-1662-4011-b5ac-bc7937_1nmzejm.png) ### 步驟二：進入佈景主題設定介面 1. 回到佈景主題頁 → 點擊「佈景主題設定」 *（後文說明和步驟會以 Kate 佈景主題為例子）* ![](https://storage.crisp.chat/users/helpdesk/website/fcf57f9f85190000/ed1fa8ee-0749-4009-b152-cbbab0_1c9uij.png) 2. 佈景主題介面介紹 （1）主要設定欄位都會在左側目錄欄 ![](https://storage.crisp.chat/users/helpdesk/website/c79143cd050cb000/e8c61c0b-0fae-4b12-b197-fe2713_17p99gh.png) （2）可客製化設定不同頁面，在 Kate 主題中可設置主頁、商品分類頁、購物車、產品頁面 ![](https://storage.crisp.chat/users/helpdesk/website/73c3a076d41e3000/99040c6f-7e43-4ce1-8266-fd6ec1_u5j0si.png) （3）可切換不同螢幕的預覽，分別是：電腦瀏覽器、平板電腦、手機 ![](https://storage.crisp.chat/users/helpdesk/website/2e2c86176c021c00/94a3f722-822f-438d-ac07-401a07_zs6vfq.png) --- ## 頂端主選單編輯 1. 點擊「頂端主選單」 ![](https://storage.crisp.chat/users/helpdesk/website/697e8b6794985c00/ac05db65-8e85-4f4f-8abe-2c7467_dd2kyk.png) 2. 此欄位能編輯上品牌 Logo，並調整顯示位置、Logo 寬度、主選單底色和文字顏色、主選單是否固定在上方 ![](https://storage.crisp.chat/users/helpdesk/website/2a827e524dbb6800/39e352d8-ab27-4064-90e9-2e470b_1vz3m5q.png) ![](https://storage.crisp.chat/users/helpdesk/website/b53715d4fcf3780/1ca5cb13-292f-447a-a69d-56573c_1ym34l2.png) --- ## 主頁 ### 官網主頁佈局排版 1. 設定官網首頁的佈景和排版 ![](https://storage.crisp.chat/users/helpdesk/website/23940e5292d04600/9ca2925c-3b8c-4edc-b964-faf366_1rv5ye4.png) 2. 剛安裝佈景主題時，會有預設的首頁排版，如果你想要移除區塊，可以點擊進該區塊，點擊「移除此區塊」 ![](https://storage.crisp.chat/users/helpdesk/website/73a20692d1d8b000/5ab7cc9a-c42a-42aa-92e2-4403ba_lo0313.png) 3. 若想要新增更多區塊可以點擊「新增區塊」，並選擇你要的排版佈局 ![](https://storage.crisp.chat/users/helpdesk/website/1b8c242513b3fc00/d2db5341-e815-4603-a3c1-8aa176_iq03uf.png) 4. 只需要以拖曳的方式即可進行首頁的排版 ![](https://storage.crisp.chat/users/helpdesk/website/daeadfd21185a000/b1f0fc86-f787-49ca-878f-076343_utukjs.gif) ### 各版型區塊介紹 這裡為大家介紹新版主題的版型區塊，區塊的選項會根據不同佈景主題而異 * 輪播圖片 - 用於顯示多張圖片的輪播幻燈片 * 目錄列表 - 在首頁顯示不同的商品分類商品 ![](https://storage.crisp.chat/users/helpdesk/website/7338460c94b98c00/a8a00115-4254-46bf-801b-ae9599_sp9iof.gif) * 精選商品目錄 - 顯示精選或推薦的分類商品 * 商店敘述 - 顯示從品牌官網 → 官網分頁 → 首頁的內容 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_811lro.png) * 橫幅圖片 - 顯示圖片（建議使用比例 1:1 或正方形的圖片）、文字、按鈕 此區塊設計為同時顯示 2 張 1:1 圖片，若僅上傳 1 張圖片，畫面將自動裁切該圖片以填滿區塊 * 多元格框 - 以格框的方式顯示圖片、內容和按鈕 ![](https://storage.crisp.chat/users/helpdesk/website/f90724ca5345f000/ad896ae3-dc11-4953-9f2f-9b9e59_1vvjbyg.png) * 精選區塊 - 以純文字文字和按鈕方式顯示內容與敘述 * 影片 - 以 YouTube 連結方式在首頁新增新增影片 * 文字與圖片 - 結合文字與圖片，有三種顯示方式 ![](https://storage.crisp.chat/users/helpdesk/website/9c22fa9f81c49800/7ffd061a-5a6c-464b-bb10-1f7734_1ru9guz.png) * 促銷版位 - 用於告示目前進行中的優惠活動，有兩種顯示方式 ![](https://storage.crisp.chat/users/helpdesk/website/c04a7d400cb80000/85784b79-6d1e-4949-9777-922140_x9ix32.png) * 部落格：在官網首頁顯示精選部落格文章 * 特色商品：顯示單一亮點推薦商品 ![](https://storage.crisp.chat/users/helpdesk/website/82b4cc1132f08000/01a4cff6-17b9-4b27-ae3b-63a0b9_ijuo9u.png) --- ## 商品分類頁面 ### 設定商品分類頁 1. 點擊「商品分類頁」→ 商品目錄 ![](https://storage.crisp.chat/users/helpdesk/website/c2c0a866eb60a800/23063b8b-48fd-4e62-a5c5-34225b_kmatmd.png) 2. 可設定頁面的每行商品顯示數量、圖片比例、加入購物車按鈕、商品第二張圖片、商品資料和商品背景顏色 ![](https://storage.crisp.chat/users/helpdesk/website/37754aaefe57b60/04003187-0de4-48cf-9c26-7ea9b1_1tp88i4.png) --- ## 購物車頁面 ### 設定購物車頁面 1. 點擊「購物車頁面」→ 推薦商品區塊 ![](https://storage.crisp.chat/users/helpdesk/website/dcfc026d73285800/94a291d7-9f02-4f54-bfa1-ae3f39_asqm6g.png) 2. 可設定標題、選擇顯示在購物車頁面下方的商品目錄、每行顯示的商品數量、商品顯示總數、圖片比例、商品第二張圖片、加入購物車按鈕、商品資料、手機版圖片滑動功能和商品背景顏色 ![](https://storage.crisp.chat/users/helpdesk/website/7941746fd98c600/f60bc668-1366-4bab-a43a-84bf61_1h0lonv.png) --- ## 商品頁面 ### 設定產品頁面 1. 點擊「產品頁面」→ 商品 ![](https://storage.crisp.chat/users/helpdesk/website/c637c73e9ceae800/ae4f5ee9-2118-4a2a-b4d2-8f4fd5_18k8lpw.png) 2. 設定商品頁面的圖標與文字 ![](https://storage.crisp.chat/users/helpdesk/website/378239e9a2429600/e8f1907e-731d-44e1-b47d-c55c97_1tx1iu4.png) 3. 設定商品是否顯示品牌、選擇規格後是否直接顯示規格圖片、規格顯示方式（標籤或下拉式）和商品背景顏色 ![](https://storage.crisp.chat/users/helpdesk/website/ece526472a676000/03c1bcb7-6b9f-4f33-b87b-e2cf00_13w0yg0.png) --- ## 頁尾設定 1. 於左側目錄欄點擊「頁尾」 ![](https://storage.crisp.chat/users/helpdesk/website/5ebc99ba42fe3800/e8a147b5-9161-4084-b193-a5dce1_1xreaew.png) 「頁尾」 最多可以新增 4 個欄位，你可以先移除你不要的欄位，即會可以新增更多欄位選項 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_17kwc9a.png) 2. 將社群媒體連結放到對應的欄位裡，若不想顯示該社群留空即可，前台便不會顯示該社群的圖示 ![](https://storage.crisp.chat/users/helpdesk/website/208af2449adc0e00/9db88386-2458-4bee-88ec-9052d7_1n2bv4x.png) 3. 你可以勾選網店有提供的支付方式，讓客戶知道可以以什麼方式進行付款 ![](https://storage.crisp.chat/users/helpdesk/website/fc02adeed1b5b800/1ce601a0-c780-4aef-b5c8-ea8879_ki2b6a.png) 4. 編輯「快速連結」（頁尾導航列）的標題文字 ![](https://storage.crisp.chat/users/helpdesk/website/6d510c7af1e78800/ce30d215-3155-4547-86cb-2a5321_clohz4.png) 5. 編輯「關於我們」的標題和文字 ![](https://storage.crisp.chat/users/helpdesk/website/33e2168698f93000/a95d7546-73b1-4a48-b733-2f09fd_1u92udv.png) 6. 「圖片」可以讓你在頁尾上傳圖片、調整圖片大小和置入圖片導向連結 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_klwlwc.png) 7. 「會員購物 APP」可以讓你在頁尾推廣給顧客引導下載會員 APP ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1859m03.png) 8. 「設定」裡可以編輯頁尾區塊的背景色、標題字色、內文字色 ![](https://storage.crisp.chat/users/helpdesk/website/6e84129355334800/f10595a4-ec60-4f6b-8fc5-ca3471_btcv1e.png) --- ## 其他設定 1. 於左側目錄欄點擊「設定」 ![](https://storage.crisp.chat/users/helpdesk/website/3a3d97646c5bc000/c6698de6-e6c8-4793-b649-7b63aa_d0gsxn.png) 2. 設定官網的標題和文字字體 ![](https://storage.crisp.chat/users/helpdesk/website/78f068c652b9c800/5572eefc-e891-499b-9a15-48bf6c_1x8fyrd.png) 3. 調整內文、背景、按鈕、按鈕字色和外框的顏色 ![](https://storage.crisp.chat/users/helpdesk/website/be99979a89ada80/f0f99682-b42a-4400-aeb8-8f1fd8_12v1gd3.png) 4. 你可以上傳官網的背景圖 ![](https://storage.crisp.chat/users/helpdesk/website/e128d5aec0cac800/2f530517-5232-41e9-a777-4d96ee_2qwimi.png) 5. 上傳「網站圖示」，瀏覽器分頁圖示將會顯示你的官網圖示 ![](https://storage.crisp.chat/users/helpdesk/website/95a425ce2bf1e000/e4371d49-09ab-4e26-a211-8c19a1_131jelk.png) 6. 調整版面最大寬度 ![](https://storage.crisp.chat/users/helpdesk/website/c8323f52cbf5a000/346fca4c-17ab-428c-bc4c-c47bc9_oomtu8.png) ![](https://storage.crisp.chat/users/helpdesk/website/588e31d474b48c00/b44c0821-676a-4c9c-959b-e00495_1rjgejc.png) 7. 選擇是否使用原始畫質圖片和上傳連結預覽圖 ![](https://storage.crisp.chat/users/helpdesk/website/5a0fb4d782596800/ca94ff0b-b37d-4655-bce7-8b2aab_p2gdwb.png) ![](https://storage.crisp.chat/users/helpdesk/website/1cf18018484d6c00/979a3583-7c16-4c02-93bb-e0a1b9_i5itt4.png) 8. 上傳結帳頁面的 Logo 圖片 ![](https://storage.crisp.chat/users/helpdesk/website/c19bfa31f61e1000/d315d999-289a-4dee-bd2e-d13119_1alz4r1.png) ### 點擊儲存，完成！ 💡你可回到上一頁點擊「瀏覽官網」查看你的實際官網前台 ![](https://storage.crisp.chat/users/helpdesk/website/27f27e95fc25a600/5a4ff305-6fd9-4f4f-9b85-31d498_sbwla8.png) --- ### 📢 相關說明： 1. 商品規格若售完後會呈現淺色 || 🔒 此顯示僅支援 Aroma 與其後發佈之主題 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_13evxla.png) * 若你在 2023 年 5 月前就已經安裝佈景主題，你可以選擇以下方法： （1）重新安裝主題 ||| ⚠️ 重新安裝主題將需要重新設計佈景主題或自行編輯的原始碼，建議你可以慎重考量 （2）重設以下原始碼文件夾 * main-product.liquid * global.js * section-main-product.css * featured-product.liquid （如有這個文件夾） * section-featured-product.css （如有這個文件夾） ||| ⚠️ 若你曾經有在以上文件夾編輯原始碼，重設原始碼文件後，所有曾經編輯的原始碼將會消失 2. 佈景主題 Koji ，此主題可以直接在商品分類或商品頁面顯示商品規格圖片，只要商品有設定商品規格圖片，就會自動顯示，如圖： ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ih0d02.png) ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_plo2hi.png) ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_asyety.png) 你也可以參考佈景主題 Koji 的預覽： https://kojidemo.easy.co/ 3. 佈景主題 Muse，此主題可以讓主選單透明化、影片自動循環、商品分類或商品頁面顯示商品規格圖片 你也可以參考佈景主題 Muse 的預覽： https://musedemo.easy.co/ --- ### 相關文章： [【品牌官網】關於新版佈景主題（Aroma 與其後發佈之主題）的常見問題](https://support.easystore.co/zh-tw/article/aroma-1uf6ypj/) [【品牌官網】如何編輯佈景主題（Candy 或之前發佈之主題）](/zh-tw/article/candy-iya9z5/) ** [](https://support.easystore.co/zh-tw/article/aroma-1uf6ypj/)