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