Keystone Documentation

Appearance

Color ​

Allow customers to select colors using an interactive color picker interface.

Overview ​

Color is an input option type that provides a color picker for customers to choose their preferred color. Customers can select from a color palette or enter specific hex color codes.

Use Color for:

  • Custom product colors
  • Personalization color choices
  • Theme or accent colors
  • Print color selection
  • Design color preferences

Key characteristics:

  • Interactive color picker interface
  • Can be marked as required
  • Returns hex color code value
  • Visual color selection
  • Supports custom color input

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name displayed to customers (e.g., "Choose Your Color")
Option is required for this option setIf enabled, customers must select a color before adding to cart
Hide Label from storefrontIf enabled, only the color picker 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)

How to Add Color ​

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

Use Cases ​

Custom Product Color ​

Label: Choose Your Color Required: Yes Help Text: Select the color for your custom product

Result: Required color picker for customers to choose product color

Personalization Accent ​

Label: Accent Color Required: No Help Text: Optional: Choose an accent color for personalization

Result: Optional color selection for personalization accents

Label: Print Color Required: Yes Help Text: Select the color for your custom print. We'll match as closely as possible.

Result: Required color picker with matching guidance

Theme Color ​

Label: Theme Color Required: No Internal Label: Customer Theme Preference

Result: Optional color picker for theme customization

Design Color Scheme ​

Label: Primary Design Color Required: Yes Help Text: Choose the main color for your design

Result: Required color selection for primary design color

Customer Experience ​

Color picker interface:

  1. Customer clicks on the color picker field
  2. Color picker popup opens
  3. Customer selects color visually or enters hex code
  4. Selected color displays in the field
  5. Customer can change color by clicking field again

Color input:

  • Visual color palette for easy selection
  • Hex code input for precise colors
  • Real-time color preview
  • Selected color value saved with order

Styling ​

Color picker inherits styling from your theme and customization settings:

Best Practices ​

Provide color guidance:

  • Use Help Text to explain color matching limitations
  • Mention if colors are approximate (screen vs print)
  • Explain how the color will be applied
  • Note any color restrictions if applicable

Set appropriate requirements:

  • Mark as required only when color is essential
  • Consider default color for optional pickers
  • Test color selection flow
  • Ensure validation works correctly

Consider color accuracy:

  • Note that screen colors may differ from physical colors
  • Mention color matching capabilities
  • Provide color samples or swatches if available
  • Set customer expectations for color reproduction

Use clear labeling:

  • Specific labels: "Thread Color" vs generic "Color"
  • Explain what the color applies to
  • Use Help Text for color guidelines
  • Match label to product context

Combine with other options:

  • Use with Descriptive Text for color instructions
  • Pair with product images showing color options
  • Consider using Swatches for predefined color sets
  • Color picker better for unlimited color choices

Mobile considerations:

  • Color picker works on mobile devices
  • Test touch interaction
  • Ensure picker is easily accessible
  • Verify color selection displays correctly