佈景主題
【品牌官網】如何編輯佈景主題（Aroma 與其後發佈之主題）
此文章將講解_ Aroma 或其後發佈之主題，如果你想要了解 Candy 或之前發佈之主題，可以移步到此文章： 【品牌官網】如何編輯佈景主題（Candy 或之前發佈之主題） EasyStore 目前可以分為兩類型佈景主題：新版和舊版。新版和舊版佈景主題的設定介面上會有不同，分別為 Aroma 或其後發佈之主題 和 Candy 或之前發佈之主題，簡稱新版主題、舊版主題。 設定佈景主題 頂端主選單編輯 主頁 商品分類頁面 [購物車頁面](#2-瀏覽量高【品牌官網】如何編輯佈景主題（Candy 或之前發佈之主題）
此文章將講解 Candy 或之前發佈之主題，如果你想要了解 Aroma 或其後發佈之主題，請參考此文章： 【品牌官網】如何編輯佈景主題（Aroma 與其後發佈之主題） EasyStore 目前可以分為兩類型佈景主題：新版和舊版。新版和舊版佈景主題的設定介面上會有不同，分別為 Aroma 或其後發佈之主題 和 Candy 或之前發佈之主題，簡稱新版主題、舊版主題。 新版主題 舊版主題  : 1400 x 700px Center content 中心內容 (手機版) : 600 x 800px Featured collection 特色商品目錄: 850 x 850px Testimonial slider 精選推薦輪播:瀏覽量高【品牌官網】導航列設定
導航列設定可以讓你在官網前台新增連結、分頁、商品分類等等的點擊按鈕，並且導向到你設定的頁面，這可以使客戶更清楚的了解到關於網店的相關資訊和內容。 有什麼好處？ 簡易傳遞信息給客戶 客戶可以直接從主頁得到他們想要的資訊 加強商家的聲譽 增加銷售營業額 步驟一：新增導航列 前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 導航列設定 → 新增導航列 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_udgu瀏覽量高【品牌官網】新增與編輯分頁
系統的分頁功能，可以規劃設計各式各樣的版型去自由運用，比如可以用全頁圖片做「新品上市介紹」；或是用文字加圖片做「VIP升級規則」等。 步驟一：新增分頁 前往銷售管道 → 品牌官網 → 官網分頁 → 新增分頁 步驟二：設定分頁內容 選擇分頁範本，若想要空白頁面就選擇範本 1 ![](https://storage.crisp.chat/users/helpdesk/website/4a13a87009d87400/76de962b-20e5-41f8-86d2-b94瀏覽量中等【官網設計】如何編輯優惠圖示及划線的原價？
EasyStore為商家設計優惠圖示，當商家設設定了原價大於售價給特定商品，將自動顯示「優惠」圖示和劃線原價於商品上，讓您的顧客在瀏覽商店時，能更明確的注意到優惠資訊！ 這篇文章將提供一些對於此項目可客製化的編輯方法。 目錄： ▶️優惠圖示顯示條件 ▶️編輯優惠的圖示顏色、字體大小和背景大小 ▶️移除優惠圖示 [▶️編輯划線原價的顏色](#1-57eo6lyv5yis57ea5y6f5yo555qe6瀏覽量中等【官網設計】在頁尾新增聯繫方式
| 僅支援付費方案 Candy 或之前發佈之佈景主題 此教學適用於 Candy 、Wave 、X-force 、Fall 、Maker 等等舊版佈景主題 步驟 一：編輯原始碼 你可以到 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → Layout → theme.liquid 搜尋 <p class="site-footer__links">{{ copyright }}</p> 大約是在176至180行內 然後 上行 添加你的聯繫方式 <p> 聯繫號碼: <br> 客服信箱: </p> 備註：是指空行 步驟二：點擊儲存，完成！ 前台顯示畫面： ![](https://storage.crisp瀏覽量中等【官網設計】如何置入 YouTube 影片以及 Shorts 短影音
此文章將講解如何在官網裡置入 YouTube Shorts 影片以及短影音 🔹 如何置入 YouTube 影片 🔹 如何置入 YouTube Shorts 短影音 如何置入 YouTube 影片 ||| 確認影片瀏覽權限，請務必設定影片為『公開』 **公開：**所有人都能觀看你的影片 **不公開：**知道影片連結的人都能觀看你的影片 **私人：**只有你自己和你選擇的對想可以觀看你的影片 步驟一：點擊【分享】➡️ 複製連結 步驟二：將影片連瀏覽量較少【官網設計】調整商品描述欄的位置（新版佈景主題：Aroma 或其後發佈之佈景主題）
新版主題（Aroma 或其後發佈之佈景主題）的商品描述都會呈現在商品頁面右側（Aroma、Marshmallow、Freshbit 除外），若你想要調整商品描述的位置到商品圖片正下方，你可參考此篇文章的方法。 | EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。 目錄： 🔷設定步驟 🔷設定結果 步驟一：編輯原始碼 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 `main-pro瀏覽量較少【官網設計】新增 Instagram 內嵌程式碼
如果你想在官網內嵌 Instagram 貼文或 Reels ，你可內嵌 Instagram 程式碼 需要使用電腦登入 Instagram 才可以進行操作獲取 Instagram 內嵌程式碼 步驟一：以電腦登入 Instagram 帳號 首先登入電腦版 Instagram → 點擊貼文上的“點狀”按鈕 點擊「內嵌」→ 複製內嵌程式碼 步驟二：貼到 EasyStore 程式碼文件 || 首頁 回到 EasyStore 後台 → 佈景主題設定 →瀏覽量較少【官網設計】如何編輯網店字型（Candy 或之前發佈之佈景主題）
| 此文章僅適用舊版主題（Candy 或之前發佈之佈景主題） 您可透過兩種方式設定網店字型 一、佈景主題內建字型更換 二、修改語法更換其他非內建的字型 一、佈景主題內建字型更換 前往：銷售管道》品牌官網》佈景主題》佈景主題設定》一般設定 2.在「主要字體」 或 「標題字體」裡進行更改。 二、修改語法更換其他非內建的字型 步驟 1 ： 字型選擇 建議您使用Google Fonts網站內提供的字型： Google Fonts 網站 選擇您想使用的字型，您可以參考下面的影片來得到原始碼： 先選擇您要的字型，然後點擊 select style 就會出現該字型的原始碼： 點擊 複瀏覽量較少【官網設計】如何在官網嵌入 Google 預約日曆
預約時間表可協助管理時間空檔，方便客戶、合作夥伴或親友直接在 Google 日曆的個人預約頁面中跟您預約時間。 步驟一：建立 Google 日曆預約時間表 前往 Google 日曆預約時間表 開始使用 → 選擇工作或商業用途 輸入所需資料 於「建立預約頁面」點瀏覽量較少【官網設計】在商品頁面新增 「聯繫我們」按鈕（Contact Form/Contact Form Plus）
此文章將說明如何在商品頁面上，新增「聯繫我們」 的按鈕 （Contact Form/Contact Form Plus） 💡 小提醒 : 你可以根據的喜愛，更改 "Contact Us" 按鈕名稱至其他字 若你不想要點擊按鈕後導向新的頁面，可將 target="_blank" 移除 切记需将 Contact Form 或者 Contact Form Plus 的连结，更换至你自己的连结 除了 Contact Form/Contact Form Plus 連結，你也可以自由放入可導向到聯繫你的連結 Candy 或之前發佈之佈景主題（舊版主題） 步驟一：編輯原始碼 前往 EasyStore後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼 → product.liquid → 於大約第 127 行 → 搜尋 AddToCartText 在指定的地方，貼上以下 Contact Form 代碼。 <a id="contactUsBtn" href="https://yourdomainna瀏覽量較少【官網設計】設定顯示價格但不開放購物車按鈕（Aroma 或其後發佈之佈景主題）
你可以透過 EasyStore 製作商品目錄/內容庫網站，顯示價格但是不開放「購買」或「加入購物車」按鈕 | EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。 步驟一：隱藏網站主選單的「購物車」按鈕 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 header.liquid 文件 → 搜尋 header__icon--cart → 刪除以下代碼 點擊儲存 官網主選單的「購物車」按鈕被隱藏了 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1aw瀏覽量較少【官網設計】編輯子導航列選單字體顏色（ Candy 與之前發佈之佈景主題）
此文章指導商家如何在 Candy 與之前發佈之佈景主題更改子導航列的選單字體顏色 步驟 1 : 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼 → assets → timber.scss 步驟 2 : 位於大約2350 - 2400排 → 尋找 .site-nav__link → 更換 “colour：#000” 至您想要的顏色 💡 小貼士 : 您也可以更換以下設定： font-weight - 字體粗細 normal, bold, bolder, lighter colour - 點擊 這裡 參考顏色代碼 padding size - 填充尺寸瀏覽量較少【官網設計】如何調整商品頁面的商品名稱大小（Aroma 與其後發佈之主題）
| 此文章僅適用於 Aroma 與其後發佈之主題 ||| EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。 此文章將講解如何在 Aroma 與其後發佈之主題裡調整商品頁面裡的商品名稱大小 步驟一：編輯原始碼 EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼 ![](https://stor瀏覽量較少【官網設計】移動商品描述欄的位置（Candy 或之前發佈之佈景主題）
| 此文章僅適用於 Candy 或之前發佈之佈景主題（舊版主題） 商品描述欄的位置都是根據佈景主題的預設展示的。倘若您是使用以下佈景主題，他們的商品描述欄將會展示在左邊商品圖片的下方。其他的舊版主題就是直接展示在右邊的商品價格下方。 此文章主要是想要使用以下佈景主題但是希望商品描述欄展示在右下方的商家。 Candy X-force Lucky Wave Maker Fall Mine Style Happy Kitchen Dreams Bedding The Summer Adventure Camping Flower & Tea House Prisme Inspiration 移動商品描述至右邊「加入購物車」按鈕下 前往 EasyStore 後台 → 品瀏覽量較少【官網設計】更改頁尾「快速鏈結」和「關於我們」字眼 （Candy 或之前發佈之佈景主題）
|| 此文章教學僅適用於 Candy 或之前發佈之佈景主題 在您的網頁頁尾您可以看到「快速鏈結」和「關於我們」字樣： 商家可以自行編輯更改「快速鏈結」和「關於我們」字樣，您可以參考以下操作： 前往「佈景主題設定」》編輯原始碼 進入 theme.liquid 頁面 尋找以下： 快速鏈接 {{ 'layout.footer.linklisttitle' | t }}_ 關注我們 {{ 'layout.footer.socialtitle' | t }}_ 之後只把 layout.footer.linklist_title 或 layout.footer.social_title 換成您想要的標題字 點選儲存 ![](htt瀏覽量較少【官網設計】如何在官網頁尾新增 LINE 聯繫按鈕
這文章主要講解如何在官網頁尾新增 LINE 聯繫按鈕 步驟一：獲得 LINE 加好友連結 前往 LINE 官方後台 → 主頁 → 增加好友工具 選擇「建立按鈕」 複製代碼 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d30瀏覽量較少【官網設計】移除商品圖片放大效果（僅適用於舊版主題）
|| 這文章教學僅適用於舊版主題 - Candy 或之前發佈之主題 在商品頁面上，當鼠標指向商品圖片時，商品圖片會自動放大，商家可以透過以下步驟移除此商品圖片放大效果。 📣注意：更換主題需要重新編輯原始碼。 步驟 1 : 您可以到：銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > templates > product.liquid。 步驟 2 : 在大約第24排，尋找 onmousemove="zoomIn(event)" onmouseout="zoomOut()" ，移除以下原始碼。 步驟 3 : 儲存設定并完成。 😉瀏覽量較少【官網設計】手機網頁分類顯示兩個商品（只限Candy主題）
此篇可以讓你了解到，若使用Candy的佈景主題，如何讓手機版的商品分類頁面呈現，一排並列兩個商品。 修改前為商品分類的排版為單一商品直列。 步驟一：您需要到Easystore後台 → 銷售管道 → 品牌官網 → 編輯原始碼 步驟二：在setting_data.json 尋找 collection_products_list_per_row將數目更改成4. ; （大約 114 行） → 移除 // .inner瀏覽量較少【官網設計】更改商品 '售完' 字樣
每當商品庫存為0時，官網前台便會顯示商品 “售完”。商家可以自行更改商品 “售完” 字樣至 “即將到貨”，“售完補貨中” 等其他字樣。當您設定有 “到貨” 含義的字樣，其實可以更能在您商品到貨/上架前吸引顧客在您官網上注意到該商品。 Aroma 與其後發佈之佈景主題 步驟 1 ：找到以下四個原始碼文件 theme.liquid snippets / product-card.liquid snippets / price.liquid sections / main-product.liquid 步驟 2 ：找到 'products.product.sold_out' 然後換成你想要替代的文字，譬如說 {{ '即將到貨' | t }} ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594瀏覽量較少【官網設計】部分商品不顯示價格與購物車按鈕
你可以設定部分商品不顯示價格與購買按鈕的商品於前台。 目錄： Candy 或之前發佈之佈景主題 Aroma 或其後發佈之佈景主題 Candy 或之前發佈之佈景主題 步驟一：移除商品列表的顯示 前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題設定 → 編輯原始碼 → product-grid-item.liquid → 在 <p class="grid-link__meta" 上方 → 新增 {% if product.price > 0 %} → 之後在 下方新增 {% endif %} 點擊儲存 步驟二：移除商品頁面的顯示 前往 EasyStore 後台 → 銷售管道 → 品牌官網 →瀏覽量較少【功能設定】如何編輯郵件範本
郵件範本可以編輯自動發送給顧客的訊息內容。 🌟 部分郵件範本已經轉移至「提醒與互動模組」，請參考文章： 【顧客經營】提醒與互動模組) 步驟一：前往郵件範本編輯頁面 前往 EasyStore 後台 → 設定 → 郵件範本 步驟二：選擇郵件範本進行編輯 *點擊瀏覽量較少【官網設計】設定已上架商品的販售時間
這篇文章主要講解指定商品分類已經開放販售，到了指定時間自動隱藏指定商品分類對的購物車按鈕並不開放售賣，可是商品仍然顯示在官網；或是指定商品分類在上架商品後先隱藏購物車不開放販售，到了指定時間自動為指定商品分類開放購物車按鈕。 | 此功能非正式開發功能，EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必先進行測試、慎重考慮及深入評估。 || 此文章僅適用於新版主題（Aroma 或其後發佈之佈景主題） 在這篇文章裡： [注意事項](https://support.easystore.co/zh-tw/article/44cq5a6y57ay6kit6kii44cr6kit5a6a5bey5l瀏覽量較少【官網設計】圖片自動優化
為了協助商家優化前台網頁瀏覽速度和優化客戶瀏覽官網圖片的用戶體驗，在後台商家所上傳的所有圖片，我們都會將圖片尺寸與格式進行壓縮并轉換為在我們平台上使用最優化版的圖片尺寸與圖片質量。 圖片自動優化好處 ** 商家所有上傳至EasyStore 後台的圖片均已優化為較小的圖片尺寸。這意味著商店將在圖片加載時間上節省 40％的時間，同時頁面瀏覽速度將會加快。若商店在先前已上傳非常大的圖片格式，將會察覺到網頁瀏覽速度改進。 **以下是具有較大圖片格式的商店的Google PageSpeed Index的前後對比： ** 優化前網頁速度測試  隱藏商品頁面的加入購物車按鈕 隱藏商品頁面的商品數量選擇按鈕 隱藏立即購買按鈕在商品頁面 1. 在網站隱藏“購物車按鈕”和顯示商品價格在首頁 1.1 隱藏“購物車按鈕”首先需要在 後台>銷售管道>品牌官網 > 佈景主題>編輯原始碼 > folder snippets/product-grid-item.liquid > 大概在 34 行，刪除以下灰色的部分 > 儲存 1.2 接下來在大約在 55 行刪除瀏覽量較少【擴充功能】Product Filter Pro 進階商品篩選器
| 此功能僅支援商務版或零售方案使用 || 目前僅支援新版主題（Aroma 或其後發佈之佈景主題） 為了提升顧客瀏覽網站時的體驗感，我們需確保顧客輕鬆找到他們想要的商品。 步驟一：安裝商品篩選器擴充 前往EasyStore後台 → 安裝擴充 → 更多 → 搜尋 Product Filter Pro 進階商品篩選器 → 立即安裝擴充 步驟二：設定商品篩選條件 成功安裝後，就會看到以下畫面 你可點擊進商品篩選條件，即可編輯名稱 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_jy3k瀏覽量較少【官網設計】商品價格顯示為「價格區間」
若商品有設定不同的規格價格，部分主題會顯示從 xxxx 金額起，此文章將教導你如何設定價格以區間 / 範圍顯示。 商品價格顯示為「從 $XXXX 起」請參考：教學文章 設定前： 設定後： ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_13iau瀏覽量較少【擴充功能】Smartarget - Countdown Pop Up
Countdown Pop Up 擴充由 Smartarget 開發。這擴充可以製造緊迫感，吸引顧客並推動更好的參與度和轉換動作。 步驟一：安裝 Countdown Popup 擴充 前往 EasyStore 後台 → 安裝擴充 → 更多 → 搜尋 Countdown Popup → 安裝 Countdown Popup 步驟二：設定 Countdown Popup 按鈕 當你安裝 Countdown Popup 之後，你將會導向 Smartarget 的設定頁面 ![](https://storage.crisp.chat/users/helpdesk/w瀏覽量較少【擴充功能】 Smartarget Stories
Smartarget Stories 可以為你的官網創建多個限時動態，並包括帶有音樂的圖像或視頻，就如你在 Instagram、TikTok 和其他社交媒體平台上所看到的限時動態。 步驟一：安裝 Smartarget Stories 擴充功能 前往 EasyStore 後台 → 安裝擴充 → 更多 → 搜尋 Smartarget Stories → 安裝 步驟二瀏覽量較少【官網設計】如何調整 Live Chat 按鈕位置
若你有使用訊息功能裡的 Live Chat 功能，你可能會遇到需要調整 Live Chat 按鈕位置的情況，這篇文章將教導大家如何調整按鈕位置。 新版主題（Aroma 或其後發佈之佈景主題） 步驟一：編輯原始碼 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 base.css 文件 複製以下代碼 .easystore-chat-button { bottom: 105px !important; } .easystore-widget-window { bottom: -15px !important; } 粘貼到 base.css 文件的最下方 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_瀏覽量較少
【官網設計】商品頁面顯示商品品牌 & 商品標籤
商家可以在商品頁面上，添加商品品牌 & 商品標籤顯示，讓客戶更輕鬆地瀏覽查看該商品的相關資訊，您可以根據以下步驟開始設定。 ||| ⚠️ 若更換佈景主題後，需重新編輯原始碼。 如何設定 使用Candy 或之前發佈之佈景主題 使用Aroma 或之後發佈之佈景主題 此步驟僅適用於 Candy 或之前發佈之佈景主題（舊版主題） 1. 添加商品品牌 ** **商家可以將商品品牌顯示在商品名稱上方： 前往 EasyStore 後台 → 商品管理 → 所有商品 → 點擊商品進行編輯 → 商品品牌 → 輸入商品品瀏覽量中等【擴充功能】Product Description Tabs（商品描述頁簽）擴充設定
||| 支援全部方案 商品描述能夠讓您的客戶更加了解您的商品，無論是規格、理念、運送資訊，抑或者是提供您的客戶在購物前需要了解的資訊，都能在商品描述中提出。 步驟一：安裝 Product Description Tabs 前往 EasyStore 後台 → 安裝擴充 → 更多擴充 → 搜尋「Product Description Tabs」擴充 → 安裝 步驟二：Product Description Tabs 設定 選擇是否顯示頁簽標題為內容 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d30瀏覽量較少【擴充功能】Instagram Feed 安裝與設置
利用 Instagram 粉絲專頁裡的照片提升網店特色，或是打造品牌故事，將會提升於顧客心中的形象，同時也替本身經營的 Instagram 帳號帶來更多的訪客 步驟一：安裝 Instagram Feed 你可以前往「擴充功能」→ 安裝 「 Instagram Feed 」 步驟二：設定 Instagram Feed 登入你的Instagram帳號 Instagram Feed 擴充設定 （1）Title：標題 （2）Numbe瀏覽量較少Infinite Scrolling 一頁式購物體驗
客戶可以在您的商店首頁以一頁式的形式瀏覽所有商品。 功能介紹 在商品分類現可一頁式瀏覽該分類所有商品，只需向下滑就會自動加載商品。 此功能讓客戶體驗一頁式瀏覽商品和資料，客戶可以更簡單地把感興趣商品加入購物車並進行付款動作。 安裝此擴充將提升： 客戶瀏覽時間效率提高 下單效率提高 用戶體驗感提升 安裝 Infinite Scrolling 步驟 1 ：EasyStore 後台》安裝擴充》更多》搜尋 Infinite Scrolling》安裝 步驟 2 ：選擇您想要的加載方式 Auto load when scroll down: 往下拉時商品會自動加載 Load when click more瀏覽量較少如何移除複製與貼上的右鍵功能，避免網店內容遭盜用？
移除您網店前台內容被複製貼上之右鍵功能，您於網店前台之商品及背景圖片、文字內容皆無法被反白選擇及進行複製，避免您用心製作的圖片或是文字內容未經允許被使用，保障您重要的智慧財產權。 此篇文章，將能協助您： 一、移除右鍵複製貼上功能 二、取消 " 移除右鍵複製貼上功能 " 一、移除右鍵複製貼上功能 您可以前往「佈景主題」>「編輯原始碼」> 點選「layout」中的「theme.liquid」> 複製以下程式碼於 “ “ 前： $(document).ready(function () { $("body").css({ "-webkit-touch-callout": "none", "-webkit-user-select": "none", "-khtml-user-select": "none", "-moz-user-select": "none",瀏覽量較少設定不顯示價格與購物車按鈕（Candy 或之前發佈之佈景主題）
此教學僅適用於舊版主題（ Candy 或之前發佈之佈景主題） | EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。 如果您想建立一個設立費低，容易使用的網站以顯示商品目錄或資訊如公司故事，聯繫方式等，那麼 EasyStore 是您的最佳選擇。以下教學是關於如何隱藏商品價格和購物車功能，以設立一個商品目錄，和有豐富內容的網站。 在這篇文章中： 在網站隱藏“購物車按鈕”和商品價格在首頁 隱藏價格在商品頁面 (”加入購物車“按鈕會自動隱藏) 隱藏主目錄的登入和帳號按鈕 隱藏主目錄購物車按鈕 隱藏主目錄購物車按鈕(Wave, Lucky 或 X-force 佈景主題而已) 隱藏價格在商品搜尋頁面 1.在網站隱藏“購物車按鈕”和商品價格在首頁 1.1 隱藏“購物車按鈕”首先需要在 後台>品牌官網 > 佈景瀏覽量較少更改網頁上Logo與社交媒體Icon大小
更改網頁上Logo與社交媒體Icon大小 Logo List的Logo大小 頁尾社交媒體Icon大小 頁尾Logo的大小 📣注意：更換主題需要重新編輯原始碼 1. Logo List的Logo大小： Logo List 的調整方法僅適用於 舊版主題（Candy 或之前發佈之佈景主題） 1.1 您可以到：銷售管道》品牌官網》佈景主題》編輯原始碼》theme.scss》尋找 logo-list-item 》更改 150px logo大小至您要的電腦版大小，更改 110px logo大小至您要的手機版大小。 ![](https://storage.crisp.chat/users/helpdesk/website/abcdb33dc3e30800/d3acf758-1581-46ae-瀏覽量較少新增或更改加入購物車按鈕圖標（Candy 或之前發佈之主題）
⚠️ 注意事項： 此文章說明僅適用於舊版主題（Candy 或之前發佈之主題） 更換佈景主題需要重新編輯原始碼 不同佈景主題會有不同的加入購物車按鈕圖標 部分佈景主題會無加入購物車按鈕圖標 基於安全問題，我們不開放編輯結帳頁面上的加入購物車按鈕圖標 1. 新增加入購物車按鈕圖標 步驟 1 : 前往 EasyStore 後台 > 銷售管道 > 品牌官網 > 編輯原始碼 > 選擇 product.liquid 檔案。 步驟 2 : 使用WAVE，Candy，X-Froce，Lucky主題： 複製以下代碼 > 在 {{ 'products.product.add_to_cart' | t }} 的前方貼上代碼。 {% include 'svg-definitions' with 'cart-icon' %} ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/imag瀏覽量較少添加自動播放Youtube視頻在分頁裡
在此文章中： 在內容頁面中添加YouTube視頻 使視頻自動播放 刪除視頻的放大效果（僅適用於X-FORCE主題） 調整視頻部分的尺寸（用於Candy主題） 調整視頻部分的大小（適用於X-FORCE主題） 在開始之前，您需要了解 Autoplay Policy Changes。 1. 在內容頁面中添加YouTube視頻 步驟一：到Easystore後台》銷售管道》品牌官網》所有分頁》選擇自己想要的模版》點擊影片的圖標 步驟二：輸入影片的URL鏈接然後點擊確認即可。 ![](https://storage.crisp.chat/瀏覽量較少【導航列】如何設定純文字導航列
由於新增導航列都會需要選擇一種類別進行設定，可能你會需要新增純文字導航列為母分類，然後再設定子分類。此文章將教你如何設定不可點擊的純文字的導航列。 Aroma 或其後發佈之佈景主題 此教學適用於 Aroma、Freshbit 、Mels 、Wood 、Essence 、Gizmos 、Kiddy 、Urbn 、Kate、 Pastries 等等新版主題 步驟一：編輯原始碼 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 header.liquid 文件 → 搜尋 href="{{ link.url }}" （大約 124 行 和 304 行）瀏覽量較少刪除商品下方的社交媒體分享按鈕（舊版主題 - Candy 或之前發佈之主題）
||| 此文章僅供舊版主題（Candy 或之前發佈之主題）參考 一、社交媒體分享 社交媒體分享按鈕其實可以幫助商家去增加並促進與客戶之間的關係。並且還可以藉此把商品發布到更多的渠道讓大眾看到您的品牌從而產生興趣瀏覽您的官網。 請參考以下列子： 還未關閉之前 關閉之後： 如果您的平台不需要這額外的分享按鈕，您可以通過編輯原始碼去隱藏它們。 如何操作： 到銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 找到Config > settings_data.json 【這個文件夾點開】搜尋 'social瀏覽量較少【擴充功能】如何新增「商品圖片浮水印」？
為圖片附上浮水印可以保護你的照片不會被其他人偷用 步驟一：安裝 Image Watermark 前往 EasyStore 後台 → 安裝擴充 → 更多 → 搜尋 Image Watermark → 安裝 Image Watermark 步驟二：設定 Image Watermark EasyStore 後台 → 擴充功能 → Image Watermark → 設定浮水印功能 （1）Watermark Text：編輯浮水印上的文字 （2）Text Size：編輯浮水印上文字的大小 （3）Text Frame Width：文字寬度 （4瀏覽量較少【官網設計】如何移除官網搜尋欄和搜尋圖標
此篇文章將教導如何移除官網的搜尋欄和搜尋圖標，部分主題顯示搜尋欄，部分則僅顯示搜尋圖示，依主題設計而定。 | EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。 目錄： 🔵如何移除官網搜尋欄 🔵如何移除官網搜尋圖標 🔵如何移除官網搜尋圖標（Muse 之前發佈之新版佈景主題） 🔵如何移除官網搜尋圖標（ Muse 和 Essence 主題） 🔵如何移除官網搜尋圖標（ 舊版主題） 如何移除官網搜尋欄 如果你使用的新版主題（Aroma 或其後發佈瀏覽量較少【官網設計】如何在商品頁面顯示「商品編號SKU」？
需確保商品有輸入商品編號 SKU。 Aroma 或更新發佈之佈景主題（新版主題） 步驟一：編輯原始碼 前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → main-product.liquid 文件 搜尋 {% app_snippet 'product/button' %} → 於上方加入 <div id="product-sku-display" class="h6"></div> 在 main-product.liqui瀏覽量較少【官網設計】關於後台描述 / 內容編輯器
你會在商品管理、分頁、部落格文章看到撰寫或編輯內容的【編輯器】。編輯器可放入不同的文字大小、樣式、圖片、表格，以製作出吸引眼球的內容，展現商店特色。 字型樣式 可調整字體的粗體、斜體或下劃線 可調整字型大小和顏色 
這篇文章裡將教導商家如何透過編輯原始碼去自行設定新增 slider 的頁面。 **Step 1 **首先呢，您可以前往》後台》品牌官網》佈景主題》編輯原始碼 在 settings_schema.json 尋找 Slider content 拉下尋找 slide 6 /最後一個slide 複製以下編碼 & 更改所有數字 6 to 7 若想要更多Slide 可以重複以上步驟 然後儲存。 Step 2 在 settings_data.json 尋找slide_6 highlight 所有 slide_6 編碼如圖下 複製 & 更改數字為 6 to 7 或更多 然後儲存。瀏覽量較少【官網設計】加入購物車彈窗
加入購物車彈窗（Add to Cart Modal） 是當顧客在商品分類頁、商品列表頁等點擊「加入購物車」按鈕時所跳出的商品頁視窗。此彈窗可讓顧客快速選擇商品規格，無需離開當前頁面，進一步提升購物流程的順暢度與使用體驗。 目錄： 功能效果 如何關閉加入購物車彈窗 如何開啟加入購物車彈窗 功能效果 電腦版  > ‘角’ (U+89D2) > ‘珠’ (U+73E0) > ‘雷’ (U+96F7) 🔸注意： 若篩選排列方式「按字母順序, A - Z」後不是根據以上邏輯排序，可檢查商品名稱前是否有空位 排列方式裡的「特色」表示在後台 → 商品管理裡的商品排序 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1un5752.p瀏覽量較少【短連結結帳】不同銷售管道的結帳頁面（品牌官網 VS 短連結）
商家在啓用了各種銷售管道后，結帳頁面會依照網店設定將客人導向品牌官網進行結帳或在短鏈接結帳頁面。商家們可以瞭解網店在什麽設定下會導向哪種結帳頁面。 1. 品牌官網結帳頁面 V.S. 短鏈結結帳頁面 通過網店設定狀態的不同，客人在結帳時將會出現兩種結帳頁面的導向 短連結結賬與一般有開啟品牌官網結賬頁面的分別如下： 短連結沒有回到購物車按鈕 短連結沒有登入按鈕 短連結沒有服務條款，隱私條款，退款政策 2. 不同情境下的結帳頁面導向 ![](https://storage.crisp.chat/users/h瀏覽量較少更改商品規格邊框顏色
商家可以客製化商品頁面上的商品規格邊框顏色，繼續查看教學了解如何更改商品規格的邊框顏色吧！ 商品規格前台顯示： 更改商品規格邊框顏色 前往EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題設定。 選擇 "Navigation"。 更換並選擇您想要顯示的邊框顏色 > 確認 > 儲存。 設定好後可以到前台查看，邊框的顏色已經從 “白色” 更改為 “黑色” 了。 ![瀏覽量較少更改「瀏覽規格」按鈕文字
您可以更改商品列表中「瀏覽規格」按鈕文字至其他的字，例如：查看規格、選擇規格等等。 您需要根據以下步驟操作： 步驟 1 : 前往銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > 尋找 product-grid-item.liquid 檔案。 步驟 2 : 在大約第70行 > 尋找 {{ 'products.product.view_option' | t }} 。 同時，在大約第100行 > 尋找 **{{ 'products.product.view_option' |瀏覽量較少【官網設計】分頁嵌入 Google 地圖
此文章將建議你如何可以在分頁裡嵌入 Google 地圖。 步驟一：獲得 Google 地址代碼 前往 Google 地圖（Google Map）搜尋你要的地址 點擊「分享」（Share）按鈕 點擊「嵌入地圖」（Embed a map）按鈕 可自行調整地圖大小，建議可選擇「客製化」（Custom Size），建議尺寸為：300 x 200 ![](ht瀏覽量較少【官網設計】建立商品目錄／內容展示型網站 ／形象網站
若你經營的產品無需開放線上購買，例如僅供顧客瀏覽、了解品項與規格，那麼建立一個商品目錄／內容展示型網站會是絕佳選擇。透過 EasyStore，你可以輕鬆打造無購物車功能的展示頁，保留品牌形象與產品資訊呈現，同時引導顧客透過聯絡方式下單或諮詢。 步驟一：隱藏網站加入購物車按鈕 隱藏網站的加入購物車按鈕， 你可根據目前使用的佈景主題參考對應的文章： 設定顯示價格但不開放購買按鈕（Aroma 或其後發佈之佈景主題） [設定顯示價格但不開放購買按鈕（Candy 或之前發佈之佈景主題）](https://support.easystore.co/zh-tw/article/easystore-瀏覽量較少【官網設計】 Smartarget Exit Popup
Smartarget Exit Popup 是由第三方 Smartarget 提供的服務。這功能可以在顧客離開您的網站之前向他們展示特別彈跳視窗，顧客移動滑鼠遊標以關閉網站就會顯示一則訊息。透過退出彈出窗口，您可以設計彈出訊息和號召性用語來吸引用戶並阻止他離開。 步驟一：安裝 Smartarget Exit Popup 擴充 前往 EasyStore 後台 → 安裝擴充 → 更多擴充 → 搜尋 Smartarget Exit Popup → 安裝 步驟二：設置 Smartarget Exit Popup 首先，你可決定彈跳窗是否要有開始和結束時間，若沒有，保瀏覽量較少如何上傳品牌商標
如何上傳品牌商標 Aroma 或更新佈景主題： 前往佈景主題》頂端主選單》上傳 Logo 至 【網站 Logo】 Candy 或之前佈景主題： 前往佈景主題》網站 Logo 》把 Logo 上傳到 【Logo】欄位即可 前往佈景主題設定》頁尾》把 logo 上傳到頁尾 logo即可 ![](https://storage.crisp.chat/users/helpdesk/website/2533c36085fa1800/ff463e17-b438-4瀏覽量較少如何編輯X-Force主題影片大小
X-Force 佈景主題首頁會呈現影片，商家可以透過上傳影片至 YouTube，之後再將 YouTube 連結輸入到佈景主題設定內做連接，呈現該影片與前台首頁。商家也可以自行透過編輯原始碼，更改與編輯X-Force主題影片的大小。 默認前台影片顯示： 調整原版大小比例減少50%的前台影片顯示： 設定操作流程： 步驟 1 : EasyStore 後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼。 步驟 2 : 選瀏覽量較少不自動顯示第二張商品圖
在頁面上，當鼠標指向商品圖片時，會自動顯示第二張商品圖，商家可以透過以下步驟移除自動顯示第二張商品圖功能。 📣注意： 更換主題需要重新編輯原始碼。 步驟 1 : 您可以到：銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > snippets > product-grid-item.liquid。 步驟 2 : 在大約第70 - 80排，尋找 secondary_image，移除以下原始碼。 步驟 3 : 儲存設定并完成。 😉瀏覽量較少在商標列表里添加更多商標
商標列表功能僅包括在Candy, Lucky, X-Force, Wave & Maker佈景主題 欲在商標列表（Logo List）里添加更多商標, 您需在以下3個檔案里進行相關編輯：銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > config settings_data.json settings_schema.json logo-list.liquid 1. settings_data.json 步驟 1: 前往 EasyStore 後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > config 步驟 2 : 尋找 "logo_list_8_link": "/collections/all" 之後添加以下編碼 "logo_list_8_link": "/collections/all" 備註: 可以添加至20個或更多瀏覽量較少【官網設計】如何在官網設定 “電郵聯繫” 、“Email Me” 、“mailto” 按鈕
這篇文章主要講解如何在官網設定 “Email Me / 聯繫電郵” 的按鈕 EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 佈景主題設定 你可到頁尾 → 關於我們 → 文字 輸入 <a href="mailto:eugene@easystore.co"> 聯絡電郵 </a> 你可更換 eugene@easystore.co 至你想要顧客聯繫的電郵地址 你可更換 聯絡電郵 至你要的文字作為按鈕文字 顧客點擊按鈕後即會跳轉電子設備裡的電郵軟件並且直接帶入你放入的電郵地址瀏覽量較少【官網設計】於前台顯示可獲得購物點數
於您的線上商店或購物 App 商品頁面顯示購買該商品可以獲取多少點數。 目錄： 🔷設定流程 🔷前台顯示畫面 設定流程 前往客戶管理 → 會員點數與分級 → 於會員點數設定點擊「編輯」 於「購物」點擊「編輯」 於「瀏覽量較少【官網設計】如何單獨變更商品價格顏色
| 僅適用於新版主題（Aroma 與其後發佈之主題） 在佈景主題設定中調整價格顏色時，可能會連帶影響其他元素，例如商品名稱的顏色。這篇文章將教你如何僅針對商品價格進行顏色調整，避免影響整體設計。 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 搜尋 assets → base.css 文件夾 於 base.css 文件夾最下方貼上以下代碼（可自由更換顏色代碼）： .price-item--regular, .price-item--sale { color: #ff5588; } 設定結果：除了劃線原價外的瀏覽量較少【擴充功能】FutrCloset — Al Fitting Room 試衣間擴充
|| FutrCloset — Al Fitting Room 為第三方服務商提供的付費服務 透過 AI 虛擬試穿，提升時尚商品轉換率。FutrCloset 透過 AI 驅動的虛擬試衣間，幫助時尚消費者更有信心地下單。顧客只需上傳一張全身照，即可立即預覽不同穿搭在自己身上的效果，全程直接在你的商店內完成。 前往EasyStore後台 > 擴充功能 > 搜尋 FutrCloset > 立即安裝擴充 成功安裝後，【Fitting Room 試衣間】導航列將會自動新增到你的官網導航列列表 ![](https://stora瀏覽量較少【官網設計】如何調整商品分類區塊和頁面的商品名稱和價格大小（Aroma 與其後發佈之主題）
| 本文僅針對新版主題（Aroma 與其後發佈之主題） ||| EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。 本文將說明如何編輯原始碼以更改商品分類區塊和頁面的商品名稱和價格大小。 於官網首頁的商品分類區塊 於商品分類頁面 ![](https://storage.crisp.chat/users/helpdesk/website/瀏覽量較少【官網設計】Essence & Muse 主題如何設定 Logo 置中，導航列位於 Logo 下方的中間位置
如果你是使用 Essence & Muse 主題，可是你想 Logo 放在正中間，導航選單排在 Logo 下面，整體對齊在中間，讓畫面看起來對稱、簡潔。你可參考這篇文章設定。 | EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。 正常情況： 正常情況下，Essence & Muse 主題設定 Logo 置中後，導航列會被擠在左側。 設定後結果： 設定後， Logo 置中，導航選單排在 Logo 下面 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1d4瀏覽量較少【編輯原始碼】原始碼編輯路徑與注意事項
為了讓商家能依實際需求進行進階客製化設定，系統提供原始碼編輯功能，讓你可自行調整部分前端顯示與行為設定。 在進行原始碼編輯前，請先了解相關的編輯路徑與注意事項，以避免因不當修改而影響系統正常運作、後續更新相容性或支援範圍。 💡注意事項 || 自行編輯原始碼將可能更動系統原有架構，進而導致程式碼不相容、功能異常或影響其他系統功能。凡因自行修改原始碼所衍生之任何問題，平台將無法提供相關問題之排除或支援服務。建議商家在進行任何原始碼修改前，務必審慎評估相關風險。 ||| 為配合平台持續更新與優化作業，EasyStore 可能會不定期調整系統架構與前台顯示方式。若商家自行設定或修改的 CSS 樣式因此受到影響，導致顯示或操作異常，平台將無法提供相關問題的排除協助。EasyStore 建議商家定期檢查前台頁面狀況，以確保商店畫面與各項功能運作瀏覽量較少【官網設計】一鍵將已售完 / 缺貨商品排序至底部（商品顯示）
為協助商家優化商品列表顯示，系統提供「將已售完商品排序至底部」的商品顯示設定。啟用後，官網前台與購物 APP 中的已售完商品將自動移至列表底部，提升整體瀏覽體驗。 前往 EasyStore 後台 → 商品管理 開啟「更多操作」選單 → 選擇「商品設定」 於「商品顯示」區塊開啟將缺貨商品顯示於商品列表底部 ![](h瀏覽量較少【擴充功能】 Smartarget Popup
Smartarget Popup 讓你在網站顯示彈出視窗，快速吸引目光並呈現特別優惠、重要訊息或新品資訊。 步驟一：安裝 Smartarget Popup 擴充功能 前往 EasyStore 後台 → 安裝擴充 → 更多 → 搜尋 Smartarget Popup → 安裝 步驟二：設置 Smartarget Popup 當你安裝 Sm瀏覽量較少【官網設計】更改購物車「繼續購物」按鈕連結（新版佈景主題 Aroma 與其後發佈之主題）
|| 此教學僅適用於新版佈景主題 ：Aroma 與其後發佈之主題 此文章將教導如何更改購物車的「繼續購物」按鈕連結，預設為導向「所有商品」頁面。 購物車 此步驟為修改購物車「繼續購物」按鈕連結 前往佈景主題設定 > 編輯原始碼 > snippets > cart-template.liquid > 搜尋 products.product.continue_shopping 並更改 /collections/all 成為你要的導向連結，如官網首頁 ![](https://storage.crisp.瀏覽量較少【官網設計】如何移除購物車「繼續購物」按鈕
這文章將教導如何移除購物車「繼續購物」按鈕。 | 此步驟僅適用於新版主題（Aroma 與其後發佈之主題） 移除購物車頁面的「繼續購物」按鈕 前往編輯原始碼 → snippets → cart-template.liquid → 刪除以下代碼 <a href="/collections/all" class="underlined-link">{{ 'products.product.continue_shopping' | t }}</a> 和 <a href="/collections/al瀏覽量較少【官網設計】如何更改「瀏覽全部」按鈕文字（新版佈景主題 Aroma 與其後發佈之主題）
在新版佈景主題（Aroma 與其後發佈之主題）內，如「精選商品目錄」和「目錄列表」內，會出現「瀏覽全部」的按鈕文字，此文章將說明如何更換此按鈕文字。 ](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_awstc.png) | EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，瀏覽量較少【官網設計】商品價格顯示為「從 $XXXX 起」
| 此文章教學僅針對新版主題（Aroma 或其後發佈之佈景主題） 若商品有設定不同的規格價格，部分主題會以價格區間顯示，此文章將教導你如何設定商品價格顯示為「從 $XXXX 起」。 商品價格顯示為「價格區間」請參考：教學文章 設定前：瀏覽量較少【官網設計】關於佈景主題設定內的「商店敘述」
當你設計佈景主題時，你會看到【商店敘述】的區塊，可是新增後卻發現不知道如何設定 其實他是會呈現從品牌官網 → 官網分頁 → 首頁的內容 （首頁分頁旁會有暗灰色的無法勾選按鈕） 3. 你可以在此分頁自由放入想呈現在首頁的內容，彈性更高；若有些呈現方式無法透過佈景主題設定實現，也可以在這裡進行補充與調整 ![](https://st瀏覽量較少