Text Input Field Component

The Text Input Field collects custom text input from customers for personalization, gift messages, special instructions, delivery notes, or any custom information you need to gather during checkout.

Description

Primary tool for collecting custom information. Supports single-line and multi-line text input. Set character limits, placeholder text, mark as required, and implement validation. Perfect for personalized products, gift messaging, special delivery instructions. See Input Components Guide for detailed form creation and storage information.

Limitations

Storage options: Order Attributes, Order Notes, or Metafields

Sample Use Cases

  • Gift Messages: Collect gift messages for gift purchases
  • Personalization: Gather custom engraving or personalization text
  • Special Instructions: Capture special delivery instructions or access codes

Storage Options

See Input Components Guide for detailed storage information:

  • Order Attributes: Key-value pairs visible in Shopify admin
  • Order Notes: Appended to order notes field
  • Metafields: Structured data storage with namespace

Key Features

  • Single-line and multi-line text areas
  • Character limits
  • Placeholder text
  • Required field validation
  • Custom labels and help text
  • Localization support

Text Field Types

Single-Line Text Field

Best for:
- Names
- Short messages (1 sentence)
- Email addresses
- Phone numbers
- Tracking codes
- Short personalization text

Characteristics:
- One line of text
- Good for <50 characters
- Horizontal layout

Multi-Line Text Area

Best for:
- Gift messages
- Special instructions
- Delivery notes
- Custom requests
- Longer personalization

Characteristics:
- Multiple lines (2-5 rows typical)
- Good for 50-500 characters
- Vertical layout
- Resize option (optional)

Configuration Options

Label

Purpose: Tells customer what to enter
Example: "Gift Message", "Engraving Text", "Special Instructions"
Best Practice: Clear, concise, action-oriented

Placeholder Text

Purpose: Shows example or format
Examples:
- "Enter your message here..."
- "e.g., Happy Birthday Sarah!"
- "Building code, gate access, etc."
Best Practice: Show example, not instructions

Help Text

Purpose: Additional guidance below field
Examples:
- "Max 20 characters for engraving"
- "Include any special delivery instructions"
- "This will appear on the gift card"
Best Practice: Clarify limitations or usage

Character Limit

Purpose: Restrict input length
Examples:
- Engraving: 20 characters
- Gift message: 200 characters
- Short note: 50 characters
Best Practice: Match your fulfillment capabilities

Use Case Examples

Gift Message

Field Type: Multi-line text area
Label: "Gift Message"
Placeholder: "e.g., Happy Birthday! Love, Mom"
Character Limit: 200
Required: No
Help Text: "This message will be included with your gift"
Storage: Order Notes (appears on packing slip)

Display Rule: Show when cart attribute "is_gift" = true

Custom Engraving

Field Type: Single-line text
Label: "Engraving Text"
Placeholder: "e.g., John & Jane 2024"
Character Limit: 20
Required: Yes (if personalization product in cart)
Help Text: "Max 20 characters including spaces"
Storage: Order Attributes (fulfillment needs to see)

Display Rule: Show when product tag contains "engravable"

Delivery Instructions

Field Type: Multi-line text area
Label: "Special Delivery Instructions"
Placeholder: "Building code, gate access, safe place to leave package, etc."
Character Limit: 300
Required: No
Help Text: "Optional - helps us deliver to the right place"
Storage: Order Attributes

Display Rule: Show when shipping method is "Home Delivery"

Recipient Name

Field Type: Single-line text
Label: "Recipient Name"
Placeholder: "e.g., Sarah Johnson"
Character Limit: 50
Required: Yes (when gift option selected)
Help Text: "Who should we address this gift to?"
Storage: Order Attributes

Display Rule: Show when "This is a gift" checkbox is checked

Custom Request

Field Type: Multi-line text area
Label: "Special Requests or Questions"
Placeholder: "Let us know if you have any special needs..."
Character Limit: 500
Required: No
Help Text: "We'll do our best to accommodate your request"
Storage: Order Notes

Display Rule: Always show

Validation Options

Character Limits

Soft Limit: Warning when approaching (e.g., "5 characters remaining")
Hard Limit: Prevents additional input

Implementation:
- Show character counter
- Update in real-time
- Clear messaging when limit reached

Required Fields

Validation: Cannot proceed without completion
Error Message: "This field is required"
Visual Indicator: Red border or asterisk (*)

Best Practice:
- Mark required fields clearly upfront
- Show error only after user attempts to proceed
- Focus on field when error occurs

Format Validation

Email Format: name@domain.com
Phone Format: (XXX) XXX-XXXX or international
URL Format: https://example.com

Implementation:
- Validate on blur (when user leaves field)
- Show clear error message
- Suggest correct format

Best Practices

Label Writing

✅ "Gift Message" (clear, concise)
✅ "Engraving Text" (specific)
✅ "Delivery Instructions" (descriptive)

❌ "Enter text here" (vague)
❌ "Message" (too generic)
❌ "What would you like engraved on your product?" (too long)

Placeholder Text

✅ "e.g., Happy Birthday Sarah!"
✅ "Building code, gate access, etc."
✅ "Max 20 characters"

❌ "Enter your message" (redundant with label)
❌ "Type here" (not helpful)
❌ Long instructions (use help text instead)

Help Text Usage

Use help text for:
✅ Character limits or restrictions
✅ Where/how information will be used
✅ Format requirements
✅ Examples of good input

Avoid:
❌ Repeating the label
❌ Obvious information
❌ Legal disclaimers (use separate component)

Character Limits

Set appropriate limits based on use:
- Engraving: 15-25 characters (physical constraint)
- Gift message: 150-250 characters (card size)
- Delivery notes: 200-300 characters (practical length)
- Special requests: 300-500 characters (allow detail)

Don't set arbitrary low limits - frustrates customers

Storage Decision Guide

Use Order Attributes When:

✅ Fulfillment team needs to see in admin
✅ Engraving, personalization, customization
✅ Important order specifications
✅ Need structured key-value data

Example: Engraving text, font choice, color selection

Use Order Notes When:

✅ Gift messages for packing slips
✅ General special instructions
✅ Information that reads as plain text
✅ Notes for fulfillment team

Example: Gift messages, delivery preferences

Use Metafields When:

✅ Building custom integrations
✅ Need to query data via API
✅ External systems need the data
✅ Advanced customization

Example: Custom app integration, structured data

For comprehensive guidance on building forms with multiple inputs, validation strategies, and data storage, see the complete Input Components Guide.