商品版型獨立顏色

【目錄】

一、使用情境

二、基本設定

三、特殊語法設定

四、特殊語法設定範例

五、既有語法

 

---

小提示：點擊章節標題，即可前往該章節進行閱讀，也可點擊括號內藍色關鍵字，前往該頁面進行設定。

---

 

一、使用情境

  2025年8月上線🔥

為了滿足商家對品牌美感與網頁質感的追求，BVSHOP 2025年8月上線「商品版型獨立顏色」功能，讓您能自由調整商品名稱、售價、多規格按鈕與優惠提示等區塊的顏色，打造專屬於品牌的視覺風格。

 

---

二、基本設定

  Step.1 

BVSHOP 商家管理後台，左方功能列表「樣式設定」➜「頁面設計」➜ 上方頁籤選擇「商品版型」➜ 點擊「頁面設計」進入編輯頁面

 

  Step.2 

左方功能選單選擇「網站布局」➜「顏色設定」➜ 即可設定商品版型各區顏色

 

  Step.3  基礎設定 

▪️『文字顏色』設定

1. 左方選單
2. 商品名稱
3. 商品副標題
4. 商品摘要
5. 自訂商品額外欄位
6. 購買數量欄位
7. 商品庫存
8. 加購品

 

▪️『主要顏色』設定

1. 促銷活動名稱文字顏色
2. 商品售價顏色
3. 加價購,勾選邊框顏色
4. 加價購,差額提示文字

 

▪️『次要顏色』設定

1. 促銷優惠區塊底色
2. 加價購優惠區塊底色

 

---

三、特殊語法設定

BVSHOP 提供公開版型程式碼，開放商家自行修改「商品描述」、「商品摘要」等等欄位的文字樣式，可修改：文字顏色、字型、大小、分行等更細部的調整。

 

  下方為商品頁各個欄位的 class 統整包 

1. 商品貨號 productInfoSku
2. 副標題 productInfoHashtag
3. 商品摘要 productInfoSummary
4. 預購提示 productInfoPreOrderHint
5. 特價金額 productInfoSpecialPrice
6. 自訂欄位 productInfoCustomize
7. 數量選擇 productInfoNum
8. 商品庫存 productInfoQuantity
9. 銷售數量 productInfoSales
10. 加購商品價格 productInfoAddonsPrice

 

---

四、特殊語法設定範例

  Step.1 

「樣式設定」➜「自訂CSS」➜ 將寫好的程式碼貼到「CSS內容」欄位

 📍範例程式碼  變更商品副標題顏色
.productInfoHashtag {
color:#3898FF!important;
}

  小註解  💡每個程式碼之間不需要空行，接續往下貼就可以囉。

 

  Step.2 

商品頁前台對應的區域就會變為您設定的色號。

---

 

五、既有語法

  1. 結帳頁--購物車 icon 移除 

.el-icon-search,.first-fab,.scroll-fab {
display:none;
}

 

  2. 全站--購物車 icon 移除 

a[href='/order_form'], .cart-manage-btn {
display:none;
}

 

  3. 商品頁貨號隱藏 

.pdid{ display:none!important; }

 

  4. 商品樣式去除預設白色底色 

.bg-white {
background-color: rgba(0, 0, 0, 0);
}
.border {
border-width: 0px;
}

 

  5. 導覽列子分類分隔線移除 

.header-btn {
border-color: var(--btn-border-color);
}

 

  6. 導覽列選項所有分隔線移除 

.header-btn {
border-color: var(--btn-border-color);
}
.border-t {
border-top-width: 0px;
}

 

  7. 一般登入移除(僅留下快速登入) 

#loginForm{ display:none; }
#registerForm{ display:none; }

 

  8. 全站訂單查詢 icon 隱藏 

.order-search-icon {
display:none;
}

 

  9. 商品列表與分類列表底色變更 

.vue-content{
background-color:#FFF3F7!important;
}

 

  10. 輪播圖進度條隱藏 

.swiper-pagination{
display:none !important;
}

 

  11. 購物金與折購代碼欄位同時移除 

.basis-1\/2 {
visibility:hidden!important;
}

 

 

 

 

 

 

使用商品版型獨立顏色，遇上問題？

立即諮詢 BVSHOP 官方 LINE 客服