Radio button
A vertical list where exactly one choice can be made, and the clearest option type when the values need explaining.
A list where the customer selects one value. Unlike a dropdown, every choice is visible without opening anything, so use it when the values need to be read rather than only recognized.
This type is always single-select, so there is no Allow multiple setting. To let customers select several values, use Checkbox.
Watch it done — 1:14. Why upgrades hidden inside a dropdown get missed, and how a radio list puts every choice in front of the customer.
What customers see
A vertical list with a selectable marker beside each value. With Swatch style set, each value can also display a color chip or a picture.
Basic
Blocks add to cart until one is chosen.
Hides the label.
Default, Color, or Image.
Option values
The choices, with prices and their own help text. See Working with option values.
Guidance for the whole option.
Preselects one value.
Show or hide based on other choices.
Radio button has no placeholder.
Advanced
How the add-on scales with quantity.
Unlocks the collapsible layouts.
Expand or Collapse. No slider on this type.
Scroll type, Scroll height, Number of option values
Give a long list its own scroll area.
Vertical or Horizontal.
How sold-out values look.
Where the option-level help text sits.
Styling hook and field width.
Per-value help text
Radio button supports help text on each value, and because the list is always open, that text is always visible. No other single-select type displays the explanation and the choice together.
Use this type whenever the choices need explaining:
A dropdown hides that text until it is opened, and a button row has no space for it.
Personalizer
Supported as an image layer. Each value can have an image that is drawn onto the product photo when the value is selected. The settings are image shape, background mode, size, position, rotation, crop area, and customer controls. See Image layers.
Add-on pricing
Prices are set on each value, and each value supports all three modes. The option-level Add-on quantity controls how the charge scales.
Because only one value can be selected, there is either one charge or none. This makes Radio button a good type for tiered upgrades where the customer selects one level.
See Add-on pricing.
Radio button, Button, or Dropdown?
All choices visible
Yes
Yes
No
Per-value help text visible
Yes
Cramped
Only when open
Suits long value names
Yes
No
Yes
Vertical space used
Most
Little
Least
Slider layout
No
Yes
No
Examples
Delivery speed
Label / Name
Delivery speed
Option values
Standard, Express, Collect in store, each with its own help text
Prices
Standard free, Express $9.95, Collect free
Add-on quantity
One time charge, since delivery is per order
Default value
Standard
Required field
On
Three service tiers
Values Basic, Plus, and Premium, each with help text listing what it includes and its own price.
A finish, shown as colors
Swatch style set to Color, with values Matt black, Brushed brass, and Chrome, each with its color chip and its own lead-time note.
A long list, collapsed
Enable custom layout on, Layout type set to Collapse, and Scroll type set to By number of option values, showing eight.
Notes
Available on all plans.
Works in Shopify POS.
Single-select only.
There is no slider layout. Use Button or one of the swatch types for that.
There is no Not allow deselect setting. Use Required field with a Default value for a choice that can never be empty.
Values follow the order of the values table.
Last updated
Was this helpful?