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