Font Swatch

Font Swatch lets shoppers choose a font for personalized text. Link it to Text Input or Text Area with Link fontSwatch so the selected font updates the live preview text. Custom font uploads support selecting and uploading multiple TTF, OTF, WOFF, or WOFF2 files at once, up to 2 MB per file. Shoppers can select one font at a time from the Font Swatch.

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 custom fonts for Font Swatch

You can select and upload multiple custom font files in one upload. Each file can be a TTF, OTF, WOFF, or WOFF2 file up to 2 MB. WOFF2 is compressed for the web and is usually the preferred format when it is available from your font provider. Confirm that your font licenses permit storefront web use before uploading the files.

Batch upload affects only how merchants add font files. On the storefront, Font Swatch is single-select: a shopper can choose one font at a time for the linked text.

Two-Letter and Three-Letter Monograms

Monogram mode belongs to each Font Swatch option value. Open Edit option value, change Font mode from Single Font to Monogram, then choose Two letters or Three letters. You can scale each letter independently and adjust the overall letter spacing. The editor's right panel and the Font Swatch itself show the composed result as you configure it.

1. Create or select a Font Swatch option value.
2. Choose Monogram under Font mode, then select Two letters or Three letters.
3. Adjust each letter's size scale and the overall letter spacing.
4. Link the Font Swatch to a Text Input or Text Area.
5. Set the linked Text Input or Text Area character limit to match the two- or three-letter layout.
6. Test every font value and allowed character count on the storefront.

Live Preview

Font Swatch controls the font style, but it needs to be linked to a text option before it can update Live Preview. A Font Swatch can control either a Text Input or a Text Area.

1. Add a Text Input or Text Area option.
2. Add a Font Swatch option.
3. Select the text option in the editor.
4. In the right-side settings panel, use Link fontSwatch to choose the Font Swatch option that should control this text.
5. Save and test the product page.

After linking, the customer types text into the Text Input or Text Area, then chooses a font from the Font Swatch. The live preview text updates to use the selected font.

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
• Variant Linking — Link to a Shopify variant for stock tracking

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.