Keystone Documentation

Appearance

Font Picker (Dropdown) ​

Let customers choose a font from a compact dropdown, with fonts sourced from Google Fonts.

Overview ​

Font Picker (Dropdown) is a selection option type that displays your font choices in a collapsible dropdown menu. In the admin, you add fonts via a Google Fonts modal (kept up to date with the newest Google Fonts). On the storefront, customers select a single font. The selected font is shown in the storefront and can be used in conditions.

Use Font Picker (Dropdown) for:

  • Font selection with many choices where you want to save space
  • Products where font is important but should not take up much page real estate
  • Any single font selection that should work well on mobile and compact layouts

Key characteristics:

  • Single selection from multiple fonts
  • Space-efficient (collapsed by default)
  • Fonts are added from the Google Fonts modal (updated with newest fonts)
  • Can be marked as required
  • Values can have price add-ons
  • Values can be reordered by dragging
  • Supports default selection
  • Selected value can be used in Conditional Logic

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name displayed to customers (e.g., "Choose a Font")
Option is required for this option setIf enabled, customers must select a font 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 a font")

Font Options (Values) ​

Each font value can be configured with:

SettingDescription
FontSelect a Google Font from the font picker modal
Pre-selected by defaultIf enabled, this font is selected when the page loads
PricingThree options: Free (default), Add fee, Link variant

Managing values:

  • Use the Google Fonts modal to add fonts
  • Drag handle (⋮⋮) to reorder font values
  • Chevron (⌄) to expand a value's settings
  • Each value can have its own pricing

Pricing Options ​

Free (Default) ​

No additional cost for selecting this font.

When to use: Included font choices, standard typography options

Add Fee ​

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

Example: Premium Font (+$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 font value to an existing Shopify product for automatic price syncing.

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 Font Picker (Dropdown) ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Font Picker (Dropdown) from the Option Type modal
  4. Enter a Label (e.g., "Choose a Font")
  5. Check Option is required if selection is mandatory
  6. (Optional) Click Advanced Settings to add Placeholder or Help Text
  7. In Font Options, add fonts via the Google Fonts modal
  8. (Optional) Expand (⌄) each value to set pricing or default selection
  9. Drag values to reorder
  10. Click Save in the contextual save bar

Use Cases ​

Compact Font Selection ​

Label: Choose a Font Required: Yes Placeholder: Select a font Values:

  • Roboto [Free]
  • Playfair Display (+$5.00) [Add Fee: $5]
  • Montserrat (+$3.00) [Add Fee: $3]
  • Lora [Free]
  • Poppins (+$2.00)

Result: A space-efficient font selector that scales well for longer font lists.

Optional Typography Upgrade ​

Label: Font (Optional) Required: No Placeholder: Choose a font (optional) Values:

  • Standard [Free]
  • Premium Serif (+$5.00)
  • Premium Script (+$8.00)

Result: Optional dropdown that keeps the product form clean while offering paid upgrades.

Customer Experience ​

Dropdown interaction:

  1. Customer sees label and dropdown field
  2. Clicks dropdown to open menu
  3. Views all available fonts in the list
  4. Clicks to select one font
  5. Selected font displays in the closed dropdown
  6. If priced, sees the add-on (e.g., "Montserrat (+$3.00)")

Font display:

  • The selected font is shown in the storefront
  • The selected font is included with the customer's selection and can be used in conditions

Styling ​

Font Picker (Dropdown) inherits styling from your theme and customization settings:

Best Practices ​

Use dropdown for larger font sets:

  • Dropdowns work well when you offer many fonts and need to conserve space
  • Consider using a placeholder to prompt selection ("Select a font")

Keep pricing clear:

  • If some fonts are premium, ensure the add-on is visible in the option label
  • Keep upgrade tiers consistent (e.g., +$2 / +$5 / +$8)

Defaults & required fields:

  • If you want customers to actively choose, prefer a placeholder and do not set a default
  • If a font is required, mark the option required so customers cannot skip it