Keystone Documentation

Appearance

Font Picker (Buttons) ​

Let customers choose a font using always-visible button selections, with fonts sourced from Google Fonts.

Overview ​

Font Picker (Buttons) is a selection option type that displays your font choices as always-visible buttons. In the admin, you add fonts via a Google Fonts modal (kept up to date with the newest Google Fonts). On the storefront, customers can pick a single font. The selected font is shown in the storefront and can be used in conditions.

Use Font Picker (Buttons) for:

  • Personalization where typography matters (invitations, signage, custom text styling)
  • Products with "Choose a font" as a key decision
  • Any single font selection that should be always visible and easy to compare

Key characteristics:

  • Single selection from multiple fonts
  • All font choices always visible (not collapsed)
  • 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 font buttons are 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)

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 (Buttons) ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Font Picker (Buttons) 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 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 ​

Typography Upgrade ​

Label: Choose a Font Required: Yes Values:

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

Result: Customers pick a single font via buttons, with clear premium upgrades.

Optional Premium Fonts ​

Label: Font Style (Optional) Required: No Pre-selected: Standard Values:

  • Standard [Free] (default)
  • Lora (+$2.00)
  • Poppins (+$2.00)

Result: Optional single font choice where premium fonts add a small fee.

Customer Experience ​

Button interaction:

  1. Customer sees the label and all font buttons
  2. Clicks a font button to select
  3. Selected font is highlighted
  4. Previous selection is automatically deselected
  5. If priced, the font shows the add-on (e.g., "Poppins (+$2.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 (Buttons) inherits styling from your theme and customization settings:

Best Practices ​

Keep the list curated:

  • Font buttons work best with a manageable number of choices (for example, 5–12)
  • Group fonts by style (Serif, Sans Serif, Script) via ordering

Use clear naming:

  • Use the Google Font's official name for consistency
  • If a font is premium, include pricing so the upgrade is obvious

Defaults & required fields:

  • If the font is a key choice, mark it required
  • If most customers choose a common font, set it as default