Dropdown Selection

The Dropdown Selector is an input component that presents customers with a predefined list of options in a dropdown (select) menu format. This component is ideal when merchants need customers to choose from a specific set of values, particularly when there are more than 5 options. Unlike free-text fields, dropdowns limit customer input to only the options you define, ensuring data consistency and accuracy.

desc - Present customers with a dropdown menu of predefined options for consistent data collection.

Description

Complete control over available options with clean, compact interface. Predefine all options - customers select one from list. Ideal for limiting choices to specific values with more than 5 options. Set default selections and mark as required. See Input Components Guide for detailed form creation and storage information.

Limitations

• Best for more than 5 options (for 2-5 options, use Radio Button Selection)
• Options must be predefined
• Storage options: Order Attributes, Order Notes, or Metafields

Sample Use Cases

• How did you hear about us?: Collect how customers heard about the store from a predefined list of options

Display Rules

Supports advanced display rules for conditional rendering. See Display Rules System documentation for details.

Configuration

Setting Up Options

Define all available dropdown options:

Options List:
- Option 1: "Standard Delivery (3-5 days)"
- Option 2: "Express Delivery (1-2 days)"
- Option 3: "Next Day Delivery"
- Option 4: "Store Pickup"

Default Selection

Set a default option to pre-select for customers:

Default: "Standard Delivery (3-5 days)"

Required Field Toggle

• Description: When enabled, customers must make a selection to complete checkout
• Default: Usually OFF (optional)
• When to Make Required:
  • Information is essential for order fulfillment
  • Missing selection would cause fulfillment issues
  • Legal or compliance reasons
  • Affects product availability or pricing
• When to Keep Optional:
  • Selection is a nice-to-have
  • There's a reasonable default behavior without selection
  • You don't want to add checkout friction
• Impact: Required fields can reduce checkout conversion if not truly necessary

When to Use Dropdown vs Radio Buttons

Use Dropdown When:

✅ 6+ options available
✅ Limited vertical space
✅ Options are straightforward text
✅ Selection is optional

Use Radio Buttons Instead When:

✅ 2-5 options only
✅ Options need images
✅ Want all choices visible at once
✅ Better mobile experience desired

Best Practices

1. Clear Option Labels

✅ Good: "Express Delivery (1-2 days) - $15"
❌ Avoid: "Express"

✅ Good: "Red gift wrap with gold ribbon"
❌ Avoid: "Option 2"

2. Logical Option Order

Common ordering strategies:
- Most to least popular
- Cheapest to most expensive
- Alphabetical
- Chronological (for dates/times)

3. Meaningful Default

Set sensible defaults:
- Most popular option
- Standard/middle option
- "Please select..." for required fields

4. Keep List Manageable

Recommended: 6-15 options
Maximum: 20 options
Over 20: Consider alternative input method

Storage Options

Dropdown selections can be stored in:

1. Order Attributes: Key-value pairs on the order
2. Order Notes: Appended to order note field
3. Metafields: Structured data in order metafields

See Input Components Guide for detailed storage information and how to access collected data.

Examples by Use Case

Delivery Time Slots

Dropdown Label: "Preferred Delivery Time"
Options:
- "9 AM - 12 PM"
- "12 PM - 3 PM"
- "3 PM - 6 PM"
- "6 PM - 9 PM"
Default: "12 PM - 3 PM"
Required: Yes

Gift Card Design

Dropdown Label: "Gift Card Design"
Options:
- "Birthday - Balloons"
- "Birthday - Cake"
- "Thank You - Flowers"
- "Thank You - Hearts"
- "Congratulations - Stars"
- "Blank - No Message"
Default: "Blank - No Message"
Required: No

Custom Engraving Font

Dropdown Label: "Engraving Font Style"
Options:
- "Script - Elegant"
- "Block - Bold"
- "Cursive - Flowing"
- "Modern - Clean"
- "Traditional - Classic"
Default: "Script - Elegant"
Required: Yes (when engraving selected)