在这篇文章中:

何为『热卖』标签

通过设置 “原价”『热卖』标签

通过 “指定商品” 优惠启用『热卖』标签

移除自动显示的『热卖』标签

更改『热卖』标签的大小和颜色

更改划线价格的颜色

移除折扣百分比 %


1. 何为『热卖』标签

当您的商品价格低于原价或给予折扣时,『热卖』标签会自动出现在商品右上方,表示该商品目前有特价。这篇文章教您如何在不安装 Product Label 扩充功能的情况下编辑此『热卖』标签。


2. 通过设置 “原价” 启用『热卖』标签

“原价” 是一个嵌入在商品编辑页面 > 订定价格部分的一个折扣功能。



一旦填上 “原价”,『热卖』和划线价格就会自动显示在商品上。




3. 通过 “指定商品” 优惠启用『热卖』标签

除了 “原价” 设定以外,若您为商品新增了 “指定商品” 促销,商品也会自动显示『热卖』标签和化线价格。



优惠必须符合以下条件系统才会自动显示『热卖』标签和化线价格:

数量 = 1,数量 = 2 或以上不会触发『热卖』标签和化线价格

优惠代码 = 不需要

限定目标客群 = 不限


4. 移除自动显示的『热卖』标签

若您希望促销商品显示不同的标签,或者您认为『热卖』标签妨碍了您的商品展示,则可以按照以下步骤移除标签:

到后台 > 销售渠道 > 线上网店 > 布景主题 > HTML/CSS > settings_data.json 文档 > 找到 " collections_show_sale_circle" > 如图改成 0 > 储存。






5. 更改『热卖』标签的大小和颜色

您也可以自由更改标签字体和背景的大小和颜色。到后台 > 销售渠道 > 线上网店 > 布景主题 > HTML/CSS > assets/theme.scss 文档

5.1 搜索 badge__text--small {

字体大小: 更改 font-size 旁边的号码



5.2 搜索 $badgeSize:

标签大小: 更改 $badgeSize: 旁边的号码

标签颜色: 在 background-color: 旁边,将 $colorPrimary 更换成您要的颜色代码

字体颜色: 在 color: 旁边,将 $colorBtnPrimaryText 更换成您要的颜色代码




6. 更改划线价格的颜色

同样到后台 > 销售渠道 > 线上网店 > 布景主题 > HTML/CSS > assets/theme.scss 文档 > 将以下代码黏贴在最底部并将颜色代码更换成您要的颜色代码 > 储存

s .money { color: #999999; }


📌 备注 : 您可以从 这里获得您要的颜色代码


7. 移除折扣百分比 %

7.1 从首页和分类页面移除

后台 > 销售渠道 > 线上网店 > 布景主题 > HTML/CSS > product-grid-item.liquid 文档 > 移除灰色部分 > 储存



7.2 从首页和分类页面移除(Candy, X-Force, Lucky 和 Wave 主题适用)

后台 > 销售渠道 > 线上网店 > 布景主题 > HTML/CSS > product-grid-item.liquid 文档 > 移除灰色部分 > 储存



7.3 从商品页面移除:

后台 > 销售渠道 > 线上网店 > 布景主题 > HTML/CSS > product.liquid 文档 > 搜索 <span id="ComparePricePercent" class="product-single__sale-percent"></span> 并移除 > 储存

这篇文章有帮助吗?
取消
谢谢!