Input Components

Input Components allow you to collect custom information from customers during checkout, enabling personalization, custom orders, special instructions, and data collection.

Overview

Input components provide powerful tools for gathering customer information during checkout. Whether you need to collect gift messages, personalization text, delivery preferences, or custom selections, input components make it easy to create forms that integrate seamlessly with your checkout flow.

Available Input Components

Text Input Field

Collect custom text from customers for personalization, gift messages, special instructions, or delivery notes. Supports single-line and multi-line text areas with character limits and validation.

Best for: Gift messages, engraving text, special delivery instructions, custom notes

Checkbox Input

Single checkbox for yes/no choices, confirmations, or opt-ins. Can be required to block checkout. Supports banner-style (prominent) or inline (subtle) display.

Best for: Gift wrap options, marketing consent, age verification, terms acceptance

Dropdown Selection

Dropdown menu for selecting from predefined options you configure. Good for delivery preferences, gift options, or any scenario with 5+ choices.

Best for: Delivery time slots, gift card designs, custom option selections (5+ options)

Date Picker

Calendar interface for selecting dates. Disable weekends, specific dates, or date ranges. Set buffer days for minimum lead time.

Best for: Delivery dates, event dates, special occasion dates

Radio Button Selection

Radio buttons for selecting one option from 2-5 choices. Displays all options visibly (better UX than dropdown for short lists). Supports images for visual selection.

Best for: Gift wrap styles with images, delivery methods (Standard/Express/Overnight), packaging options (2-5 options)

Building Forms with Multiple Inputs

You can combine multiple input components to create complete forms. Each input component is separate but they work together to collect comprehensive customer information.

Example: Gift Order Form

  1. Checkbox: "This is a gift order"
  2. Text Field: "Gift message" (shown only when checkbox is checked - use Display Rules)
  3. Dropdown: "Gift wrap style"
  4. Date Picker: "Preferred delivery date"

Example: Custom Product Form

  1. Text Field: "Personalization text (max 20 characters)"
  2. Radio Buttons: "Font style" (3 options with images)
  3. Dropdown: "Color preference"
  4. Checkbox: "Rush processing (+$15)"

Data Storage Options

When customers submit information through input components, you must choose where that data is stored in Shopify. Each storage option has different use cases and visibility.

Order Attributes

Key-value pairs attached to the order, visible in Shopify admin order details.

Best for: Information fulfillment team needs to see, custom selections that affect order processing

Order Notes

Text appended to the order notes field (same field customers can add notes in).

Best for: Gift messages that should appear on packing slip, special instructions for fulfillment

Metafields

Structured data storage with namespace and key, accessible via Shopify admin and API.

Best for: Structured data you want to query later, information used by external systems via API

Validation Options

Required Fields

Mark any input component as "required" to force completion before checkout. Required fields block checkout until completed.

Character Limits (Text Fields)

Set maximum character limits for text inputs to control engraving length, message size, or prevent excessive input.

Date Restrictions (Date Picker)

  • Disable weekends for delivery dates
  • Disable specific dates (holidays, blackout dates)
  • Disable date ranges (entire periods unavailable)
  • Set buffer days for minimum lead time

Predefined Options (Dropdown/Radio)

Control exactly what options are available by predefining all choices. Customers can only select from your list.

Best Practices

1. Only Ask What You Need

Every field adds friction. Only collect information you'll actually use.

2. Use Appropriate Input Types

  • Use radio buttons (not dropdown) for 2-5 options
  • Use dropdown for 6+ options
  • Use date picker (not text field) for dates
  • Use checkbox for yes/no questions

3. Provide Clear Labels and Help Text

  • Labels should be concise and clear
  • Use help text to provide additional guidance
  • Show examples in placeholder text

4. Consider Mobile Experience

  • Test all forms on mobile devices
  • Ensure text is readable at mobile sizes
  • Make buttons/checkboxes large enough to tap easily
  • Consider vertical layouts for mobile

5. Use Display Rules Strategically

  • Show/hide fields based on other selections
  • Don't show gift message field unless "This is a gift" is checked
  • Show rush processing only for orders under certain cart total

6. Set Sensible Defaults

  • Pre-select common options when possible
  • Use placeholder text to guide input
  • Default checkboxes to unchecked (opt-in, not opt-out)

7. Test Validation

  • Ensure required fields actually block checkout
  • Test character limits work as expected
  • Verify date restrictions function correctly
  • Test what happens when customers skip optional fields

8. Choose Storage Option Carefully

  • Consider who needs to see the data
  • Think about how data will be used
  • Test that data appears where expected
  • Verify fulfillment team can access needed information

Common Use Cases

Gift Shop

Components: Checkbox ("This is a gift"), Text Field (gift message), Dropdown (gift wrap style), Radio Buttons (card design), Date Picker (delivery date)

Storage: Gift message → Order Notes, Gift wrap → Order Attributes, Delivery date → Order Attributes

Custom Engraving

Components: Text Field (engraving text), Radio Buttons (font style), Dropdown (engraving location)

Storage: All → Order Attributes (engraving team needs structured data)

Authority to leave

Components: Checkbox (Authority to leave) - customers confirm that they are happy to leave the order unattended

Storage: Authority to leave → Order Attributes

Display Rules

All input components support conditional rendering through Display Rules. This allows you to show/hide inputs based on:

  • Cart contents
  • Customer information
  • Other input values
  • Cart total
  • Shipping method
  • And more

See Conditional Rendering documentation for complete details.

Limitations

Storage options available for all input types. Some validation options vary by input type.

For detailed documentation on each input component type, click on the component links above. For comprehensive information about building forms, see our examples and best practices sections.