The Font Swatch option type displays font options as visual swatches, showing each font rendered as a preview. Customers see exactly how their text will look before selecting.
When to Use Font Swatch
- Products with text engraving, embroidery, or printing
- You offer multiple font styles and want customers to compare visually
- Paired with a Text Input for live preview of typed text in the selected font
How to Add a Font Swatch
- In the option set editor, click Add Option.
- Select Font Swatch from the list.
- Name your option (e.g., “Font Style”, “Engraving Font”).
- Add font values — each displays as a visual preview showing the font style.
- Optionally, set additional pricing for premium fonts.
Configuration Options
Font Preview Text
Each swatch shows a preview of the font. The preview text can be customized to match your product context (e.g., “ABC” for monograms, “Hello” for general use).
Single Select
Font Swatch is always single-select — customers pick one font for their customization.
Live Preview Integration
When combined with a Text Input option and live preview, the customer’s typed text renders on the product image in the selected font in real time. To set this up:
- Add a Font Swatch option
- Add a Text Input option
- In the live preview editor, link the text layer’s font to the Font Swatch option
Example Use Cases
- Jewelry engraving — Script, Block, Italic, Old English
- Monogramming — Vine, Circle, Diamond monogram styles
- Custom printing — Modern, Classic, Handwritten, Serif
Best Practices
Limit font options to 4–8 choices. Too many fonts overwhelm customers and slow down decisions.
Name fonts descriptively (“Elegant Script” instead of “Font 3”) so customers understand the style without needing to compare closely.
If offering curved text, test each font with the curvature settings to ensure all fonts render cleanly at the selected arc radius.
