主题设置

/

5 分钟阅读

商品徽章与 badge: 标签

了解自动徽章、自定义商品标签徽章,以及按标签匹配的颜色样式。

商品卡片有两类徽章:根据商品状态显示的自动徽章,以及通过商品标签添加的自定义徽章。颜色在主题设置中集中管理,无需在每个商品上分别设置。

自动徽章

主题按照以下优先级,为商品显示一个自动徽章:

徽章显示条件颜色
Sold out所有规格均不可购买标准徽章颜色
Sale划线价高于售价促销徽章颜色
Best seller商品含 bestseller 标签,也匹配 best-seller / best seller标准徽章颜色

使用 badge: 标签添加自定义徽章

给商品添加 badge:<Label> 标签,卡片就会显示对应文字:

  • badge:New → New。
  • badge:Limited edition → Limited edition。
  • 同一商品可以添加多个 badge: 标签,徽章会排列在自动徽章下方。
1

选择商品

在 Shopify 后台进入 Products,选择一个或多个商品。也可批量选中后点击 Add tags。

2

按 badge: 格式添加标签

例如添加 badge:New。badge: 后面的内容会原样作为徽章文字。

3

查看效果

徽章会出现在商品系列、精选系列、推荐、搜索等卡片中,也会显示在商品页标题上方。

标签保留原始大小写,例如 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 1New, Just in黑色白色
Badge style 2Limited, Last chance浅粉深灰

此时 badge:New 和 badge:Just in 使用黑底白字,badge:Limited 使用浅粉背景,而 badge:Holiday 未匹配,使用标准颜色。

品牌换色时只需修改样式,无需逐个修改商品标签。也可以在同一 Labels 中填写 New, Nouveau, 新品,让多语言标签采用相同样式。

通过元对象添加更多样式

默认提供两种样式;需要更多时,可使用元对象,每条记录定义一种样式。

1

创建定义

在 Shopify 后台进入 Settings → Custom data → Metaobjects → Add definition。名称可自定,但 type 必须为 badge_style。添加键名完全一致的三个字段:labels(单行文本)、background(颜色)、text(颜色)。

2

添加记录

在 Content → Metaobjects → badge_style 下按样式添加记录,例如 labels 为 Holiday, Gift,背景绿色、文字白色。

3

添加商品标签

此后 badge:Holiday 会使用该记录的颜色。匹配优先级依次为:元对象记录、Badge style 1–2、标准颜色。

显示位置

Theme settings → Product cards → Badge position 可选择图片角落,徽章纵向排列;或图片下方、标题旁,徽章横向换行。其他配置见商品卡片设置。

在商品页中,同样的徽章显示于标题上方,属于 Title & price 块,可通过 Show badges 控制显示。