Keystone Documentation

Appearance

Dropdown ​

Present customers with a list of choices in a compact dropdown menu format.

Overview ​

Dropdown is a selection option type that displays multiple choices in a collapsible menu. Customers click to open the menu and select one option from the list. It's ideal for presenting many choices in a space-efficient way.

Use Dropdown for:

  • Size selections (S, M, L, XL)
  • Material or finish choices
  • Style or color variations
  • Quantity options
  • Shipping or delivery methods

Key characteristics:

  • Single selection from multiple values
  • Space-efficient (collapsed by default)
  • Can be marked as required
  • Values can have price add-ons
  • Values can be reordered by dragging
  • Supports default selection

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name displayed to customers (e.g., "Size")
Option is required for this option setIf enabled, customers must select a value before adding to cart
Hide Label from storefrontIf enabled, only the dropdown 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)
PlaceholderText shown in dropdown before selection (e.g., "Select size")

Each dropdown value can be configured with:

SettingDescription
Value NameOption text shown to customers (max 255 characters)
Pre-selected by defaultIf enabled, this value is selected when page loads
PricingThree options: Free (default), Add fee, Link variant

Managing values:

  • Add Value button creates new dropdown options
  • Drag handle (⋮⋮) to reorder values
  • Chevron (⌄) to expand value settings
  • Each value can have its own pricing

Pricing Options ​

Free (Default) ​

No additional cost for this selection.

When to use: Included choices, style variations, non-priced options

Add Fee ​

Manually set a specific price that's added to the base product.

Example: Gift Wrapping (+$5.00)

How it works:

  • You enter the price amount
  • App creates a hidden Shopify product automatically
  • Price is added to cart when selected

Hidden Products

The app creates hidden products for Add Fee pricing. Do not edit or delete these products in Shopify.

Connect the value to an existing Shopify product for automatic price syncing.

Example: Link "Large" to your Large size product

How it works:

  • You select an existing product
  • Price automatically syncs with that product
  • Updates when you change the linked product price

How to Add Dropdown ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Dropdown from the Option Type modal
  4. Enter a Label (e.g., "Size")
  5. Check Option is required if selection is mandatory
  6. (Optional) Click Advanced Settings to add Placeholder or Help Text
  7. In Dropdown Options, add your values:
    • Enter Value Name for each option
    • Click Add Value for more options
    • Drag to reorder values
    • Expand (⌄) to set pricing or default selection
  8. Click Save in the contextual save bar

Use Cases ​

Size Selection ​

Label: Size Required: Yes Placeholder: Choose size Values:

  • Small
  • Medium (+$5.00) [Add Fee: $5]
  • Large (+$10.00) [Add Fee: $10]
  • X-Large (+$15.00) [Add Fee: $15]

Result: Required size dropdown with price increases for larger sizes

Material Choice ​

Label: Material Required: Yes Pre-selected: Cotton (first value) Values:

  • Cotton (default)
  • Linen (+$8.00)
  • Silk (+$25.00)

Result: Material dropdown with Cotton pre-selected

Finish Options ​

Label: Finish Required: No Placeholder: Select finish (optional) Values:

  • Matte [Free]
  • Glossy [Free]
  • Premium Metallic (+$12.00)

Result: Optional finish dropdown with free and priced options

Shipping Method ​

Label: Delivery Speed Required: Yes Values:

  • Standard Shipping (5-7 days) [Free]
  • Express Shipping (2-3 days) (+$10.00)
  • Overnight Delivery (+$25.00)

Result: Required shipping dropdown with speed and pricing

Linked Product Variant ​

Label: Add-On Product Required: No Values:

  • None [Free]
  • Protective Case [Link Variant: Case Product]
  • Extended Warranty [Link Variant: Warranty Product]

Result: Optional dropdown with products linked for price syncing

Customer Experience ​

Dropdown interaction:

  1. Customer sees label and dropdown field
  2. Clicks dropdown to open menu
  3. Views all available options
  4. Clicks to select one value
  5. Selected value displays in field
  6. If priced, sees price in value name (e.g., "Large (+$10.00)")

Price display:

  • Prices shown inline: "Medium (+$5.00)"
  • Total updates in cart
  • Each selection listed at checkout

Styling ​

Dropdown menus inherit styling from your theme and customization settings:

Best Practices ​

Value organization:

  • Order values logically (small to large, cheap to expensive)
  • Use drag handles to reorder easily
  • Group similar options together
  • Most popular selections near top

Use clear value names:

  • Specific: "Small (S)" vs just "S"
  • Include dimensions if relevant: "Medium (12 oz)"
  • Show prices in value names: "Premium (+$10)"
  • Keep names concise but descriptive

Set appropriate defaults:

  • Pre-select most common choice
  • Only one default per dropdown
  • Consider "Select..." placeholder instead
  • Test default selection UX

Pricing best practices:

  • Show prices clearly in value names
  • Use Add Fee for fixed costs
  • Use Link Variant for existing products
  • Keep pricing consistent and transparent

Consider dropdown vs other types:

  • Use Dropdown for: 5-15 options, space-saving needed
  • Use Radio for: 2-5 options, always-visible choices preferred
  • Use Swatch for: Visual choices (colors, patterns)
  • Dropdowns hide options until clicked

Mobile optimization:

  • Dropdowns work well on mobile (native select)
  • Test tap targets
  • Verify long value names don't truncate
  • Ensure pricing displays clearly