【品牌官網】如何編輯佈景主題(Aroma 與其後發佈之主題)
![](https://storage.crisp.chat/users/helpdesk/website/59b6a581f4eb1400/8d30170b-aece-413f-abff-d37b01_vhwv3m.png)
此文章將講解_ Aroma 或其後發佈之主題,如果你想要了解 Candy 或之前發佈之主題,可以移步到此文章: 【品牌官網】如何編輯佈景主題(Candy 或之前發佈之主題)
EasyStore 目前可以分為兩類型佈景主題:新版和舊版。新版和舊版佈景主題的設定介面上會有不同,分別為 Aroma 或其後發佈之主題 和 Candy 或之前發佈之主題,簡稱新版主題、舊版主題。
新版主題
![](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)
設定佈景主題
步驟一:選擇與安裝佈景主題
EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 更多主題 → 即可看到全部的佈景主題套版
![](https://storage.crisp.chat/users/helpdesk/website/3f38e6dba1ff3c00/a3b404a8-cb55-4f25-929f-e0fda3_sj022n.png)
選擇佈景主題後 → 點擊「立即安裝」
![](https://storage.crisp.chat/users/helpdesk/website/527812ccc085f400/b0b51f6d-1662-4011-b5ac-bc7937_1nmzejm.png)
步驟二:進入佈景主題設定介面
回到佈景主題頁 → 點擊「佈景主題設定」
(後文說明和步驟會以 Kate 佈景主題為例子)
![](https://storage.crisp.chat/users/helpdesk/website/fcf57f9f85190000/ed1fa8ee-0749-4009-b152-cbbab0_1c9uij.png)
佈景主題介面介紹
(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)
頂端主選單編輯
點擊「頂端主選單」
![](https://storage.crisp.chat/users/helpdesk/website/697e8b6794985c00/ac05db65-8e85-4f4f-8abe-2c7467_dd2kyk.png)
此欄位能編輯上品牌 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)
主頁
官網主頁佈局排版
設定官網首頁的佈景和排版
![](https://storage.crisp.chat/users/helpdesk/website/23940e5292d04600/9ca2925c-3b8c-4edc-b964-faf366_1rv5ye4.png)
剛安裝佈景主題時,會有預設的首頁排版,如果你想要移除區塊,可以點擊進該區塊,點擊「移除此區塊」
![](https://storage.crisp.chat/users/helpdesk/website/73a20692d1d8b000/5ab7cc9a-c42a-42aa-92e2-4403ba_lo0313.png)
若想要新增更多區塊可以點擊「新增區塊」,並選擇你要的排版佈局
![](https://storage.crisp.chat/users/helpdesk/website/1b8c242513b3fc00/d2db5341-e815-4603-a3c1-8aa176_iq03uf.png)
只需要以拖曳的方式即可進行首頁的排版
![](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)
精選商品目錄 - 顯示精選或推薦的分類商品
商店敘述 - 顯示從品牌官網 → 官網分頁 → 首頁的內容
橫幅圖片 - 顯示單一圖片及內容(建議使用比例 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)
商品分類頁面
設定商品分類頁
點擊「商品分類頁」→ 商品目錄
![](https://storage.crisp.chat/users/helpdesk/website/c2c0a866eb60a800/23063b8b-48fd-4e62-a5c5-34225b_kmatmd.png)
可設定頁面的每行商品顯示數量、圖片比例、加入購物車按鈕、商品第二張圖片、商品資料和商品背景顏色
![](https://storage.crisp.chat/users/helpdesk/website/37754aaefe57b60/04003187-0de4-48cf-9c26-7ea9b1_1tp88i4.png)
購物車頁面
設定購物車頁面
點擊「購物車頁面」→ 推薦商品區塊
![](https://storage.crisp.chat/users/helpdesk/website/dcfc026d73285800/94a291d7-9f02-4f54-bfa1-ae3f39_asqm6g.png)
可設定標題、選擇顯示在購物車頁面下方的商品目錄、每行顯示的商品數量、商品顯示總數、圖片比例、商品第二張圖片、加入購物車按鈕、商品資料、手機版圖片滑動功能和商品背景顏色
![](https://storage.crisp.chat/users/helpdesk/website/7941746fd98c600/f60bc668-1366-4bab-a43a-84bf61_1h0lonv.png)
商品頁面
設定產品頁面
點擊「產品頁面」→ 商品
![](https://storage.crisp.chat/users/helpdesk/website/c637c73e9ceae800/ae4f5ee9-2118-4a2a-b4d2-8f4fd5_18k8lpw.png)
設定商品頁面的圖標與文字
![](https://storage.crisp.chat/users/helpdesk/website/378239e9a2429600/e8f1907e-731d-44e1-b47d-c55c97_1tx1iu4.png)
設定商品是否顯示品牌、選擇規格後是否直接顯示規格圖片、規格顯示方式(標籤或下拉式)和商品背景顏色
![](https://storage.crisp.chat/users/helpdesk/website/ece526472a676000/03c1bcb7-6b9f-4f33-b87b-e2cf00_13w0yg0.png)
頁尾設定
於左側目錄欄點擊「頁尾」
![](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)
將社群媒體連結放到對應的欄位裡,若不想顯示該社群留空即可,前台便不會顯示該社群的圖示
![](https://storage.crisp.chat/users/helpdesk/website/208af2449adc0e00/9db88386-2458-4bee-88ec-9052d7_1n2bv4x.png)
你可以勾選網店有提供的支付方式,讓客戶知道可以以什麼方式進行付款
![](https://storage.crisp.chat/users/helpdesk/website/fc02adeed1b5b800/1ce601a0-c780-4aef-b5c8-ea8879_ki2b6a.png)
編輯「快速連結」(頁尾導航列)的標題文字
![](https://storage.crisp.chat/users/helpdesk/website/6d510c7af1e78800/ce30d215-3155-4547-86cb-2a5321_clohz4.png)
編輯「關於我們」的標題和文字
![](https://storage.crisp.chat/users/helpdesk/website/33e2168698f93000/a95d7546-73b1-4a48-b733-2f09fd_1u92udv.png)
「圖片」可以讓你在頁尾上傳圖片、調整圖片大小和置入圖片導向連結
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_klwlwc.png)
「會員購物 APP」可以讓你在頁尾推廣給顧客引導下載會員 APP
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1859m03.png)
「設定」裡可以編輯頁尾區塊的背景色、標題字色、內文字色
![](https://storage.crisp.chat/users/helpdesk/website/6e84129355334800/f10595a4-ec60-4f6b-8fc5-ca3471_btcv1e.png)
其他設定
於左側目錄欄點擊「設定」
![](https://storage.crisp.chat/users/helpdesk/website/3a3d97646c5bc000/c6698de6-e6c8-4793-b649-7b63aa_d0gsxn.png)
設定官網的標題和文字字體
![](https://storage.crisp.chat/users/helpdesk/website/78f068c652b9c800/5572eefc-e891-499b-9a15-48bf6c_1x8fyrd.png)
調整內文、背景、按鈕、按鈕字色和外框的顏色
![](https://storage.crisp.chat/users/helpdesk/website/be99979a89ada80/f0f99682-b42a-4400-aeb8-8f1fd8_12v1gd3.png)
你可以上傳官網的背景圖
![](https://storage.crisp.chat/users/helpdesk/website/e128d5aec0cac800/2f530517-5232-41e9-a777-4d96ee_2qwimi.png)
上傳「網站圖示」,瀏覽器分頁圖示將會顯示你的官網圖示
![](https://storage.crisp.chat/users/helpdesk/website/95a425ce2bf1e000/e4371d49-09ab-4e26-a211-8c19a1_131jelk.png)
調整版面最大寬度
![](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)
選擇是否使用原始畫質圖片和上傳連結預覽圖
![](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)
上傳結帳頁面的 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)
💡 優化通告:
商品規格售完顯示上有優化,若規格售完後會呈現淺色
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_13evxla.png)
此顯示僅支援 Aroma 與其後發佈之主題
若你在 2023 年 5 月 9 號前就已經安裝主題,你可以選擇以下方法:
(1)重新安裝主題 ( 注意:重新安裝主題將需要重新設計佈景主題或自行編輯的原始碼,建議你可以慎重考量)
(2)重設以下原始碼文件夾 ( 注意:若你曾經有在以下文件夾編輯原始碼,重設原始碼文件後,所有曾經編輯的原始碼將會消失)
main-product.liquid
global.js
section-main-product.css
featured-product.liquid (如有這個文件夾)
section-featured-product.css (如有這個文件夾)
佈景主題 Koji 在 2023 年 5 月 24 號已經上線,此主題可以直接在商品分類或商品頁面顯示商品規格圖片,只要商品有設定商品規格圖片,就會自動顯示,如圖:
![](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/
佈景主題 Muse 在 2023 年 6 月 12 號已經上線,此主題可以讓主選單透明化、影片自動循環、商品分類或商品頁面顯示商品規格圖片
你也可以參考佈景主題 Muse 的預覽: https://musedemo.easy.co/
相關文章:
【品牌官網】如何編輯佈景主題(Candy 或之前發佈之主題)
更新時間: 26/06/2024
感謝!