Keystone Documentation

Appearance

Radio ​

Present customers with always-visible choices using radio buttons for single selection.

Overview ​

Radio is a selection option type that displays multiple choices as always-visible radio buttons. Customers click to select one option from the list. It's ideal for presenting a small number of important choices that should always be visible.

Use Radio for:

  • Size selections (S, M, L, XL)
  • Yes/No questions
  • Priority levels (Standard, Express, Overnight)
  • Material or style choices
  • Important selections that shouldn't be hidden

Key characteristics:

  • Single selection from multiple values
  • All options always visible (not collapsed)
  • Can be marked as required
  • Values can have price add-ons
  • Values can be reordered by dragging
  • Supports default selection

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name displayed to customers (e.g., "Select Size")
Option is required for this option setIf enabled, customers must select a value before adding to cart
Hide Label from storefrontIf enabled, only the radio buttons are shown (label is hidden)

Advanced Settings ​

SettingDescription
Internal LabelAdmin-only identifier (replaces label in options list)
Help TextAdditional guidance shown to customers (based on display mode)

Radio Options (Values) ​

Each radio button value can be configured with:

SettingDescription
Value NameOption text shown next to radio button (max 255 characters)
Pre-selected by defaultIf enabled, this radio button is selected when page loads
PricingThree options: Free (default), Add fee, Link variant

Managing values:

  • Add Value button creates new radio 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.

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 Radio ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Radio 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 Radio 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 radio buttons 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 radio buttons

Priority Level ​

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

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

Result: Service tiers with Standard pre-selected

Material Choice ​

Label: Material Required: No Values:

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

Result: Optional material selection with visible pricing

Yes/No Question ​

Label: Add Gift Wrapping? Required: No Values:

  • No, thanks [Free]
  • Yes, add gift wrapping (+$5.00)

Result: Simple yes/no choice with optional upgrade

Customer Experience ​

Radio button interaction:

  1. Customer sees label and all radio button options
  2. All choices visible immediately (no clicking to expand)
  3. Clicks radio button to select
  4. Selected button is filled/highlighted
  5. Previous selection automatically deselected
  6. If priced, sees price next to option (e.g., "Large (+$10.00)")

Price display:

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

Styling ​

Radio buttons inherit styling from your theme and customization settings:

Best Practices ​

Value organization:

  • Order logically (small to large, cheap to expensive)
  • Use drag handles to reorder easily
  • Most common selections near top
  • Limit to 2-6 options for best UX

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 readable at a glance

Set appropriate defaults:

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

Pricing best practices:

  • Show prices clearly next to each option
  • Use Add Fee for fixed costs
  • Use Link Variant for existing products
  • Keep pricing transparent

Consider radio vs other types:

  • Use Radio for: 2-6 options, always-visible preferred, single choice
  • Use Dropdown for: 5+ options, space-saving needed
  • Use Checkbox (Multi) for: Multiple selections allowed
  • Radio buttons make choices obvious and accessible

Mobile optimization:

  • Radio buttons work well on mobile
  • Ensure adequate tap target size
  • Verify spacing between options
  • Test that price text doesn't wrap awkwardly

Limit option count:

  • Best for 2-6 options
  • More than 6 becomes overwhelming
  • Consider Dropdown for many options
  • Keep vertical space manageable