Shopify Radio Button Option Setup — Complete Guide

Radio vs checkbox vs dropdown vs button group

Pattern	Selection type	Visibility	Best for
Radio	One from group (mutually exclusive)	All visible	2-6 shipping speeds, warranty tiers, package styles
Checkbox	Independent yes/no (multiple selectable)	All visible	Add-ons (gift wrap + warranty + rush)
Dropdown	One from group	Hidden until click	7+ text values (shoe sizes 5-13)
Button group	One from group	All visible	2-6 sizes / colors (looks like radio but styled as buttons)

Common radio button use cases

• Shipping speed: Standard (Free) / Express (+$15) / Overnight (+$35)
• Warranty tier: 1-year included / 2-year (+$99) / 3-year (+$149)
• Package style: Standard box / Premium gift box (+$8) / Reusable bag (+$3)
• Card style: Elegant / Modern / Playful / Minimalist
• Print method: DTG / Screen print / Embroidery (each with different pricing tier)
• Delivery preference: Ship to me / Ship to recipient / Local pickup

Setup with Print It My Way (5 minutes)

1. Install Print It My Way (Free plan supports 1 radio field)
2. Dashboard → New Personalizer → drag in Radio field
3. Configure:
   • Label: "Shipping speed"
   • Values (one per line):
     • Standard (free, 5-7 days)
     • Express (+$15, 2-3 days)
     • Overnight (+$35, 1 day)
   • Default selected: Standard
   • Required: Yes (mandatory choice)
   • Pricing tab → Per-value fee: $0 / $15 / $35
4. Attach personalizer to product
5. Test — verify Cart Transform applies correct fee per selection

Native theme code (free, no app)

Radio buttons via product-form.liquid:

<fieldset>
  <legend>Shipping speed</legend>
  <label>
    <input type="radio" name="properties[Shipping]" value="Standard" checked>
    Standard (free, 5-7 days)
  </label>
  <label>
    <input type="radio" name="properties[Shipping]" value="Express">
    Express (+$15, 2-3 days)
  </label>
  <label>
    <input type="radio" name="properties[Shipping]" value="Overnight">
    Overnight (+$35, 1 day)
  </label>
</fieldset>

Captures selection as line-item property. No fee applied unless you set up Cart Transform (Plus native or via personalizer app).

Styling radio buttons as modern UI

Native radio buttons look outdated. Style as pill-shaped selectable cards:

fieldset { border: none; padding: 0; }
fieldset label {
  display: block;
  padding: 14px 18px;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 8px;
  min-height: 44px;
  transition: all 0.15s;
}
fieldset label:hover { border-color: #059669; }
fieldset input:checked + span,
fieldset label:has(input:checked) {
  border-color: #059669;
  background: #ecfdf5;
}
fieldset input[type="radio"] {
  margin-right: 12px;
  accent-color: #059669;
}

Radio with images/icons per option

Add visual context to each option:

• Shipping speed: rocket icon for Overnight, plane for Express, truck for Standard
• Package style: image thumbnail of each package option
• Print method: swatch showing DTG vs screen print texture

Personalizer apps support icon/image radios natively. Print It My Way Pro allows image upload per option value.

Mobile UX rules

• Full-width options on mobile (each option takes 100% row)
• 44 × 44 px minimum tap target
• Selected state visually distinct (border + background color change)
• Fee inline in label ("Express (+$15)") — not buried in fine print
• Default selected value to reduce friction

Combining radio with other fields

Common pattern: Radio triggers additional fields via conditional logic.

• Radio "Shipping speed" = Overnight → show "Rush processing terms" text
• Radio "Delivery" = Local pickup → show "Pickup date" date picker
• Radio "Package" = Premium gift box → show "Gift message" text field

Frequently asked questions

Related setup guides

• Checkbox Setup
• Dropdown Setup
• Conditional Logic