Radio buttons.
Let customers choose one option from a visible set in Shopify checkout. Collect packaging choices, delivery preferences, or another structured response.
For Shopify Plus Checkout
Configure your component.
Define labels and saved values
Add each choice with a label customers understand and a value your order workflow expects. Set the field label, internal key, and optional help text separately.
Add context to each choice
Options can have their own help text and image. The editor also offers an optional associated product for a choice, so review the resulting behaviour when using that setting.
Set the layout and default
Group choices in a presentation similar to Shopify's delivery selector. Horizontal alignment is available when every choice has an image. Choose whether the first option is selected by default or the customer starts without a selection.
Choose where the response is saved
Save responses to an order attribute, a metafield, or an order note. Give each field a key that your fulfilment tools can recognise. Order note storage is available for a single field; use attributes or metafields when combining multiple fields.
Build a single-choice field with customer-facing labels and separate saved values. Give each option its own explanation or image, choose whether the first option starts selected, and control how the choices are grouped in checkout.
The tools behind your components.
Connect content, audience, and presentation controls. Available settings depend on the component and its version.
Good together.
Checkbox
Collect an acknowledgement or a simple preference at checkout. Use checkboxes for terms, delivery permission, or instructions tied to selected products.
Text field
Collect gift messages, delivery instructions, and order notes in Shopify checkout. Give customers a clear place to add the details your team needs.
Your questions, answered.
When should I use radio buttons in checkout?
Use radio buttons for a small set of visible choices where a customer selects one option per group, such as packaging or delivery preferences. Use a text field when the customer needs to answer in their own words.
Can the displayed option label differ from the saved value?
Yes. Each choice has separate Label and Value fields. Use clear wording for customers while saving a consistent value for fulfilment or reporting.
Can options include an image or explanation?
Yes. Give each option its own image and help text. Horizontal alignment is available when every choice has an image; grouped layouts can resemble Shopify's delivery selector.
Can I choose a default selection?
Yes. Configure whether the first option starts selected or the customer starts without a selection. Check that the starting state suits the information you are collecting.
Can a radio choice add a product to the cart?
Yes. An option can have an associated product. Selecting it adds that choice's product and replaces the previous choice. Use Radio upsell for a component dedicated to product-based add-ons.
Where are custom field responses saved?
Choose an order attribute, a metafield, or an order note, and give each field a recognisable key. Order note storage is for a single field; use attributes or metafields for multiple fields. Confirm that your packing-slip or fulfilment app reads the chosen location.
How do I add a custom field to Shopify checkout?
Create and name the input component in Checkout Components. Add the Latest Custom Field block in Shopify's checkout editor and enter that component name in the block settings. Choose one of the placements Shopify makes available and preview it before publishing.
Can I show the component only to certain customers or carts?
Yes. Use display rules based on products, cart value or quantity, customer tags, markets, or delivery details. Combine conditions with all or any logic and test representative carts before publishing.
Do I need Shopify Plus, and which app plan includes this component?
Yes. Checkout Components is built for Shopify Plus stores. Starter includes one content or input component; Growth and above include unlimited content and input components. Translations and thank-you page content are included on Growth and above.