How can I customize the font or color of product card badges?
Change badge typography and colors in theme settings.
Last updated About 7 hours ago
Sale, sold out, and collection badges on product cards are styled globally — no CSS required.
Change badge colors
- Open the theme editor.
- Go to Theme settings > Colors.
- Under Badge colors, set:
- Sale badge and Sale badge text
- Sold out badge and Sold out badge text
- Collection badge and Collection badge text
- Click Save.
Change badge font
- Go to Theme settings > Fonts.
- Open Badge font (and Badge text transform / size if needed).
- Click Save.
Control sale badge wording
Theme settings > Product cards:
- Enable sale badge — turn sale labels on or off.
- Sale badge type — text ("Sale"), percentage off, or amount off.
Collection name badges use Collection badges on the same panel — enter collection handles to show.
Other settings
Card layout and quick view are in Product cards. Color scheme card surfaces are separate from badge colors — Colors.