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

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

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

新版主題

舊版主題

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

設定佈景主題

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

1. EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 更多主題 → 即可看到全部的佈景主題套版
   
   
   
   
   
   
   
2. 選擇佈景主題後 → 點擊「立即安裝」
   
   
   

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

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

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

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

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

頂端主選單編輯

1. 點擊「頂端主選單」
   
   
   
   
   
2. 此欄位能編輯上品牌 Logo，並調整顯示位置、Logo 寬度、主選單底色和文字顏色、主選單是否固定在上方
   
   
   
   
   
   
   

主頁

官網主頁佈局排版

1. 設定官網首頁的佈景和排版
   
   
   
2. 剛安裝佈景主題時，會有預設的首頁排版，如果你想要移除區塊，可以點擊進該區塊，點擊「移除此區塊」
   
   
   
3. 若想要新增更多區塊可以點擊「新增區塊」，並選擇你要的排版佈局
   
   
   
   
   
4. 只需要以拖曳的方式即可進行首頁的排版
   
   
   

各版型區塊介紹

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

• 輪播圖片 - 用於顯示多張圖片的輪播幻燈片
  
• 目錄列表 - 在首頁顯示不同的商品分類商品
  
  
  
• 精選商品目錄 - 顯示精選或推薦的分類商品
  
• 商店敘述 - 顯示從品牌官網 → 官網分頁 → 首頁的內容
  
• 橫幅圖片 - 顯示單一圖片及內容（建議使用比例 1:1 或四方形的圖片）
  
• 多元格框 - 以格框的方式顯示圖片、內容和按鈕
  
  
  
• 精選區塊 - 以純文字文字和按鈕方式顯示內容與敘述
  
• 影片 - 以 YouTube 連結方式在首頁新增新增影片
  
• 文字與圖片 - 結合文字與圖片，有三種顯示方式
  
  
  
• 促銷版位 - 用於告示目前進行中的優惠活動，有兩種顯示方式
  
  
  
• 部落格：在官網首頁顯示精選部落格文章
  
• 特色商品：顯示單一亮點推薦商品
  

商品分類頁面

設定商品分類頁

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

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

購物車頁面

設定購物車頁面

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

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

商品頁面

設定產品頁面

1. 點擊「產品頁面」→ 商品
   
   
   
2. 設定商品頁面的圖標與文字
   

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

頁尾設定

1. 於左側目錄欄點擊「頁尾」
   
   
   
2. 將社群媒體連結放到對應的欄位裡，若不想顯示該社群留空即可，前台便不會顯示該社群的圖示
   
   
   
3. 你可以勾選網店有提供的支付方式，讓客戶知道可以以什麼方式進行付款
   
   
   
4. 編輯「快速連結」（頁尾導航列）的標題文字
   
   
   
5. 編輯「關於我們」的標題和文字
   
   
   
6. 編輯頁尾區塊的背景色、標題字色、內文字色
   
   
   
   
   

其他設定

1. 於左側目錄欄點擊「設定」
   
   
   
   
   
2. 設定官網的標題和文字字體
   
   
   
3. 調整內文、背景、按鈕、按鈕字色和外框的顏色
   
   
   
4. 你可以上傳官網的背景圖
   
   
   
5. 上傳「網站圖示」，瀏覽器分頁圖示將會顯示你的官網圖示
   
   
   
6. 調整版面最大寬度
   
   
   
   
   
   
   
7. 選擇是否使用原始畫質圖片和上傳連結預覽圖
   
   
   
   
   
   
   
8. 上傳結帳頁面的 Logo 圖片
   
   
   

點擊儲存，完成！

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

💡 優化通告：

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

• 此顯示僅支援 Aroma 與其後發佈之主題
• 若你在 2023 年 5 月 9 號前就已經安裝主題，你可以選擇以下方法：

（1）重新安裝主題 （ 注意：重新安裝主題將需要重新設計佈景主題或自行編輯的原始碼，建議你可以慎重考量）

（2）重設以下原始碼文件夾 （ 注意：若你曾經有在以下文件夾編輯原始碼，重設原始碼文件後，所有曾經編輯的原始碼將會消失）

• main-product.liquid
• global.js
• section-main-product.css
• featured-product.liquid （如有這個文件夾）
• section-featured-product.css （如有這個文件夾）

2. 佈景主題 Koji 在 2023 年 5 月 24 號已經上線，此主題可以直接在商品分類或商品頁面顯示商品規格圖片，只要商品有設定商品規格圖片，就會自動顯示，如圖：

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

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

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

相關文章：

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

Updated on: 15/01/2024