> ## 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). # 【佈景主題】Ochre、Hopscotch、Nomly & Velora 主題教學 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/6ygp55so5ywo6yoo5pa55qgi_77id79.png) 本文僅介紹 **Ochre、Hopscotch、Nomly & Velora 主題的更新內容**。 如需了解其他功能及設定方式，請參考：[【品牌官網】如何編輯佈景主題（Aroma 至 Essence 系列主題）](https://support.easystore.co/zh-tw/article/aroma-1bwe7z6/) * Ochre 主題預覽：https://ochredemo.easy.co/ * Hopscotch 主題預覽： https://hopscotchdemo.easy.co/ * Nomly 主題預覽： https://nomlydemo.easy.co/ * Velora 主題預覽：https://velorademo.easy.co/ ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_16xwi0w.png) --- # ${color}[#831111](目錄：) ### [▶️主題新增功能與優化](#2-5li76agm5paw5ake5yqf6io96iih5ysq5yyw) ### [▶️頂端主選單](#3-5q2l6amf5lia77ya6acc56uv5li76yg45zau) ### [▶️首頁內容區塊](#3-5q2l6amf5lqm77ya6aaw6acb5ywn5a655y2a5agk) ### [▶️頁尾設定](#3-5q2l6amf5lij77ya6acb5bc6kit5a6a) ### [▶️切換頁面設定](#3-5q2l6amf5zub77ya5yih5ob6acb6z2i6kit5a6a) --- ## 主題新增功能與優化 除了首頁區塊外，新主題也提供以下功能，讓你可以更靈活地設計品牌官網： - **頂端主選單**：支援大型選單（Mega Menu）、促銷卡片、固定頁首及側邊選單。 - **搜尋功能**：可自訂搜尋欄提示文字及熱門搜尋關鍵字。 - **購物車**：支援側邊滑出式購物車，方便顧客快速查看購物車內容。 - **商品卡片**：支援商品規格色票及快速加入購物車功能。 - **商品詳情頁**：支援圖片放大、圖片顯示方式調整、商品亮點及相關商品設定。 - **商品分類頁**：可調整商品篩選、排序及不同裝置的商品顯示欄數。 - **頁尾**：支援電子報訂閱、Instagram 圖片、付款方式圖示及社群連結。 - **區塊設計**：可獨立設定各區塊的背景與文字顏色，部分區塊也支援背景圖片。 --- ### 步驟一：頂端主選單 1. 你可以在此設定頂端主選單的背景顏色、文字顏色、網站 Logo 及 Logo 顯示大小，讓選單更符合品牌風格。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1av5bpa.png) 2. 你可以選擇頂端主選單的固定方式： - **一律固定**：瀏覽頁面時，選單會持續顯示在畫面頂端。 - **向上捲動時固定**：當顧客向上捲動頁面時，選單才會顯示。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_9y2923.png) 3. 將超出顯示範圍的選單項目收合至側邊欄 勾選後，當頂端主選單的項目字數過多，顧客可以點擊選單圖示展開查看。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_kcpmyt.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_60dgka.png) 4. 大型選單促銷卡片 你可以在頂端主選單的大型選單中，新增最多 **2 張促銷卡片**，並分別設定圖片、標籤、標題及連結，讓顧客在展開選單時，也能看到推薦商品或促銷內容。 **注意：** 此功能僅適用於導航列中**帶有鎖頭圖示的預設【所有商品】選單**，其他自行新增的選單不支援顯示促銷卡片。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1ryiyz4.png) 5. 搜尋欄位提示文字 你可以自訂頂端主選單中搜尋欄位的提示文字，例如「搜尋商品」或「你正在尋找什麼？」，引導顧客搜尋商品。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_d6b32t.png) 6. 熱門搜尋標題與關鍵字 你可以自訂熱門搜尋的標題及關鍵字，讓顧客快速找到常用的搜尋項目。 - **熱門搜尋標題**：設定顯示的標題，例如「熱門搜尋」。 - **熱門搜尋關鍵字**：輸入推薦的搜尋關鍵字，多個關鍵字請以逗號分隔。 **注意：此功能僅適用於手機版。** ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_q1k154.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1ufhwva.png) 7. 當首頁的第一個區塊為【輪播圖】時，滑動頁面時，頂端主選單將呈現以下顯示效果： ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/hopscotch-demo_1c0e5jx.gif) ### 步驟二：首頁內容區塊 1. 你可以透過主題編輯器新增不同區塊，自由調整品牌官網的首頁內容及版面配置。 (最多可新增 15 個區塊) 以下為目前主題提供的區塊，依照後台顯示順序排列： | 區塊名稱 | 功能說明 | | ---- | ---- | | 前後對比 | 透過左右拖曳分隔線，比較兩張圖片的差異。 | | 商品組合 | 透過圖片展示組合商品，並提供可互動的商品標記。 | | 商品目錄焦點 | 重點展示指定商品分類，搭配文字及圖片介紹。 | | 商品目錄卡片 | 以卡片方式展示多個商品分類，支援切換分類。 | | 熱門商品 | 展示指定商品，並可另外設定手機版圖片。 | | 品牌跑馬燈 | 以捲動方式展示品牌 Logo 或文字。 | | 購物跑馬燈 | 以捲動方式展示文字或購物相關資訊。 | | 品牌故事 | 搭配圖片及文字介紹品牌理念與故事。 | | 商品分頁 | 讓顧客透過分頁切換不同商品分類的商品。 | | 促銷捲動卡片 | 以輪播方式展示促銷資訊，可設定標籤、標題及連結。 | | 促銷倒數 | 展示促銷活動倒數計時，可設定結束日期及活動結束後的提示文字。 | | 層疊捲動卡片 | 透過層疊式卡片呈現商品內容，增加頁面互動效果。 | | 捲動卡片 | 隨頁面捲動逐步呈現商品或標籤內容。 | | 服務亮點 | 以圖示及文字展示配送、退換貨、客服等服務資訊。 | | 情景選購 | 透過情境圖片搭配可選購的商品卡片，展示商品搭配。 | | 輪播圖 | 以滿版輪播圖片展示內容，支援自動播放及各張圖片的獨立文字設定。 | | 分欄顧客好評輪播 | 以分欄輪播方式展示顧客評價及推薦內容。 | | 步驟指南 | 以編號步驟介紹商品的穿搭或使用方式。 | | 顧客好評 | 透過輪播方式展示顧客評價及推薦內容。 | ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_h9jne6.png) 2. 以下將說明每個區塊的設定和設定效果 ### 🟠 前後對比 透過【前後對比】區塊，展示兩張圖片的差異，顧客可以左右拖曳分隔線，查看使用前後的效果。 **可設定內容：** - **之前的圖片**：上傳對比前的圖片 - **之前的標籤**：設定圖片標籤文字，例如 Before - **之後的圖片**：上傳對比後的圖片 - **之後的標籤**：設定圖片標籤文字，例如 After 顧客可在品牌官網拖曳分隔線，比較兩張圖片的差異。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/beforeaftercomparison_krnyvd.gif) ### 🟠**商品組合** 你可以透過【商品組合】區塊，在首頁展示多個商品，搭配模特圖片，讓顧客直接點擊圖片上的商品標記，查看對應商品並加入購物車。 - **使用主題顏色**：勾選後，套用主題預設的顏色設定。 - **背景顏色**：自訂區塊的背景顏色。 - **文字顏色**：自訂區塊內的文字顏色。 - **副標題**：設定區塊上方的簡短文字，例如「Bundle & Save」。 - **標題**：設定區塊的主要標題，例如「Buy 2 Get 10% Off」。 - **橫幅圖片**：上傳用於展示商品搭配的圖片。 - **商品**：新增要展示的商品，並在圖片上顯示對應的商品標記，讓顧客查看及選購。 **💡 小提醒：** 此區塊主要用於展示商品搭配，標題中的優惠資訊不代表系統會自動套用折扣。如需提供組合購買優惠，請另外設定對應的促銷優惠。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/themedemocompressed_479def.gif) ### 🟠商品目錄焦點 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/e696b0e4b8bbe9a18ce5b195e7a4ba_1x44kuo.gif) 你可以透過圖片搭配文字，重點展示指定的商品分類，並設定標題、說明及連結，引導顧客瀏覽相關商品。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1vdgbev.png) 此區塊支援新增多個【焦點】，並可自訂背景顏色及文字顏色。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_yvmtwv.png) ### 🟠商品目錄卡片 你可以透過圖片卡片展示不同的商品分類，並設定各張卡片的圖片、標題及連結，方便顧客快速瀏覽商品。 此區塊支援新增多張卡片（最多 10 個），顧客可透過左右切換查看更多內容，也可以自訂背景顏色及文字顏色。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1pa3qes.png) ### 🟠熱門商品 你可以選擇多個商品作為重點推薦，搭配圖片、標題及說明文字展示，吸引顧客瀏覽及選購。 此區塊支援切換展示不同商品（最多 8 個），並可自訂背景顏色及文字顏色。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_a5obe.png) ### 🟠品牌跑馬燈 你可以透過持續捲動的文字跑馬燈，展示品牌特色、促銷資訊或重要公告。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/e59381e7898ce8b791e9a6ace78788_4l472p.gif) 此區塊支援新增多組文字，並可自訂背景顏色、文字顏色及跑馬燈背景顏色。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1t96uz6.png) ### 🟠 購物跑馬燈 透過【購物跑馬燈】區塊，以橫向滾動方式展示圖片、文字及按鈕，適合用於商品推薦、熱門分類或促銷活動。 **可設定內容：** - **項目**：新增多個跑馬燈項目 - **圖示圖片**：為每個項目上傳圖片 - **文字**：設定展示的文字內容 - **按鈕文字**：設定按鈕顯示的文字 - **按鈕連結**：設定點擊按鈕後導向的頁面 顧客可點擊跑馬燈中的按鈕，前往指定頁面。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/shoppingmarquee_jfgrst.gif) ### 🟠品牌故事 你可以透過圖片搭配文字，介紹品牌理念、創立故事或品牌特色，讓顧客更了解你的品牌。 此區塊支援自訂副標題、標題、說明文字、按鈕及連結，也可以調整背景顏色與文字顏色。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1geywv6.png) ### 🟠【商品分頁】區塊 你可以在同一個區塊中展示不同的商品分類，讓顧客透過點擊分頁標籤，快速切換並瀏覽各分類的商品。 新增分頁：點擊【新增欄位】，新增要展示的商品分類。 調整順序：拖曳左側圖示，調整商品分類的顯示順序。 背景顏色／文字顏色：可使用主題顏色，或自行設定顏色。 標題：設定顯示於商品區塊上方的標題。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1bx3k2t.png) ### 🟠促銷捲動卡片 你可以透過橫向捲動的卡片，展示促銷活動、推薦商品或品牌資訊。 此區塊支援新增多張卡片，並可分別設定圖片、標籤、標題及說明文字，讓顧客左右捲動查看更多內容。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_11kkg9a.png) ### 🟠促銷倒數 你可以透過倒數計時搭配商品圖片及促銷資訊，營造限時優惠的氛圍，吸引顧客參與活動。 此區塊支援設定標題、說明文字、按鈕連結及倒數結束日期，也可以自訂活動結束後的提示文字，以及是否重複倒數（例如每天）。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1swcqw1.png) ### 🟠層疊捲動卡片 你可以透過層疊式卡片展示商品圖片及品牌內容，當顧客向下捲動頁面時，卡片會呈現層疊切換的視覺效果。 此區塊支援自訂標題、文字標籤、按鈕連結及卡片顏色。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/5bgk55ak5o2y5yuv5y2h54mhxwjke4_1xzirkg.gif) ### 🟠捲動卡片 你可以透過橫向捲動的卡片展示商品、品牌特色或其他推薦內容，讓顧客隨著頁面捲動查看更多資訊。 此區塊支援設定卡片圖片、標題及文字內容，**最多可新增 12 張卡片**。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/5o2y5yuv5y2h54mhxwjke4rg_1xz69uo.gif) ### 🟠 服務亮點 你可以透過圖示搭配文字，展示品牌提供的服務特色，例如免運優惠、退換貨政策、安全付款及客服資訊。 此區塊支援新增多個項目，並可分別設定圖示、標題及說明文字。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_cmtmd1.png) ### 🟠 情境選購 你可以透過情境圖片搭配商品標記，展示不同商品的搭配方式，讓顧客點擊圖片中的商品，快速查看及選購相關商品。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/5oof5akd6yg46lo8xwjke4rg_wqxu6z.gif) ### 🟠 輪播圖 你可以透過滿版輪播圖片，展示品牌形象、新品上市或促銷活動，吸引顧客注意。 此區塊支援新增多張輪播圖片（最多 12 張），並可分別設定副標題、標題、按鈕文字及連結，也可以設定自動播放。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1v54qqf.png) ### 🟠 步驟指南 你可以透過圖片搭配文字，以步驟方式介紹商品使用方法、穿搭建議或服務流程，讓顧客更容易了解相關內容。 此區塊最多可新增 **4 個步驟**，並可分別設定圖片、標題及說明文字。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/5q2l6amf5oyh5y2xxwjke4rg_gq92bu.gif) ### 🟠 分欄顧客好評輪播 透過【分欄顧客好評輪播】區塊，以左右分屏的方式展示圖片與文字內容，並可切換不同的輪播項目，適合用於商品介紹或品牌故事。 **可設定內容：** - **輪播項目**：新增及編輯不同的圖文內容 - **圖片**：設定每個輪播項目的展示圖片 - **文字內容**：設定標題及說明文字 - **背景顏色**：調整文字區域的背景顏色 - **文字顏色**：調整文字顯示顏色 - **按鈕**：設定按鈕文字及連結 - **圖片位置**：調整圖片的顯示位置 - **自動切換圖片**：設定是否自動輪播 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/featureslideshow_171ajbr.gif) ### 🟠 顧客好評 你可以透過顧客評價搭配圖片及文字，以輪播方式展示顧客的使用心得，提升品牌信任感。 此區塊最多可新增 **12 則顧客好評**，並可分別設定評價內容、圖片及商品連結，讓顧客點擊後前往對應的商品頁面。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/6agn5a6i5aw96kmvxwjke4rg_11w5q3l.gif) --- ### 步驟三：頁尾設定 1. 你可以在頁尾新增不同類型的欄位，展示品牌資訊、選單連結及社群媒體等內容。 點擊【新增欄位】，可選擇以下 4 種類型（最多可新增 12 個欄位）： * 訂閱表單：讓顧客填寫電子郵件，訂閱品牌最新消息。 * 選單欄：顯示指定的選單，方便顧客快速前往其他頁面。 * 社群媒體圖庫：展示品牌的社群媒體連結。 * 文字欄：新增自訂文字內容，例如品牌介紹或聯絡資訊。 你也可以拖曳左側圖示，自由調整各欄位的顯示順序。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_29mq8n.png) ### 🟠**訂閱表單** 你可以在頁尾新增【訂閱表單】，讓顧客輸入電子郵件後，前往會員註冊頁面完成註冊。 - **欄位寬度**：調整訂閱表單在頁尾的顯示寬度。 - **標題**：設定訂閱表單的標題文字。 - **電子郵件欄位提示文字**：設定電子郵件輸入框內的提示文字。 - **表單下方的說明**：設定顯示於表單下方的說明文字，例如服務條款或隱私權政策，支援 HTML 超連結。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_ina0wu.png) ### 🟠 **選單欄** 你可以在頁尾新增【選單欄】，展示不同的導航選單，方便顧客快速前往品牌官網的其他頁面。 - **欄位寬度**：調整選單欄在頁尾的顯示寬度。 - **標題**：設定選單欄的標題文字。 - **選單**：選擇要在頁尾顯示的導航選單，包括： - 主目錄 - 頁尾（快速連結） - 條款 - 帳號欄位（登入前） - 帳號欄位（登入後） **💡 小提醒：** 如果選擇的導航選單包含子導航列，頁尾只會顯示該選單的第一層項目，不會展開顯示子導航列。 因此，系統也支援選擇含有子導航列的母導航列，讓你可以直接在頁尾展示該母導航列下的子項目。 你也可以前往【導航列設定】，管理各個選單的內容。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_16zh5qw.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_oao7p6.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_12og2gw.png) ### 🟠**社群媒體圖庫** 你可以在頁尾新增【社群媒體圖庫】，展示品牌的圖片及 Instagram 連結，讓顧客快速前往你的社群媒體頁面。 - **欄位寬度**：調整社群媒體圖庫在頁尾的顯示寬度。 - **標題**：設定圖庫上方的標題文字。 - **欄數**：設定每列顯示的圖片數量。 - **圖說**：設定顯示於圖片下方的說明文字。 - **個人頁面連結**：填入 Instagram 或其他社群媒體的網址。 - **圖片**：自行上傳要展示的圖片。 **💡 小提醒：** 圖片需要自行上傳，此區塊不會自動同步 Instagram 的貼文內容。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1etzjei.png) ### 🟠**文字欄** 你可以在頁尾新增【文字欄】，展示品牌介紹、聯絡資訊或其他自訂文字內容。 - **欄位寬度**：調整文字欄在頁尾的顯示寬度。 - **標題**：設定文字欄上方的標題文字。 - **文字**：輸入要顯示的內容，例如 About Us（關於我們）、品牌故事或其他補充資訊。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_8tojs0.png) 2. **社群媒體連結** 你可以在頁尾設定社群媒體連結，讓顧客透過點擊社群圖示，快速前往品牌的社群媒體頁面。 - **顯示社群圖示**：勾選後，頁尾將顯示已設定連結的社群媒體圖示。 - **社群媒體連結**：填入對應的社群媒體網址，支援以下平台： - Instagram - TikTok - Facebook - X - Pinterest - YouTube - WhatsApp **💡 小提醒：** 只有填入連結的社群媒體才會顯示對應圖示，未填寫的則不會顯示。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_uvlp6n.png) ### 步驟四：切換頁面設定 1. 切換頁面設定 在主題編輯器右上方，你可以透過下拉選單切換不同頁面，分別調整各頁面的顯示內容及版面配置。 目前支援以下頁面： - 主頁 - 商品分類頁面 - 購物車頁面 - 商品頁面 本文將以【產品頁面】為主，說明新的相關區塊的設定方式。 如需了解其他頁面的設定方式，可參考：[【Aroma 至 Essence 系列主題】](https://support.easystore.co/zh-tw/article/aroma-1bwe7z6/) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1rec1q4.png) 2. **產品頁面－圖示與標題** 你可以在【商品頁面】新增【圖示與標題】區塊，透過圖示搭配簡短文字，向顧客展示商品特色或服務資訊，例如快速出貨、品質保證及安全付款等。 - **新增區塊**：可新增多個【圖示與標題】區塊，展示不同資訊。 - **調整順序**：拖曳左側圖示，自由調整各區塊在商品頁面的顯示順序。 **💡 小提醒：** 此區塊顯示於商品頁面，並非針對個別商品設定，因此會套用至所有商品頁面。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_7tttdj.png) 3. **說明文字** 你可以在【說明文字】設定商品描述區塊的標題，讓顧客更清楚了解商品資訊。 - **標題**：輸入想顯示的標題，例如「商品描述」、「商品詳情」或「商品介紹」。 - 商品描述內容會顯示在標題下方，並可透過點擊標題旁的箭頭展開或收合。 **💡 小提醒：** 此處僅能修改商品描述區塊的標題。如需修改實際的商品描述內容，請前往 EasyStore 後台的【商品】編輯對應商品。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_92frkj.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/productdescriptioncompressed_o45jw7.gif)