达人与联盟营销主题设置参考
/
4 min read
Product badges and the badge: tag
Automatic Sold out / Sale / Best seller badges, custom chips from badge:<Label> product tags, and badge styles that color them by label.
Product cards show two kinds of badges: automatic ones driven by product state, and custom ones you add with a product tag. Colors for all of them are configured once in Theme settings, so merchandisers never touch a color picker.
Automatic badges
The theme adds these on its own — one per product, in priority order:
| Badge | Shows when | Colors |
|---|---|---|
| Sold out | No variant is available | Standard badge colors |
| Sale | Compare-at price is higher than the price | Sale badge colors |
| Best seller | The product is tagged bestseller (also matches best-seller / best seller) | Standard badge colors |
Custom badges with the badge: tag
Tag a product badge:<Label> and the card grows a chip with that label:
badge:New→ a New chipbadge:Limited edition→ a Limited edition chip- Several
badge:tags on one product render several chips, stacked under the automatic badge.
Tag the product
In Shopify admin, open Products and select one or more products — bulk editing works: select many, then Add tags.
Use the badge: form
Add a tag like badge:New — everything after badge: becomes the chip text, exactly as typed.
Done
The chip appears on every product card surface — collection grids, featured collections, recommendations, search — and on the product page above the title.
The label keeps your capitalization ("badge:Back in stock" renders as "Back in stock"). Removing the tag removes the chip — nothing to clean up in the theme editor.
Coloring badges: badge styles
Colors live in Theme settings → Badges, matched by label so tags stay clean:
- Standard badge and Sale badge colors cover the automatic badges and any custom chip that doesn't match a style below.
- Badge style 1 and Badge style 2 each define a comma-separated Labels list plus background and text colors. A
badge:chip whose label appears in a style's list (case-insensitive) uses that style's colors.
Example setup:
| Labels | Background | Text | |
|---|---|---|---|
| Badge style 1 | New, Just in | Black | White |
| Badge style 2 | Limited, Last chance | Blush | Charcoal |
Now badge:New and badge:Just in render black, badge:Limited renders blush, and badge:Holiday (no match) falls back to the standard badge colors.
Because matching is by label, a rebrand is two color pickers in Theme settings — you never edit tags on products. Multiple labels per style also handle multilingual tag sets: put "New, Nouveau, 新品" in one list and they all share a look.
Unlimited styles with a metaobject
Two styles cover most stores, but there's no cap: create a metaobject and every entry becomes another badge style.
Create the definition
In Shopify admin, go to Settings → Custom data → Metaobjects → Add definition. Name it anything, but set the type to badge_style, and add three fields with these exact keys: labels (single line text), background (color), text (color).
Add entries
Under Content → Metaobjects → badge_style, add one entry per style — e.g. labels Holiday, Gift, a green background, white text.
Tag products
badge:Holiday now renders with that entry's colors everywhere badges appear. Metaobject entries match first, then Badge styles 1–2, then the standard colors.
Placement
Theme settings → Product cards → Badge position places card badges in the image corner (stacked vertically) or below the image next to the title (wrapping row). See Product card settings for the rest of the card options.
On the product page, the same badges render above the product title. They're part of the Title & price block — toggle them with its Show badges setting.