【官網設計】如何編輯優惠圖示及划線的原價?
EasyStore為商家設計優惠圖示,當商家設設定了原價大於售價給特定商品,將自動顯示「優惠」圖示和劃線原價於商品上,讓您的顧客在瀏覽商店時,能更明確的注意到優惠資訊! 這篇文章將提供一些對於此項目可客製化的編輯方法。
目錄:
優惠圖示顯示條件
編輯優惠的圖示顏色、字體大小和背景大小
移除優惠圖示
編輯划線原價的顏色
編輯優惠價顏色
移除在特色商品及商品分類頁面的 % 百分比字樣
移除個別商品頁的 % 百分比字樣
📍優惠圖示顯示條件
- 當商品設定中:原價大於售價時,即會於商品顯示原價劃線與折扣價與「優惠」圖示
- 當設置了促銷優惠時,也會出現“優惠”圖示。一旦優惠的設置符合以下幾個條件,就會自動觸發顯示。
- 優惠條件購買最低件數 / 每 = 1 (2 及以上均不會觸發)
- 優惠條件最低金額 = 1 (2 及以上均不會觸發)
- 指定商品類型優惠
當有設定以上優惠類型後,若也符合以下條件即會顯示優惠圖示
- 沒設優惠代碼
- 顧客符合條件如目標客群
編輯優惠的圖示顏色、字體大小和背景大小
若希望優惠圖示與您的佈景主題更相襯,或是於商品頁面能更加顯眼的呈現,您可以編輯顏色和字體大小
📍更改「優惠」字樣的顏色(Candy 或之前發佈之主題):
- 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
- 於第1026行開始找尋” color: “ > 輸入顏色代碼即可編更為您欲顯示的顏色
- 您可以參照此色碼錶(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;"
編輯划線原價的顏色
舊版主題(Candy 或之前發佈之主題)
- 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「assets」中「theme.scss」
- 滑到最下方並貼上以下原始碼
s .money
{ color: #999999; }
📌 注意 : 您可以參照此色碼錶找到您欲使用的自行顏色色碼(例如白色為:color: #FFFFFF )來取代以上原始碼的#999999
新版主題(Aroma 或其後發佈之主題)
- 前往
base.css
原始碼文件夾
- 於最下方貼上以下原始碼(可自由更換顏色代碼)
s .money
{ color: #999999; }
編輯優惠價顏色
新版主題(Aroma 或其後發佈之主題)
- 前往
base.css
原始碼文件夾
- 於最下方貼上以下原始碼(可自由更換顏色代碼)
.price-item--sale {
color: #ff5588;
}
- 有設定原價大於售價才會顯示顏色的轉換
- 如果你想把劃線原價一起更換顏色,可把代碼改成以下
.price-item--sale,
s .money{
color: #ff5588;
}
移除在特色商品及商品分類頁面的 % 百分比字樣
- 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「snippets」中「product-grid-item.liquid 」
- 在約90-100行之間,找到以下原始碼並把它們刪除
- 儲存 > 完成
移除個別商品頁的 % 百分比字樣
- 前往銷售管道 > 品牌官網 > 佈景主題 > 進入「編輯原始碼」> 點選「templates」中「product.liquid 」
- 搜尋並刪除掉這段原始碼
- 儲存 > 完成
備註
- 建議您儲存完後,以無痕視窗重新開啟您的網店檢測是否編輯成功💪
- 我們也有內建售完圖示
若您有設定商品為“EasyStore追蹤庫存數量”,當商品剩餘數量為0的時候,將於商品圖案中間顯示售完。(系統將會限制顧客購買該商品)
也許您也會想了解:Product Label
- 不會因應價格、數量變動而改變,需要手動編輯圖示內容,例如 : 折扣、特惠、限量、預購。
2.優點是您可以客製傳達商品的特定訊息。
- 相關操作請參考: 商品標籤 (Product Label)`
更新時間: 29/04/2025
感謝!