Keystone Documentation

Appearance

Color Dropdown ​

Present customers with color-based choices in a compact dropdown menu format for single selection.

Overview ​

Color Dropdown is a selection option type that displays multiple color choices in a collapsible dropdown menu. Each option includes a color swatch (or multi-tone colors) and a name. Customers click to open the menu and select one color option from the list. It's ideal for color selections where you want the space efficiency of a dropdown combined with the visual clarity of color swatches.

Use Color Dropdown for:

  • Color selections
  • Material color options
  • Finish color choices
  • Style color variations
  • Any selection where colors help customers decide

Key characteristics:

  • Single selection from multiple color options
  • Space-efficient (collapsed by default)
  • Each option displays color swatch(es) and name
  • Supports single color or multi-tone (up to 4 colors per value)
  • Can be marked as required
  • Values can have price add-ons
  • Values can be reordered by dragging
  • Supports default selection
  • Similar to Swatch but in dropdown format

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name displayed to customers (e.g., "Select Color")
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 color")

Color Dropdown Options (Values) ​

Each color dropdown value can be configured with:

SettingDescription
Value NameOption name displayed to customers (max 255 characters)
Color(s)One to four color hex codes for this option
Pre-selected by defaultIf enabled, this value is selected when page loads
PricingThree options: Free (default), Add fee, Link variant

Color configuration:

  • Single color: Add one color with hex code (e.g., #FF0000)
  • Multi-tone: Add up to 4 colors for split effect
  • Click Add Color to add additional colors (max 4)
  • Each color displays as part of the swatch

Managing values:

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

Pricing Options ​

Free (Default) ​

No additional cost for this selection.

When to use: Standard color options included in base price

Add Fee ​

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

Example: Premium Color (+$10.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 "Premium Red" to your Premium Red 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 Color Dropdown ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Color Dropdown from the Option Type modal
  4. Enter a Label (e.g., "Select Color")
  5. Check Option is required if selection is mandatory
  6. (Optional) Click Advanced Settings to add Placeholder or Help Text
  7. In Color Dropdown Options, add your values:
    • Enter Value Name for each option
    • Add Color with hex code (e.g., #FF0000)
    • Click Add Color for multi-tone options (up to 4 colors)
    • 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 ​

Color Selection ​

Label: Choose Color Required: Yes Placeholder: Select a color Values:

  • Red [Color: #FF0000] [Free]
  • Blue [Color: #0000FF] [Free]
  • Green [Color: #00FF00] [Free]
  • Premium Gold [Color: #FFD700] (+$15.00)

Result: Required color dropdown with single color swatches for each option

Multi-Tone Color ​

Label: Select Color Combination Required: Yes Pre-selected: Blue/White Values:

  • Blue/White [Colors: #0000FF, #FFFFFF] (default)
  • Red/Black [Colors: #FF0000, #000000] (+$5.00)
  • Green/Yellow [Colors: #00FF00, #FFFF00] (+$5.00)
  • Three-Tone [Colors: #FF0000, #00FF00, #0000FF] (+$10.00)

Result: Color dropdown with multi-tone options, Blue/White pre-selected

Material Finish Colors ​

Label: Finish Color Required: Yes Values:

  • Matte Black [Color: #1A1A1A] [Free]
  • Glossy White [Color: #FFFFFF] [Free]
  • Metallic Silver [Color: #C0C0C0] (+$12.00)
  • Premium Gold [Color: #FFD700] (+$20.00)

Result: Material finish color dropdown with standard and premium options

Fabric Color Options ​

Label: Fabric Color Required: No Placeholder: Select fabric color (optional) Values:

  • Natural [Color: #F5E6D3] [Free]
  • Navy [Color: #000080] [Free]
  • Burgundy [Color: #800020] (+$8.00)
  • Charcoal [Color: #36454F] (+$8.00)

Result: Optional fabric color dropdown with free and priced options

Split Color Design ​

Label: Design Color Required: Yes Values:

  • Solid Red [Color: #FF0000] [Free]
  • Red/White Split [Colors: #FF0000, #FFFFFF] (+$5.00)
  • Red/White/Blue [Colors: #FF0000, #FFFFFF, #0000FF] (+$8.00)
  • Four-Color Design [Colors: #FF0000, #00FF00, #0000FF, #FFFF00] (+$12.00)

Result: Design color dropdown with single and multi-tone options

Customer Experience ​

Color dropdown interaction:

  1. Customer sees label and dropdown field
  2. Clicks dropdown to open menu
  3. Views all available color options with names
  4. Each option displays color swatch(es) and name
  5. Single colors show as solid swatches
  6. Multi-tone colors show as split swatches (up to 4 colors)
  7. Clicks to select one value
  8. Selected value displays in field (color swatch + name)
  9. If priced, sees price in value name (e.g., "Premium Gold (+$15.00)")

Visual display:

  • Color swatches shown in dropdown menu
  • Single colors display as solid swatches
  • Multi-tone colors display as split swatches (divided sections)
  • Value names displayed alongside color swatches
  • Selected option shows color swatch and name in closed dropdown
  • Clear visual representation of each color choice

Price display:

  • Prices shown inline: "Premium Gold (+$15.00)"
  • Total updates in cart
  • Each selection listed at checkout

Styling ​

Color dropdown menus inherit styling from your theme and customization settings:

  • Colors: Dropdown background, text, border colors from Colors
  • Border: Dropdown border thickness from Borders & Shapes
  • Radius: Dropdown corner radius from Borders & Shapes
  • Spacing: Option spacing from Borders & Shapes
  • Swatch Size: Color swatch size controlled in customization settings

Best Practices ​

Value organization:

  • Order values logically (standard to premium, free to paid)
  • Use drag handles to reorder easily
  • Group similar colors together
  • Most popular selections near top

Use clear value names:

  • Descriptive: "Navy Blue" vs "Blue"
  • Include relevant details: "Premium Metallic Gold"
  • Show prices in value names: "Premium Gold (+$15)"
  • Keep names concise but descriptive

Color accuracy:

  • Use accurate hex codes that match your product colors
  • Test colors on different screens and devices
  • Consider color blindness accessibility
  • Ensure colors accurately represent the product
  • Use standard color names when possible

Multi-tone color tips:

  • Use multi-tone for split color designs
  • Up to 4 colors per value
  • Colors divide evenly across the swatch
  • Test multi-tone swatches for clarity
  • Use when product has multiple colors

Set appropriate defaults:

  • Pre-select most common choice
  • Only one default per color 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
  • Standard colors typically free, premium colors priced

Consider color dropdown vs other types:

  • Use Color Dropdown for: Color choices, space-saving needed, 5+ options
  • Use Swatch (Single) for: Color choices, always-visible preferred, fewer options
  • Use Image Dropdown for: Visual choices with images instead of colors
  • Use Dropdown for: Text-based options without colors
  • Color Dropdown combines visual clarity with space efficiency

Mobile optimization:

  • Color dropdowns work well on mobile (native select)
  • Ensure color swatches are visible and clear on small screens
  • Test tap targets for easy selection
  • Verify color swatches display properly
  • Ensure pricing displays clearly

Color consistency:

  • Use consistent color representation across all options
  • Ensure hex codes match actual product colors
  • Test colors in different lighting conditions
  • Consider how colors appear on various devices

Accessibility:

  • Always include descriptive value names
  • Colors should complement, not replace, text
  • Test with screen readers
  • Consider color blindness - don't rely solely on color
  • Ensure sufficient contrast for text