The Badge Group option type displays choices as clickable pill-shaped buttons. It’s a visually clean alternative to dropdowns when you have a moderate number of text-based options.
When to Use Badge Group
- Options are text-based but benefit from being visible all at once (not hidden in a dropdown)
- You have 2–8 values
- You want a modern, button-style selection UI
How to Add a Badge Group
- In the option set editor, click Add Option.
- Select Badge Group from the list.
- Name your option (e.g., “Size”, “Style”, “Add-on”).
- Add your badge values.
- Optionally, set additional pricing per value.
Configuration Options
Single vs Multi-Select
- Single select — Customer picks one value (default)
- Multi-select — Customer can select multiple values (e.g., “Choose up to 3 add-ons”)
Additional Pricing
Each badge value can have its own add-on price displayed alongside the label.
Display Mode
Badge groups support both Standard and Accordion display modes.
Example Use Cases
- T-shirt sizes — S, M, L, XL, XXL
- Gift add-ons — Gift wrap, Card, Ribbon (multi-select)
- Engraving style — Block, Script, Italic
- Number of items — 1, 2, 3, 4, 5
Badge Group vs Dropdown vs Swatches
| Badge Group | Dropdown | Swatches |
|---|
| All options visible | ✓ | ✗ | ✓ |
| Visual (image/color) | ✗ | ✗ | ✓ |
| Multi-select support | ✓ | ✗ | ✓ |
| Best for many values | ✗ | ✓ | ✗ |
Best Practices
Badge groups work best with short labels (1–3 words). Long text labels will wrap awkwardly on mobile.
Use single-select for mutually exclusive choices (sizes) and multi-select for additive choices (add-ons).
