Keystone Documentation

Appearance

Email ​

Collect email addresses from customers with automatic validation.

Overview ​

Email is an input option type that provides a text field specifically for email addresses. It automatically validates that the entered text is a properly formatted email address.

Use Email for:

  • Gift recipient email addresses
  • Contact information collection
  • Notification preferences
  • Digital product delivery
  • Custom order communications

Key characteristics:

  • Single-line email input field
  • Automatic email format validation
  • Can be marked as required
  • Supports placeholder text
  • Mobile-optimized keyboard

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name displayed to customers (e.g., "Email Address")
Option is required for this option setIf enabled, customers must enter a valid email before adding to cart
Hide Label from storefrontIf enabled, only the input field is shown (label is hidden)

Advanced Settings ​

SettingDescription
Internal LabelAdmin-only identifier (replaces label in options list)
Help TextAdditional guidance shown to customers (based on display mode)
PlaceholderGray text shown inside empty input field (e.g., "name@example.com")

How to Add Email ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Email from the Option Type modal
  4. Enter a Label (e.g., "Recipient Email")
  5. Check Option is required if email is mandatory
  6. (Optional) Click Advanced Settings to add Placeholder or Help Text
  7. Click Save in the contextual save bar

Use Cases ​

Gift Recipient Email ​

Label: Recipient Email Address Required: Yes Placeholder: recipient@example.comHelp Text: We'll send a gift notification to this email

Result: Required email field for gift recipient with notification note

Contact for Updates ​

Label: Email for Order Updates Required: No Placeholder: your@email.comHelp Text: Optional: Receive updates about your custom order

Result: Optional email field for order notifications

Digital Delivery ​

Label: Email for Digital Download Required: Yes Placeholder: email@example.comHelp Text: Your digital product will be sent to this email address

Result: Required email for digital product delivery

Custom Order Communication ​

Label: Contact Email Required: Yes Placeholder: contact@example.comInternal Label: Customer Contact Email

Result: Required email field for custom order communications

Notification Preferences ​

Label: Notification Email Required: No Placeholder: notifications@example.comHelp Text: Receive updates and special offers

Result: Optional email field for marketing communications

Validation ​

Automatic validation ensures:

  • Proper email format (name@domain.com)
  • Required @ symbol
  • Valid domain structure
  • No invalid characters

Validation occurs:

  • On field blur (when customer leaves field)
  • Before adding to cart
  • Error messages display for invalid formats

Styling ​

Email input fields inherit styling from your theme and customization settings:

Best Practices ​

Use clear placeholders:

  • Show example format: "name@example.com"
  • Avoid real email addresses as examples
  • Match placeholder to expected use
  • Keep it simple and recognizable

Explain email usage:

  • Use Help Text to explain why email is needed
  • Specify how the email will be used
  • Mention if it's for digital delivery
  • Note if email will receive notifications

Set appropriate requirements:

  • Required for digital delivery or notifications
  • Optional for marketing or updates
  • Test validation error messages
  • Ensure mobile keyboard shows email layout

Mobile optimization:

  • Email input triggers email keyboard on mobile
  • Includes @ and domain suggestions
  • Test on actual mobile devices
  • Verify autocomplete works correctly