Create a Radio Button

1. How Does the Radio Button Display?

The Radio Button option displays as a small circular icon next to a label, allowing users to select only one choice from a list of options. Once a user selects a radio button, any previously selected option is automatically deselected. This ensures a single, definitive answer.

Example of how it appears on a product page:

2. How to Create a Radio Button

Step 1: Add a New Option

• Click Add Option > Radio Button to create a new option

Step 2: Add information to the Radio Button

• Enter an option name for the Radio Button (e.g., "Customize Your Candle", "Choose Scent")
  
• Add the option values (e.g., Lavender, Vanilla, Citrus, Rose, Coconut, Eucalyptus).

• Tick on “This option is required” if you want customers must choose the option before checking out.

How it will look on the storefront:

• Tick on ‘Hide option name” if you don’t want to show the option name above the option values on the Product page.

How it will look on the storefront:

Other features:

• Price Add-On > Create Fee – What is it & How to Use
  
• Price Add-On > Assign to Variant – What is it & How to Use
  
• SKU – What is it & How to Use
  
• Quantity – What is it & How to Use

Step 3: Advanced Settings (If Needed)

• Conditional Logic: Enable conditional logic if you want the Radio Button to show/hide only when a customer selects a specific option from another field. How to set up Conditional logic?

• Help text: Add a short description to explain the purpose of the Radio Button option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).

Here is an example of the Help text as Tooltips looks like on the storefront:

• Default value: Pre-select the Radio Button options every time the customer goes to the site. It can save time for customers by providing common or expected choices.

Example: You want the option value “Rose” to be selected automatically when customers enter the product page.

How it looks like in your storefront:

Step 4: Save and Test

• Click Save to apply the settings.

• Visit the product page on your store to check if the Radio Button option works correctly.

3. Real-World Applications of Radio Button

Radio buttons are ideal for making single, decisive selections when only one option can apply:

• Product Variations: Select one size, color, or material per product.
  
• Shipping Methods: Choose between standard, express, or same-day delivery.
  
• Surveys & Forms: Answer yes/no questions or pick one option from a list.

4. Key Features of Radio Button

• The Radio Button let users choose only one option from a predefined list, ensuring clear, exclusive selections. When displaying many option values, they can be arranged in a single line or inline layout to save space and maintain a clean, organized design.

Updated on: 26/04/2025