【品牌官網】如何編輯佈景主題（Aroma 與其後發佈之主題）

此文章將講解_ Aroma 或其後發佈之主題，如果你想要了解 Candy 或之前發佈之主題，可以移步到此文章： 【品牌官網】如何編輯佈景主題（Candy 或之前發佈之主題）

EasyStore 目前可以分為兩類型佈景主題：新版和舊版。新版和舊版佈景主題的設定介面上會有不同，分別為 Aroma 或其後發佈之主題 和 Candy 或之前發佈之主題，簡稱新版主題、舊版主題。

新版主題

舊版主題

你可以參考下圖有關新版主題的功能差異：

設定佈景主題

步驟一：選擇與安裝佈景主題

EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 更多主題 → 即可看到全部的佈景主題套版







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

步驟二：進入佈景主題設定介面

回到佈景主題頁 → 點擊「佈景主題設定」
（後文說明和步驟會以 Kate 佈景主題為例子）




佈景主題介面介紹
（1）主要設定欄位都會在左側目錄欄



（2）可客製化設定不同頁面，在 Kate 主題中可設置主頁、商品分類頁、購物車、產品頁面




（3）可切換不同螢幕的預覽，分別是：電腦瀏覽器、平板電腦、手機

頂端主選單編輯

點擊「頂端主選單」





此欄位能編輯上品牌 Logo，並調整顯示位置、Logo 寬度、主選單底色和文字顏色、主選單是否固定在上方

主頁

官網主頁佈局排版

設定官網首頁的佈景和排版



剛安裝佈景主題時，會有預設的首頁排版，如果你想要移除區塊，可以點擊進該區塊，點擊「移除此區塊」



若想要新增更多區塊可以點擊「新增區塊」，並選擇你要的排版佈局





只需要以拖曳的方式即可進行首頁的排版

各版型區塊介紹

這裡為大家介紹新版主題的版型區塊，區塊的選項會根據不同佈景主題而異

輪播圖片 - 用於顯示多張圖片的輪播幻燈片

目錄列表 - 在首頁顯示不同的商品分類商品



精選商品目錄 - 顯示精選或推薦的分類商品

商店敘述 - 顯示從品牌官網 → 官網分頁 → 首頁的內容

橫幅圖片 - 顯示單一圖片及內容（建議使用比例 1:1 或四方形的圖片）

多元格框 - 以格框的方式顯示圖片、內容和按鈕



精選區塊 - 以純文字文字和按鈕方式顯示內容與敘述

影片 - 以 YouTube 連結方式在首頁新增新增影片

文字與圖片 - 結合文字與圖片，有三種顯示方式



促銷版位 - 用於告示目前進行中的優惠活動，有兩種顯示方式



部落格：在官網首頁顯示精選部落格文章

特色商品：顯示單一亮點推薦商品

商品分類頁面

設定商品分類頁

點擊「商品分類頁」→ 商品目錄







可設定頁面的每行商品顯示數量、圖片比例、加入購物車按鈕、商品第二張圖片、商品資料和商品背景顏色

購物車頁面

設定購物車頁面

點擊「購物車頁面」→ 推薦商品區塊




可設定標題、選擇顯示在購物車頁面下方的商品目錄、每行顯示的商品數量、商品顯示總數、圖片比例、商品第二張圖片、加入購物車按鈕、商品資料、手機版圖片滑動功能和商品背景顏色

商品頁面

設定產品頁面

點擊「產品頁面」→ 商品



設定商品頁面的圖標與文字



設定商品是否顯示品牌、選擇規格後是否直接顯示規格圖片、規格顯示方式（標籤或下拉式）和商品背景顏色

頁尾設定

於左側目錄欄點擊「頁尾」



將社群媒體連結放到對應的欄位裡，若不想顯示該社群留空即可，前台便不會顯示該社群的圖示



你可以勾選網店有提供的支付方式，讓客戶知道可以以什麼方式進行付款



編輯「快速連結」（頁尾導航列）的標題文字



編輯「關於我們」的標題和文字



編輯頁尾區塊的背景色、標題字色、內文字色

其他設定

於左側目錄欄點擊「設定」





設定官網的標題和文字字體



調整內文、背景、按鈕、按鈕字色和外框的顏色



你可以上傳官網的背景圖



上傳「網站圖示」，瀏覽器分頁圖示將會顯示你的官網圖示



調整版面最大寬度







選擇是否使用原始畫質圖片和上傳連結預覽圖







上傳結帳頁面的 Logo 圖片

點擊儲存，完成！

💡你可回到上一頁點擊「瀏覽官網」查看你的實際官網前台



💡 優化通告：

商品規格售完顯示上有優化，若規格售完後會呈現淺色



此顯示僅支援 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 號已經上線，此主題可以直接在商品分類或商品頁面顯示商品規格圖片，只要商品有設定商品規格圖片，就會自動顯示，如圖：







你也可以參考佈景主題 Koji 的預覽： https://kojidemo.easy.co/

佈景主題 Muse 在 2023 年 6 月 12 號已經上線，此主題可以讓主選單透明化、影片自動循環、商品分類或商品頁面顯示商品規格圖片

你也可以參考佈景主題 Muse 的預覽： https://musedemo.easy.co/

相關文章：

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

Updated on: 15/01/2024