本文僅介紹 Ochre、Hopscotch、Nomly & Velora 主題的更新內容。

如需了解其他功能及設定方式，請參考：【品牌官網】如何編輯佈景主題（Aroma 至 Essence 系列主題）

• Ochre 主題預覽：https://ochredemo.easy.co/
• Hopscotch 主題預覽： https://hopscotchdemo.easy.co/
• Nomly 主題預覽： https://nomlydemo.easy.co/
• Velora 主題預覽：https://velorademo.easy.co/

目錄：

▶️主題新增功能與優化

▶️頂端主選單

▶️首頁內容區塊

▶️頁尾設定

▶️切換頁面設定

主題新增功能與優化

除了首頁區塊外，新主題也提供以下功能，讓你可以更靈活地設計品牌官網：

• 頂端主選單：支援大型選單（Mega Menu）、促銷卡片、固定頁首及側邊選單。
• 搜尋功能：可自訂搜尋欄提示文字及熱門搜尋關鍵字。
• 購物車：支援側邊滑出式購物車，方便顧客快速查看購物車內容。
• 商品卡片：支援商品規格色票及快速加入購物車功能。
• 商品詳情頁：支援圖片放大、圖片顯示方式調整、商品亮點及相關商品設定。
• 商品分類頁：可調整商品篩選、排序及不同裝置的商品顯示欄數。
• 頁尾：支援電子報訂閱、Instagram 圖片、付款方式圖示及社群連結。
• 區塊設計：可獨立設定各區塊的背景與文字顏色，部分區塊也支援背景圖片。

步驟一：頂端主選單

1. 你可以在此設定頂端主選單的背景顏色、文字顏色、網站 Logo 及 Logo 顯示大小，讓選單更符合品牌風格。

2. 你可以選擇頂端主選單的固定方式：

• 一律固定：瀏覽頁面時，選單會持續顯示在畫面頂端。
• 向上捲動時固定：當顧客向上捲動頁面時，選單才會顯示。

3. 將超出顯示範圍的選單項目收合至側邊欄

勾選後，當頂端主選單的項目字數過多，顧客可以點擊選單圖示展開查看。

4. 大型選單促銷卡片

你可以在頂端主選單的大型選單中，新增最多 2 張促銷卡片，並分別設定圖片、標籤、標題及連結，讓顧客在展開選單時，也能看到推薦商品或促銷內容。

注意： 此功能僅適用於導航列中帶有鎖頭圖示的預設【所有商品】選單，其他自行新增的選單不支援顯示促銷卡片。

5. 搜尋欄位提示文字

你可以自訂頂端主選單中搜尋欄位的提示文字，例如「搜尋商品」或「你正在尋找什麼？」，引導顧客搜尋商品。

6. 熱門搜尋標題與關鍵字

你可以自訂熱門搜尋的標題及關鍵字，讓顧客快速找到常用的搜尋項目。

• 熱門搜尋標題：設定顯示的標題，例如「熱門搜尋」。
• 熱門搜尋關鍵字：輸入推薦的搜尋關鍵字，多個關鍵字請以逗號分隔。

注意：此功能僅適用於手機版。

7. 當首頁的第一個區塊為【輪播圖】時，滑動頁面時，頂端主選單將呈現以下顯示效果：

步驟二：首頁內容區塊

1. 你可以透過主題編輯器新增不同區塊，自由調整品牌官網的首頁內容及版面配置。

(最多可新增 15 個區塊)

以下為目前主題提供的區塊，依照後台顯示順序排列：

2. 以下將說明每個區塊的設定和設定效果

🟠 前後對比

透過【前後對比】區塊，展示兩張圖片的差異，顧客可以左右拖曳分隔線，查看使用前後的效果。

可設定內容：

• 之前的圖片：上傳對比前的圖片
• 之前的標籤：設定圖片標籤文字，例如 Before
• 之後的圖片：上傳對比後的圖片
• 之後的標籤：設定圖片標籤文字，例如 After

顧客可在品牌官網拖曳分隔線，比較兩張圖片的差異。

🟠商品組合

你可以透過【商品組合】區塊，在首頁展示多個商品，搭配模特圖片，讓顧客直接點擊圖片上的商品標記，查看對應商品並加入購物車。

• 使用主題顏色：勾選後，套用主題預設的顏色設定。
• 背景顏色：自訂區塊的背景顏色。
• 文字顏色：自訂區塊內的文字顏色。
• 副標題：設定區塊上方的簡短文字，例如「Bundle & Save」。
• 標題：設定區塊的主要標題，例如「Buy 2 Get 10% Off」。
• 橫幅圖片：上傳用於展示商品搭配的圖片。
• 商品：新增要展示的商品，並在圖片上顯示對應的商品標記，讓顧客查看及選購。

💡 小提醒：

此區塊主要用於展示商品搭配，標題中的優惠資訊不代表系統會自動套用折扣。如需提供組合購買優惠，請另外設定對應的促銷優惠。

🟠商品目錄焦點

你可以透過圖片搭配文字，重點展示指定的商品分類，並設定標題、說明及連結，引導顧客瀏覽相關商品。

此區塊支援新增多個【焦點】，並可自訂背景顏色及文字顏色。

🟠商品目錄卡片

你可以透過圖片卡片展示不同的商品分類，並設定各張卡片的圖片、標題及連結，方便顧客快速瀏覽商品。

此區塊支援新增多張卡片（最多 10 個），顧客可透過左右切換查看更多內容，也可以自訂背景顏色及文字顏色。

🟠熱門商品

你可以選擇多個商品作為重點推薦，搭配圖片、標題及說明文字展示，吸引顧客瀏覽及選購。

此區塊支援切換展示不同商品（最多 8 個），並可自訂背景顏色及文字顏色。

🟠品牌跑馬燈

你可以透過持續捲動的文字跑馬燈，展示品牌特色、促銷資訊或重要公告。

此區塊支援新增多組文字，並可自訂背景顏色、文字顏色及跑馬燈背景顏色。

🟠 購物跑馬燈

透過【購物跑馬燈】區塊，以橫向滾動方式展示圖片、文字及按鈕，適合用於商品推薦、熱門分類或促銷活動。

可設定內容：

• 項目：新增多個跑馬燈項目
• 圖示圖片：為每個項目上傳圖片
• 文字：設定展示的文字內容
• 按鈕文字：設定按鈕顯示的文字
• 按鈕連結：設定點擊按鈕後導向的頁面

顧客可點擊跑馬燈中的按鈕，前往指定頁面。

🟠品牌故事

你可以透過圖片搭配文字，介紹品牌理念、創立故事或品牌特色，讓顧客更了解你的品牌。

此區塊支援自訂副標題、標題、說明文字、按鈕及連結，也可以調整背景顏色與文字顏色。

🟠【商品分頁】區塊

你可以在同一個區塊中展示不同的商品分類，讓顧客透過點擊分頁標籤，快速切換並瀏覽各分類的商品。

新增分頁：點擊【新增欄位】，新增要展示的商品分類。

調整順序：拖曳左側圖示，調整商品分類的顯示順序。

背景顏色／文字顏色：可使用主題顏色，或自行設定顏色。

標題：設定顯示於商品區塊上方的標題。

🟠促銷捲動卡片

你可以透過橫向捲動的卡片，展示促銷活動、推薦商品或品牌資訊。

此區塊支援新增多張卡片，並可分別設定圖片、標籤、標題及說明文字，讓顧客左右捲動查看更多內容。

🟠促銷倒數

你可以透過倒數計時搭配商品圖片及促銷資訊，營造限時優惠的氛圍，吸引顧客參與活動。

此區塊支援設定標題、說明文字、按鈕連結及倒數結束日期，也可以自訂活動結束後的提示文字，以及是否重複倒數（例如每天）。

🟠層疊捲動卡片

你可以透過層疊式卡片展示商品圖片及品牌內容，當顧客向下捲動頁面時，卡片會呈現層疊切換的視覺效果。

此區塊支援自訂標題、文字標籤、按鈕連結及卡片顏色。

🟠捲動卡片

你可以透過橫向捲動的卡片展示商品、品牌特色或其他推薦內容，讓顧客隨著頁面捲動查看更多資訊。

此區塊支援設定卡片圖片、標題及文字內容，最多可新增 12 張卡片。

🟠 服務亮點

你可以透過圖示搭配文字，展示品牌提供的服務特色，例如免運優惠、退換貨政策、安全付款及客服資訊。

此區塊支援新增多個項目，並可分別設定圖示、標題及說明文字。

🟠 情境選購

你可以透過情境圖片搭配商品標記，展示不同商品的搭配方式，讓顧客點擊圖片中的商品，快速查看及選購相關商品。

🟠 輪播圖

你可以透過滿版輪播圖片，展示品牌形象、新品上市或促銷活動，吸引顧客注意。

此區塊支援新增多張輪播圖片（最多 12 張），並可分別設定副標題、標題、按鈕文字及連結，也可以設定自動播放。

🟠 步驟指南

你可以透過圖片搭配文字，以步驟方式介紹商品使用方法、穿搭建議或服務流程，讓顧客更容易了解相關內容。

此區塊最多可新增 4 個步驟，並可分別設定圖片、標題及說明文字。

🟠 分欄顧客好評輪播

透過【分欄顧客好評輪播】區塊，以左右分屏的方式展示圖片與文字內容，並可切換不同的輪播項目，適合用於商品介紹或品牌故事。

可設定內容：

• 輪播項目：新增及編輯不同的圖文內容
• 圖片：設定每個輪播項目的展示圖片
• 文字內容：設定標題及說明文字
• 背景顏色：調整文字區域的背景顏色
• 文字顏色：調整文字顯示顏色
• 按鈕：設定按鈕文字及連結
• 圖片位置：調整圖片的顯示位置
• 自動切換圖片：設定是否自動輪播

🟠 顧客好評

你可以透過顧客評價搭配圖片及文字，以輪播方式展示顧客的使用心得，提升品牌信任感。

此區塊最多可新增 12 則顧客好評，並可分別設定評價內容、圖片及商品連結，讓顧客點擊後前往對應的商品頁面。

步驟三：頁尾設定

1. 你可以在頁尾新增不同類型的欄位，展示品牌資訊、選單連結及社群媒體等內容。

點擊【新增欄位】，可選擇以下 4 種類型（最多可新增 12 個欄位）：

• 訂閱表單：讓顧客填寫電子郵件，訂閱品牌最新消息。
• 選單欄：顯示指定的選單，方便顧客快速前往其他頁面。
• 社群媒體圖庫：展示品牌的社群媒體連結。
• 文字欄：新增自訂文字內容，例如品牌介紹或聯絡資訊。

你也可以拖曳左側圖示，自由調整各欄位的顯示順序。

🟠訂閱表單

你可以在頁尾新增【訂閱表單】，讓顧客輸入電子郵件後，前往會員註冊頁面完成註冊。

• 欄位寬度：調整訂閱表單在頁尾的顯示寬度。
• 標題：設定訂閱表單的標題文字。
• 電子郵件欄位提示文字：設定電子郵件輸入框內的提示文字。
• 表單下方的說明：設定顯示於表單下方的說明文字，例如服務條款或隱私權政策，支援 HTML 超連結。

🟠 選單欄

你可以在頁尾新增【選單欄】，展示不同的導航選單，方便顧客快速前往品牌官網的其他頁面。

• 欄位寬度：調整選單欄在頁尾的顯示寬度。
• 標題：設定選單欄的標題文字。
• 選單：選擇要在頁尾顯示的導航選單，包括：
• • 主目錄
  • 頁尾（快速連結）
  • 條款
  • 帳號欄位（登入前）
  • 帳號欄位（登入後）

💡 小提醒：

如果選擇的導航選單包含子導航列，頁尾只會顯示該選單的第一層項目，不會展開顯示子導航列。

因此，系統也支援選擇含有子導航列的母導航列，讓你可以直接在頁尾展示該母導航列下的子項目。

你也可以前往【導航列設定】，管理各個選單的內容。

🟠社群媒體圖庫

你可以在頁尾新增【社群媒體圖庫】，展示品牌的圖片及 Instagram 連結，讓顧客快速前往你的社群媒體頁面。

• 欄位寬度：調整社群媒體圖庫在頁尾的顯示寬度。
• 標題：設定圖庫上方的標題文字。
• 欄數：設定每列顯示的圖片數量。
• 圖說：設定顯示於圖片下方的說明文字。
• 個人頁面連結：填入 Instagram 或其他社群媒體的網址。
• 圖片：自行上傳要展示的圖片。

💡 小提醒：

圖片需要自行上傳，此區塊不會自動同步 Instagram 的貼文內容。

🟠文字欄

你可以在頁尾新增【文字欄】，展示品牌介紹、聯絡資訊或其他自訂文字內容。

• 欄位寬度：調整文字欄在頁尾的顯示寬度。
• 標題：設定文字欄上方的標題文字。
• 文字：輸入要顯示的內容，例如 About Us（關於我們）、品牌故事或其他補充資訊。

2. 社群媒體連結

你可以在頁尾設定社群媒體連結，讓顧客透過點擊社群圖示，快速前往品牌的社群媒體頁面。

• 顯示社群圖示：勾選後，頁尾將顯示已設定連結的社群媒體圖示。
• 社群媒體連結：填入對應的社群媒體網址，支援以下平台：
• • Instagram
  • TikTok
  • Facebook
  • X
  • Pinterest
  • YouTube
  • WhatsApp

💡 小提醒：

只有填入連結的社群媒體才會顯示對應圖示，未填寫的則不會顯示。

步驟四：切換頁面設定

1. 切換頁面設定

在主題編輯器右上方，你可以透過下拉選單切換不同頁面，分別調整各頁面的顯示內容及版面配置。

目前支援以下頁面：

• 主頁
• 商品分類頁面
• 購物車頁面
• 商品頁面

本文將以【產品頁面】為主，說明新的相關區塊的設定方式。

如需了解其他頁面的設定方式，可參考：【Aroma 至 Essence 系列主題】

2. 產品頁面－圖示與標題

你可以在【商品頁面】新增【圖示與標題】區塊，透過圖示搭配簡短文字，向顧客展示商品特色或服務資訊，例如快速出貨、品質保證及安全付款等。

• 新增區塊：可新增多個【圖示與標題】區塊，展示不同資訊。
• 調整順序：拖曳左側圖示，自由調整各區塊在商品頁面的顯示順序。

💡 小提醒：

此區塊顯示於商品頁面，並非針對個別商品設定，因此會套用至所有商品頁面。

3. 說明文字

你可以在【說明文字】設定商品描述區塊的標題，讓顧客更清楚了解商品資訊。

• 標題：輸入想顯示的標題，例如「商品描述」、「商品詳情」或「商品介紹」。
• 商品描述內容會顯示在標題下方，並可透過點擊標題旁的箭頭展開或收合。

💡 小提醒：

此處僅能修改商品描述區塊的標題。如需修改實際的商品描述內容，請前往 EasyStore 後台的【商品】編輯對應商品。

更新時間： 14/10/2026