【官網設計】如何編輯優惠圖示及划線的原價？
EasyStore為商家設計優惠圖示，當商家設計了新的折扣優惠給特定商品，將自動顯示於商品圖片上，讓您的顧客在瀏覽商店時，能更明確的注意到優惠資訊！
當商品設定中：原價大於售價時，即會於商品顯示原價劃線與折扣價與「優惠」圖示
當設置了促銷優惠時，也會出現“優惠”圖示。一旦優惠的設置符合以下幾個條件，就會自動觸發顯示。
優惠條件購買最低件數 / 每 = 1 （2 及以上均不會觸發）
優惠條件最低金額 = 1 （2 及以上均不會觸發）
指定商品類型優惠
當有設定以上優惠類型後，若也符合以下條件即會顯示優惠圖示
沒設優惠代碼
顧客符合條件如目標客群
若希望優惠圖示與您的佈景主題更相襯，或是於商品頁面能更加顯眼的呈現，您可以編輯顏色和字體大小
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
於第1026行開始找尋” color: “ > 輸入顏色代碼即可編更為您欲顯示的顏色
您可以參照此色碼錶（[https://www.toodoo.com/db/color.html](https://www.toodoo.com/db/color.html)）在方框內輸入您欲使用的自行顏色色碼（例如白色為：color: #FFFFFF ），並點選儲存。
前往 base.css 原始碼文件
尋找 .badge {
更換 background-color & border-color 的顏色代碼
搜尋 .badge.badge-ribbon
更換以下紅框裡的代碼成 ： #顏色代碼 #顏色代碼 transparent;
例如： #948274 #948274 transparent;
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
於第1026行開始找尋” font-size: “ > 輸入數字於” px “ 前即可您欲顯示之字型大小
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
於第1026行開始找尋” $badgeSize: “ > 輸入數字於” px “ 前即可您欲顯示之背景大小
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
尋找 .badge--sale ，然後在下面貼上**display: none;**
儲存後，即可移除優惠字樣。
若使用 Aroma 與其後發佈之主題，請參考以下：
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippet」中「price.liquid」> 搜尋 {% if show_badges %} > 在 aria-hidden="true" 後加入 style="display:none;"
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippet」中「**product-card.liquid**」> 搜尋 {% if on_sale %} > 在 style="display:none;"
`
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippet」中「**product-card.liquid**」> 搜尋 {% if on_sale %} > 在 style="display:none;"
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippets」中「product-grid-item.liquid 」
在約90-100行之間，找到以下原始碼並把它們刪除
儲存 > 完成
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「templates」中「product.liquid 」
搜尋 並刪除掉這段原始碼
儲存 > 完成
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
滑到最下方並貼上以下原始碼
s .money
{ color: #999999; }
📌 注意 : 您可以參照此[色碼錶](https://www.toodoo.com/db/color.html)找到您欲使用的自行顏色色碼（例如白色為：color: #FFFFFF ）來取代以上原始碼的#999999
儲存 > 完成
建議您儲存完後，以無痕視窗重新開啟您的網店檢測是否編輯成功💪
我們也有內建售完圖示
若您有設定商品為“EasyStore追蹤庫存數量”，當商品剩餘數量為0的時候，將於商品圖案中間顯示售完。(系統將會限制顧客購買該商品)
也許您也會想了解：Product Label
不會因應價格、數量變動而改變，需要手動編輯圖示內容，例如 : 折扣、特惠、限量、預購。
2.優點是您可以客製傳達商品的特定訊息。
相關操作請參考： 商品標籤 (Product Label)
`
一、編輯優惠圖示的顏色、字體大小和背景大小
二、去除優惠字樣
三、去除在特色商品及商品分類頁面的 % 百分比字樣
四、去除個別商品頁的 % 百分比字樣
五、編輯划線的原價的顏色
📍優惠圖示顯示條件
當商品設定中：原價大於售價時，即會於商品顯示原價劃線與折扣價與「優惠」圖示
當設置了促銷優惠時，也會出現“優惠”圖示。一旦優惠的設置符合以下幾個條件，就會自動觸發顯示。
優惠條件購買最低件數 / 每 = 1 （2 及以上均不會觸發）
優惠條件最低金額 = 1 （2 及以上均不會觸發）
指定商品類型優惠
當有設定以上優惠類型後，若也符合以下條件即會顯示優惠圖示
沒設優惠代碼
顧客符合條件如目標客群
一、編輯優惠的圖示顏色、字體大小和背景大小
若希望優惠圖示與您的佈景主題更相襯，或是於商品頁面能更加顯眼的呈現，您可以編輯顏色和字體大小
**📍更改「優惠」字樣的顏色（Candy 或之前發佈之主題）：**
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
於第1026行開始找尋” color: “ > 輸入顏色代碼即可編更為您欲顯示的顏色
您可以參照此色碼錶（[https://www.toodoo.com/db/color.html](https://www.toodoo.com/db/color.html)）在方框內輸入您欲使用的自行顏色色碼（例如白色為：color: #FFFFFF ），並點選儲存。
📍更改「優惠」字樣的顏色（Aroma 或其後發佈之主題）：
前往 base.css 原始碼文件
尋找 .badge {
更換 background-color & border-color 的顏色代碼
搜尋 .badge.badge-ribbon
更換以下紅框裡的代碼成 ： #顏色代碼 #顏色代碼 transparent;
例如： #948274 #948274 transparent;
📍變更「優惠」字樣的字體大小
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
於第1026行開始找尋” font-size: “ > 輸入數字於” px “ 前即可您欲顯示之字型大小
📍更改「優惠」字樣的背景大小
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
於第1026行開始找尋” $badgeSize: “ > 輸入數字於” px “ 前即可您欲顯示之背景大小
二、去除優惠字樣
**若使用 Candy 或之前發佈之主題，請參考以下：**
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
尋找 .badge--sale ，然後在下面貼上**display: none;**
儲存後，即可移除優惠字樣。
若使用 Aroma 與其後發佈之主題，請參考以下：
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippet」中「price.liquid」> 搜尋 {% if show_badges %} > 在 aria-hidden="true" 後加入 style="display:none;"
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippet」中「**product-card.liquid**」> 搜尋 {% if on_sale %} > 在 style="display:none;"
`
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippet」中「**product-card.liquid**」> 搜尋 {% if on_sale %} > 在 style="display:none;"
三、去除在特色商品及商品分類頁面的 % 百分比字樣
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippets」中「product-grid-item.liquid 」
在約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 %}儲存 > 完成
四、去除個別商品頁的 % 百分比字樣
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「templates」中「product.liquid 」
搜尋 並刪除掉這段原始碼
儲存 > 完成
五、編輯划線的原價的顏色
前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
滑到最下方並貼上以下原始碼
s .money
{ color: #999999; }
📌 注意 : 您可以參照此[色碼錶](https://www.toodoo.com/db/color.html)找到您欲使用的自行顏色色碼（例如白色為：color: #FFFFFF ）來取代以上原始碼的#999999
儲存 > 完成
備註
建議您儲存完後，以無痕視窗重新開啟您的網店檢測是否編輯成功💪
我們也有內建售完圖示
若您有設定商品為“EasyStore追蹤庫存數量”，當商品剩餘數量為0的時候，將於商品圖案中間顯示售完。(系統將會限制顧客購買該商品)
也許您也會想了解：Product Label
不會因應價格、數量變動而改變，需要手動編輯圖示內容，例如 : 折扣、特惠、限量、預購。
2.優點是您可以客製傳達商品的特定訊息。
相關操作請參考： 商品標籤 (Product Label)
`
更新時間： 18/11/2024
感謝！