Button

A row of tappable buttons, the most compact way to display short choices such as sizes, with slider support for long lists.

A row of tappable buttons, with one button per value. Every choice is visible and selectable in one tap, making it ideal for short lists such as sizes.

It’s a familiar pattern for Shopify customers and works especially well on mobile. For longer lists, slider support keeps the options compact.

What customers see

A row of buttons that wrap onto more rows as needed, or a slider if you configure one. With Swatch style set to Image, each button shows a picture instead of text.

Short values as buttons — one tap, no opening or scrolling.

Basic

Setting	What it does
Label / Name	Customer-facing text, and the name on the order.
Required field	Blocks add to cart until one is chosen.
Hidden label	Hides the label.
Swatch style	Default or Image.
Option values	The choices, with prices and their own help text. See Working with option values.
Allow multiple	Lets the customer choose several. Reveals the two limits below.
Min selections / Max selections	How many they must and may choose.
Help text	Guidance for the whole option.
Default value	Preselects one or more values.
Conditional logic	Show or hide based on other choices.

Advanced

Setting	What it does
Add-on quantity / Quantity	How add-ons scale — including Mixed quantity when multiple is on.
Enable custom layout	Unlocks the layouts below.
Layout type	Expand, Collapse, or Slider.
Scroll type, Scroll height, Number of option values	Scroll area, for the Expand and Collapse layouts.
Number of rows, Swatches per row, Show navigation arrows, Show indicators, Slider style	Slider layout settings.
Not allow deselect	Stops the customer clearing their choice. Single-select only.
Direction style	Vertical or Horizontal.
Out of stock options	How sold-out values look.
Help text position	Where the option-level help text sits.
HTML class / Column width	Styling hook and field width.

Button is one of only three types with a Slider layout, alongside Color swatch and Image swatch.

Personalizer

Supported as an image layer. Each value can draw an image onto the product photo when it 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. With Allow multiple off, one charge applies. With it on, every selected value is charged, and Mixed quantity becomes available.

See Add-on pricing.

Keep values short

Buttons are sized to fit their text. Short values produce a compact row, and long values produce a stack of full-width blocks, which reads better as a Radio button list.

Works well as buttons	Better as radio buttons
S M L XL	Standard delivery, 3–5 working days
10cm 15cm 20cm	Gift wrapped in recycled paper with a ribbon
Matt Gloss Satin	Premium service including insurance
1 2 3 4	Anything needing its own help text

Examples

Sizes

Setting	Value
Label / Name	Size
Option values	S, M, L, XL, each linked to an add-on product for stock
Required field	On
Not allow deselect	On
Out of stock options	Strike-through
Direction style	Horizontal

Many sizes, as a slider

Twenty sizes, with Enable custom layout on, Layout type set to Slider, Number of rows 2, Swatches per row 5.5, and Show navigation arrows set to Show.

Quantity bands with prices

Values 1 pack, 3 pack, and 5 pack, priced through Existing product so each one maps to a real SKU.

Several finishes at once

Allow multiple on, Max selections 2, and Add-on quantity set to Mixed quantity.

Notes

• Available on all plans.

• Works in Shopify POS.

• The slider layout may not be available on all plans. See Compare plans.

• Per-value help text is supported, but there is little space for it inside a button. Radio button displays it better.

• Not allow deselect is hidden when Allow multiple is on.

• Values follow the order of the values table. For sizes, order them by size rather than alphabetically.