> ## 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為商家設計優惠圖示，當商家設設定了原價大於售價給特定商品，將自動顯示「優惠」圖示和劃線原價於商品上，讓您的顧客在瀏覽商店時，能更明確的注意到優惠資訊！  這篇文章將提供一些對於此項目可客製化的編輯方法。

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1a99zct.png)

# ${color}[#8b1313](目錄：)

### [▶️優惠圖示顯示條件](#1-8jtjewequadoowcluekuumhrekuuaines7tg)
### [▶️編輯優惠的圖示顏色、字體大小和背景大小](#1-57eo6lyv5ysq5oog55qe5zyw56s66agp6imy44cb5a2x6auu5asn5bcp5zkm6iom5pmv5asn5bcp)
### [▶️移除優惠圖示](#1-56e76zmk5ysq5oog5zyw56s6)
### [▶️編輯划線原價的顏色](#1-57eo6lyv5yis57ea5y6f5yo555qe6agp6imy)
### [▶️編輯優惠價顏色](#1-57eo6lyv5ysq5oog5yo56agp6imy)
### [▶️移除在特色商品及商品分類頁面的 % 百分比字樣](#1-56e76zmk5zyo54m56imy5zwg5zob5yk5zwg5zob5yig6age6acb6z2i55qeicug55m5yig5qu5a2x5qij)
### [▶️移除個別商品頁的 % 百分比字樣](#1-56e76zmk5ycl5yil5zwg5zob6acb55qeicug55m5yig5qu5a2x5qij)

---

# 📍優惠圖示顯示條件

1. 當商品設定中：原價大於售價時，即會於商品顯示原價劃線與折扣價與「優惠」圖示
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1b9ofk3.png)

2. 當設置了促銷優惠時，也會出現“優惠”圖示。一旦優惠的設置符合以下幾個條件，就會自動觸發顯示。

* 優惠條件購買最低件數 / 每 = 1 （2 及以上均不會觸發）

* 優惠條件最低金額 = 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)

### 📍變更「優惠」字樣的字體大小（Candy 或之前發佈之主題）

1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」

2. 於第1026行開始找尋” font-size: “ > 輸入數字於” px “ 前即可您欲顯示之字型大小

![](https://storage.crisp.chat/users/helpdesk/website/4c0bf0e7566b5800/8c7c2e4b-077a-495c-b46e-197715_9demxl.png)

### 📍變更「優惠」字樣的字體大小（Aroma 或其後發佈之主題）

1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「base.css」

2. 於最下方貼入以下代碼，你可透過調整【14 px】的數字調整大小

```
.badge span {
    font-size: 14px !important;
}
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1dyvmkd.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 %}  > 在以下截圖位置加入  `style="display:none;"`


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_v1uc1p.png)

---
# 編輯划線原價的顏色

### 舊版主題（Candy 或之前發佈之主題）

1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」

2. 滑到最下方並貼上以下原始碼

`s .money`
`{ color: #999999; }`

 **📌 注意 :** 您可以參照此[色碼錶](https://www.toodoo.com/db/color.html)找到您欲使用的自行顏色色碼（例如白色為：color: #FFFFFF ）來取代以上原始碼的#999999

### 新版主題（Aroma 或其後發佈之主題）

1. 前往 `base.css`原始碼文件夾

2. 於最下方貼上以下原始碼（可自由更換顏色代碼）

`s .money`
`{ color: #999999; }`

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1vn5jrx.png)

---

# 編輯優惠價顏色

### 新版主題（Aroma 或其後發佈之主題）

1. 前往 `base.css`原始碼文件夾

2. 於最下方貼上以下原始碼（可自由更換顏色代碼）

```
.price-item--sale {
    color: #ff5588;
}
```

3. 有設定原價大於售價才會顯示顏色的轉換

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1hrzj5h.png)

4. 如果你想把劃線原價一起更換顏色，可把代碼改成以下

```
.price-item--sale,
s .money{
    color: #ff5588;
}
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1tb37cg.png)

---

# 移除在特色商品及商品分類頁面的 % 百分比字樣

![](https://storage.crisp.chat/users/helpdesk/website/7a800b120c7f9/6524e6a0-20ca-4f55-9515-e99632_1uqrkbn.png)

1. 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippets」中「product-grid-item.liquid 」

2. 在約90-100行之間，找到以下原始碼並把它們刪除

![](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. 建議您儲存完後，以無痕視窗重新開啟您的網店檢測是否編輯成功💪

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/)`