> ## 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). # 如何編輯「優惠」圖示及划線的原價？ EasyStore為商家設計優惠圖示，當商家設計了新的折扣優惠給特定商品，將自動顯示於商品圖片上，讓您的顧客在瀏覽商店時，能更明確的注意到優惠資訊！ 　 ## 一、編輯優惠圖示的顏色、字體大小和背景大小 ## 二、去除優惠字樣 ## 三、去除在特色商品及商品分類頁面的 % 百分比字樣 ## 四、去除個別商品頁的 % 百分比字樣 ## 五、編輯划線的原價的顏色 * * * 📍優惠圖示顯示條件 a) 當商品設定中：原價大於售價時，即會於商品圖示右上角顯示” 優惠 ” ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/id13607379-shutterstock1033448_tvabrr.jpg) b) 當設置了指定商品的價格折扣優惠時，也會出現“優惠”圖示。一旦優惠的設置符合以下幾個條件，就會自動觸發顯示。 * 購買指定件數 = 1 （2 及以上均不會觸發） * 優惠代碼 = 不需要 * 限定目標客群 = 不限 * * * ## **一、編輯優惠的圖示顏色、字體大小和背景大小** 若希望優惠圖示與您的佈景主題更相襯，或是於商品頁面能更加顯眼的呈現，您可以編輯顏色和字體大小 ### **📍更改「優惠」字樣的顏色（Candy 或之前發佈之主題）：** 1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」 2. 於第1026行開始找尋” color: “ > 輸入顏色代碼即可編更為您欲顯示的顏色 3. 您可以參照此色碼錶（[https://www.toodoo.com/db/color.html](https://www.toodoo.com/db/color.html)）在方框內輸入您欲使用的自行顏色色碼（例如白色為：color: #FFFFFF ），並點選儲存。 　 ![](https://storage.crisp.chat/users/helpdesk/website/ca90422ca6914800/52b1af14-2a1a-4375-8e31-469aca_vra69w.png) ### **📍更改「優惠」字樣的顏色（Aroma 或其後發佈之主題）：** 1. 前往 base.css 原始碼文件 2. 尋找 `.badge {` 3. 更換 `background-color` & `border-color` 的顏色代碼 ![](https://storage.crisp.chat/users/helpdesk/website/bcdfc3323e1ad800/29860772-d31a-4a85-b542-e01ef4_16am5l.png) 4. 搜尋 `.badge.badge-ribbon` 5. 更換以下紅框裡的代碼成 ： `#顏色代碼 #顏色代碼 transparent; ` 例如： `#948274 #948274 transparent;` ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_bw0yf7.png) ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1oanm0n.png) ### 📍變更「優惠」字樣的字體大小 1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」 2. 於第1026行開始找尋” font-size: “ > 輸入數字於” px “ 前即可您欲顯示之字型大小 ![](https://storage.crisp.chat/users/helpdesk/website/4c0bf0e7566b5800/8c7c2e4b-077a-495c-b46e-197715_9demxl.png) ### 📍更改「優惠」字樣的背景大小 1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」 2. 於第1026行開始找尋” $badgeSize: “ > 輸入數字於” px “ 前即可您欲顯示之背景大小 ![](https://storage.crisp.chat/users/helpdesk/website/3be0b965ec024000/a7a00e1e-a4b1-494f-9605-73fd90_1ala2k6.png) * * * ## **二、去除優惠字樣** ### **若使用 Candy 或之前發佈之主題，請參考以下：** 1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」 2. 尋找 **.badge--sale**，然後在下面貼上**display: none;** 3. 儲存後，即可移除優惠字樣。 ![](https://storage.crisp.chat/users/helpdesk/website/47e0b3ad09d42000/65dff070-9357-45a0-b7fb-ba3a4e_1qu99b1.png) **若使用 Aroma 與其後發佈之主題，請參考以下：** 1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippet」中「price.liquid」> 搜尋 {% if show_badges %} > 在 aria-hidden="true" 後加入 `style="display:none;"` ![](https://storage.crisp.chat/users/helpdesk/website/f52d2314d06ec800/2aec4703-ec2f-4581-b98e-826174_65dpik.png) 2. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippet」中「**product-card.liquid**」> 搜尋 {% if on_sale %} > 在
品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippets」中「product-grid-item.liquid 」 2. 在約90-100行之間，找到以下原始碼並把它們刪除 ``` {% if product.price > 0 %} {% assign product_price = product.price | times: 100.0 %} {% assign product_compare_at_price = product.compare_at_price | times: 100.0 %} -{{ product_compare_at_price | minus: product_price | divided_by: product_compare_at_price | times: 100.0 | round: 1 }}% {% endif %}``` ![](https://storage.crisp.chat/users/helpdesk/website/7eef8802ad1e3400/21b2ef6c-8571-4459-a211-b51d62_1ua6pu0.png) 3. 儲存 > 完成 ![](https://storage.crisp.chat/users/helpdesk/website/2fd843e4c6fa7a00/183fd9fd-da3f-45a0-9cda-57d863_14ytp7k.png) * * * ## **四、去除個別商品頁的 % 百分比字樣** 1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「templates」中「product.liquid 」 2. 搜尋 **** 並刪除掉這段原始碼 ![](https://storage.crisp.chat/users/helpdesk/website/384fcf2f21aa0600/b295635f-1a23-4a48-b090-2d2eed_15d6j00.png) 3. 儲存 > 完成 ![](https://storage.crisp.chat/users/helpdesk/website/ca7872c2536fa800/a9a7122c-05ab-4b14-bae1-da9835_f9yqpt.png) * * * ## **五、編輯划線的原價的顏色** 1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」 2. 滑到最下方並貼上以下原始碼 `s .money` `{ color: #999999; }` **📌 注意 :** 您可以參照此[色碼錶](https://www.toodoo.com/db/color.html)找到您欲使用的自行顏色色碼（例如白色為：color: #FFFFFF ）來取代以上原始碼的#999999 3. 儲存 > 完成 ### 備註 1. 建議您儲存完後，以無痕視窗重新開啟您的網店檢測是否編輯成功💪 2. 我們也有內建售完圖示 若您有設定商品為“EasyStore追蹤庫存數量”，當商品剩餘數量為0的時候，將於商品圖案中間顯示售完。(系統將會限制顧客購買該商品) ![](https://storage.crisp.chat/users/helpdesk/website/22aee7d6dc52da00/6089b4b6-1130-45c6-9ea2-b2699f_52n66g.png) **也許您也會想了解：Product Label**  1. 不會因應價格、數量變動而改變，需要手動編輯圖示內容，例如 : 折扣、特惠、限量、預購。 2.優點是您可以客製傳達商品的特定訊息。 3. 相關操作請參考： [商品標籤 (Product Label)](/zh-tw/article/product-label-qfmdlk/)