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

  1. Open the theme editor.
  2. Go to Theme settings > Colors.
  3. Under Badge colors, set:
  4. Sale badge and Sale badge text
  5. Sold out badge and Sold out badge text
  6. Collection badge and Collection badge text
  7. Click Save.

Change badge font

  1. Go to Theme settings > Fonts.
  2. Open Badge font (and Badge text transform / size if needed).
  3. 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.