Buttons (Single)

Present customers with always-visible choices using button-style selections for single selection.

Overview

Buttons (Single) is a selection option type that displays multiple choices as always-visible buttons. Customers click a button to select one option from the list. Buttons are arranged horizontally and automatically wrap to the next row when horizontal space is full. It's ideal for presenting choices that should always be visible with a modern button interface.

Use Buttons (Single) for:

• Size selections (S, M, L, XL)
• Priority levels (Standard, Express, Overnight)
• Material or style choices
• Service tier selections
• Important selections that shouldn't be hidden
• Any choice where button interface is preferred

Key characteristics:

• Single selection from multiple values
• All options always visible (not collapsed)
• Values displayed as buttons
• Buttons arranged horizontally, wrap to next row when space is full
• Can be marked as required
• Values can have price add-ons
• Values can be reordered by dragging
• Supports default selection
• Functionally similar to Radio but with button appearance

Configuration

Basic Settings

Setting	Description
Label	Option name displayed to customers (e.g., "Select Size")
Option is required for this option set	If enabled, customers must select a value before adding to cart
Hide Label from storefront	If enabled, only the buttons are shown (label is hidden)

Advanced Settings

Setting	Description
Internal Label	Admin-only identifier (replaces label in options list)
Help Text	Additional guidance shown to customers (based on display mode)

Button Options (Values)

Each button value can be configured with:

Setting	Description
Value Name	Option text shown on the button (max 255 characters)
Pre-selected by default	If enabled, this button is selected when page loads
Pricing	Three options: Free (default), Add fee, Link variant

Managing values:

• Add Value button creates new button options
• Drag handle (⋮⋮) to reorder values
• Chevron (⌄) to expand value settings
• Each value can have its own pricing

Pricing Options

Free (Default)

No additional cost for this selection.

When to use: Included choices, style variations, non-priced options

Add Fee

Manually set a specific price that's added to the base product.

Example: Gift Wrapping (+$5.00)

How it works:

• You enter the price amount
• App creates a hidden Shopify product automatically
• Price is added to cart when selected

Hidden Products

The app creates hidden products for Add Fee pricing. Do not edit or delete these products in Shopify.

Link Variant

Connect the value to an existing Shopify product for automatic price syncing.

Example: Link "Large" to your Large size product

How it works:

• You select an existing product
• Price automatically syncs with that product
• Updates when you change the linked product price

How to Add Buttons (Single)

1. Navigate to Option Sets and open your option set
2. Click Add Option
3. Select Buttons (Single) from the Option Type modal
4. Enter a Label (e.g., "Size")
5. Check Option is required if selection is mandatory
6. (Optional) Click Advanced Settings to add Help Text
7. In Button Options, add your values:
   • Enter Value Name for each option
   • Click Add Value for more options
   • Drag to reorder values
   • Expand (⌄) to set pricing or default selection
8. Click Save in the contextual save bar

Use Cases

Size Selection

Label: Size Required: Yes Pre-selected: Medium Values:

• Small
• Medium (+$5.00) [Add Fee: $5] (default)
• Large (+$10.00) [Add Fee: $10]
• X-Large (+$15.00) [Add Fee: $15]

Result: Always-visible size buttons arranged horizontally, with Medium pre-selected

Shipping Speed

Label: Delivery Speed Required: Yes Values:

• Standard (5-7 days) [Free]
• Express (2-3 days) (+$10.00)
• Overnight (+$25.00)

Result: Required shipping options displayed as buttons, wrapping to next row if needed

Priority Level

Label: Service Level Required: Yes Pre-selected: Standard Values:

• Standard [Free] (default)
• Priority (+$15.00)
• Premium (+$30.00)

Result: Service tier buttons with Standard pre-selected

Material Choice

Label: Material Required: No Values:

• Cotton [Free]
• Linen (+$8.00)
• Silk (+$25.00)

Result: Optional material selection buttons with visible pricing

Multiple Options with Wrapping

Label: Choose Style Required: Yes Values:

• Modern [Free]
• Classic [Free]
• Vintage (+$10.00)
• Premium (+$20.00)
• Luxury (+$50.00)
• Custom (+$100.00)

Result: Multiple style buttons arranged horizontally, wrapping to new rows as space fills

Customer Experience

Button interaction:

1. Customer sees label and all button options
2. All choices visible immediately (no clicking to expand)
3. Buttons arranged horizontally in rows
4. Buttons wrap to next row when horizontal space is full
5. Clicks button to select
6. Selected button is highlighted/active state
7. Previous selection automatically deselected
8. If priced, sees price on or near button (e.g., "Large (+$10.00)")

Visual display:

• Buttons displayed side-by-side horizontally
• Buttons automatically wrap to next row when space fills
• Selected button shows active/highlighted state
• Clear button appearance with text labels
• Modern, clickable button interface

Price display:

• Prices shown on buttons: "Medium (+$5.00)"
• Total updates in cart
• Each selection listed at checkout

Styling

Buttons inherit styling from your theme and customization settings:

• Colors: Button background, text, border colors from Colors
• Border: Button border from Borders & Shapes
• Radius: Button corner radius from Borders & Shapes
• Spacing: Option spacing and button spacing from Borders & Shapes

Best Practices

Value organization:

• Order logically (small to large, cheap to expensive)
• Use drag handles to reorder easily
• Most common selections near beginning
• Consider how buttons will wrap on different screen sizes

Use clear value names:

• Specific: "Medium (M, 12 oz)" vs just "M"
• Include details in name: "Standard (5-7 days)"
• Show prices clearly: "Express (+$10)"
• Keep names concise to fit button width
• Consider button text length for wrapping

Set appropriate defaults:

• Pre-select most common choice
• Only one default per button group
• Consider not pre-selecting for true choice
• Test default selection impact on conversions

Pricing best practices:

• Show prices clearly on each button
• Use Add Fee for fixed costs
• Use Link Variant for existing products
• Keep pricing transparent

Consider buttons (single) vs other types:

• Use Buttons (Single) for: Modern button interface, always-visible preferred, single choice
• Use Radio for: Traditional radio button interface, similar functionality
• Use Dropdown for: Space-saving needed, many options
• Use Swatch (Single) for: Visual choices (colors, images)
• Buttons provide modern, prominent interface

Mobile optimization:

• Buttons work well on mobile
• Ensure adequate tap target size
• Buttons wrap naturally on small screens
• Verify spacing between buttons
• Test that price text displays clearly
• Consider button width on mobile devices

Button layout:

• Buttons arrange horizontally automatically
• Wrap to next row when horizontal space fills
• Consider number of buttons and screen width
• Test layout on different screen sizes
• Ensure buttons are easily tappable

Limit option count:

• Works well with 2-8 options
• More options create multiple rows
• Consider screen space and scrolling
• Test with your specific button count

Button text length:

• Keep button text concise
• Long text may cause awkward wrapping
• Test with your actual button labels
• Consider abbreviation for long names

Related

• Radio - Traditional radio button single selection
• Dropdown - Space-efficient single selection
• Swatch (Single) - Visual single selection
• Price Add-Ons - Detailed pricing documentation
• Internal Label - Admin-only identification
• Help Text - Additional context display
• Required Fields - Making options required