Font Swatch
Offer font selection for text customization.
Overview
Font Swatches let customers pick a typeface for personalized text. Each font option shows a preview image of the font style. Typically paired with a Text Input for the actual text entry.
Upload a custom font for Font Swatch
Live Preview
Font Swatch can be linked to a Text Input so customers choose a font and immediately see the typed text update in Live Preview.
Link Font Swatch to a Text Input
General Settings
- Label — The option group title (e.g. "Choose Font")
- Required — Whether a font must be selected
- Default Option — Pre-selected font when the page loads
- Help Text — Guide text for customers
Option Values
Each value needs a name and a preview image showing the font style. You can duplicate or delete values. Additional settings per value:
- Preview Image — Thumbnail showing the font style (use consistent dimensions)
- Price Add-on — Optional surcharge for premium font styles
Appearance
- Display Style — Grid or list layout
- Swatch Size — Small, medium, or large thumbnails
- Corner Radius — Square, rounded, or circle
- Border & Outline — Border style for selected and unselected states
- Label Position — Above or beside the swatches
Switch Font Swatch to fixed layout
Change Font Swatch label position
Change Font Swatch size
Change Font Swatch corner radius
Change Font Swatch style
Conditional Logic
Use Conditional Logic to show or hide this option based on another selection. For example, show font options only when text personalization is enabled.