商品徽章与 badge: 标签
了解自动徽章、自定义商品标签徽章,以及按标签匹配的颜色样式。
商品卡片有两类徽章:根据商品状态显示的自动徽章,以及通过商品标签添加的自定义徽章。颜色在主题设置中集中管理,无需在每个商品上分别设置。
自动徽章
主题按照以下优先级,为商品显示一个自动徽章:
| 徽章 | 显示条件 | 颜色 |
|---|---|---|
| Sold out | 所有规格均不可购买 | 标准徽章颜色 |
| Sale | 划线价高于售价 | 促销徽章颜色 |
| Best seller | 商品含 bestseller 标签,也匹配 best-seller / best seller | 标准徽章颜色 |
使用 badge: 标签添加自定义徽章
给商品添加 badge:<Label> 标签,卡片就会显示对应文字:
badge:New→ New。badge:Limited edition→ Limited edition。- 同一商品可以添加多个
badge:标签,徽章会排列在自动徽章下方。
选择商品
在 Shopify 后台进入 Products,选择一个或多个商品。也可批量选中后点击 Add tags。
按 badge: 格式添加标签
例如添加 badge:New。badge: 后面的内容会原样作为徽章文字。
查看效果
徽章会出现在商品系列、精选系列、推荐、搜索等卡片中,也会显示在商品页标题上方。
标签保留原始大小写,例如 badge:Back in stock 显示为 Back in stock。删除标签后,徽章也会消失,无需另去主题编辑器清理。
按标签设置徽章颜色
在 Theme settings → Badges 中按标签文字匹配样式:
- Standard badge 和 Sale badge 控制自动徽章颜色,也为未匹配自定义样式的徽章提供默认颜色。
- Badge style 1 和 Badge style 2 各有逗号分隔的 Labels 列表,以及背景色、文字色。
badge:后的文字与列表匹配时采用该样式,不区分大小写。
例如:
| 样式 | Labels | 背景 | 文字 |
|---|---|---|---|
| Badge style 1 | New, Just in | 黑色 | 白色 |
| Badge style 2 | Limited, Last chance | 浅粉 | 深灰 |
此时 badge:New 和 badge:Just in 使用黑底白字,badge:Limited 使用浅粉背景,而 badge:Holiday 未匹配,使用标准颜色。
品牌换色时只需修改样式,无需逐个修改商品标签。也可以在同一 Labels 中填写 New, Nouveau, 新品,让多语言标签采用相同样式。
通过元对象添加更多样式
默认提供两种样式;需要更多时,可使用元对象,每条记录定义一种样式。
创建定义
在 Shopify 后台进入 Settings → Custom data → Metaobjects → Add definition。名称可自定,但 type 必须为 badge_style。添加键名完全一致的三个字段:labels(单行文本)、background(颜色)、text(颜色)。
添加记录
在 Content → Metaobjects → badge_style 下按样式添加记录,例如 labels 为 Holiday, Gift,背景绿色、文字白色。
添加商品标签
此后 badge:Holiday 会使用该记录的颜色。匹配优先级依次为:元对象记录、Badge style 1–2、标准颜色。
显示位置
Theme settings → Product cards → Badge position 可选择图片角落,徽章纵向排列;或图片下方、标题旁,徽章横向换行。其他配置见商品卡片设置。
在商品页中,同样的徽章显示于标题上方,属于 Title & price 块,可通过 Show badges 控制显示。