Selection types

The 11 option types where the customer chooses from a list you define — and how they differ from each other.

Selection types display a list of option values you define, and the customer selects one or several. Each value can have its own price, and each one can be linked to a real product for inventory.

Eleven option types

Type	Looks like	Reach for it when
Select	The browser's own dropdown	You want something plain and dependable
Dropdown	A styled dropdown	You want search, swatches, or the live preview
Color dropdown	A dropdown with a color per entry	Many colors, little vertical space
Image dropdown	A dropdown with a picture per entry	Many designs, little vertical space
Radio button	A vertical list, one choice	Values have long names or their own help text
Checkbox	A list, several choices	A menu of optional extras
Button	A row of buttons	Short values such as sizes
Color swatch	A grid of color chips	Color is the choice, and you want it visible
Image swatch	A grid of pictures	Patterns, materials, or designs you photograph
Font picker	A list of fonts, drawn in those fonts	The customer chooses the lettering
Product links	Links to other products	You want to send them elsewhere, not collect a choice

Comparing the selection types

Use this table to compare what each type supports.

Type	Multiple	Search	Swatch style	Out of stock	Slider layout	Personalizer
Select	Yes	No	No	No	No	No
Dropdown	Yes	Yes	Default, Image	Yes	No	Yes
Color dropdown	Yes	Yes	Color, Image	Yes	No	Yes
Image dropdown	Yes	Yes	Images only	Yes	No	Yes
Radio button	No	No	Default, Color, Image	Yes	No	Yes
Checkbox	Always	No	Default, Color, Image	Yes	No	Yes
Button	Yes	No	Default, Image	Yes	Yes	Yes
Color swatch	Yes	No	Color, Image	Yes	Yes	Yes
Image swatch	Yes	No	Images only	Yes	Yes	Yes
Font picker	Yes	Yes	No	No	No	No
Product links	No	No	No	Yes	No	No

The following selection types also offer Not allow deselect, which prevents the customer from clearing their choice once selected: Dropdown, Color dropdown, Image dropdown, Button, Color swatch, and Image swatch. This setting is available when Allow multiple is off. See Selection behaviour.

What they all share

• Option values — the list itself, with per-value prices, colors, images, and help text. See Working with option values.

• Label, Name, Hidden label

• Required field and Default value — except Product links, which collects nothing

• Help text and its position

• Conditional logic

• The add-on Add-on quantity dropdown — see Advanced add-on modes

• Column width and HTML class

Where the price lives

On a selection type, the price is set on each option value rather than on the option. This is the main difference from the input types, because different choices usually cost different amounts.

Set the price in the values table's Price column. Each value can use a different mode: linked to an existing product, generated by the app, or a plain price. See Where you can set add-ons.

Values with no price are free.

Swatch style and selection behavior are separate

Swatch style controls how an option looks, separately from how it behaves. A Checkbox can be displayed as color chips, and a Button can display images. The option type controls the selection behavior, and the style controls the appearance.

So don’t choose Color swatch simply because you want to show colors. Choose it when you want a grid layout with slider support. If you want colors in a vertical list with help text for each value, use a Radio button with Swatch style set to Color. See Swatch style and previews.

Notes

• Product links is the exception: it does not collect an answer and is not supported on Shopify POS. We recommend using only one Product links option per option set. See Product links.

• For long lists, consider three approaches: add search, use a collapsible layout or slider, or split the list across two options using conditional logic.