Badge Group

Display selectable badge-style options.

Overview

Badge Groups display options as pill-shaped or rectangular buttons. Good for sizes, quantities, or any short-label options where all choices should be visible at once.

How to add a Badge Group option

Add a Badge Group when every choice should stay visible as a compact button.

Live Preview

Badge Group supports Live Preview. When enabled, selecting a badge updates the product image in real time.

General Settings

Label — The option group title (e.g. "Select Size")
Required — Whether at least one badge must be selected
Default Option — Pre-selected badge(s) when the page loads
Help Text — Guide text for customers
Allow Multiple — Let customers select more than one badge

Option Values

Each value needs a name. You can duplicate or delete values. Additional settings per value:

Price Add-on — Surcharge for specific selections
Variant Linking — Link to a Shopify variant for stock tracking

Switch to leading image badge style

Use leading images when each badge needs a small visual cue before the text.

Appearance

Badge Shape — Pill, rounded rectangle, or square
Border & Outline — Border style for selected and unselected states
Corner Radius — Adjustable corner rounding
Colors — Selected and unselected badge colors (inherits global primary color by default)
Label Position — Above or beside the badges

Change Badge Group size

Switch between large, medium, and small badge sizes to match the product page density.

Change Badge Group style (outline vs fill)

Choose outline, outline plus fill, or fill styles for selected and unselected badge states.

Conditional Logic

Use Conditional Logic to show or hide this option based on another selection. For example, show different size badges depending on the selected product type.

Dropdown

Text Input