Font Swatch

Offer font selection for text customization.

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.

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

Upload the font asset, then use it as a selectable font swatch value.

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.

Add a Text Input or Text Area option.
Add a Font Swatch option.
Select the text option in the editor.
In the right-side settings panel, use Link fontSwatch to choose the Font Swatch option that should control this text.
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

Connect the font swatch to a text input so the selected font updates the preview text.

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

Use fixed layout when the font swatch should render as a square tile.

Change Font Swatch label position

Place labels inside or outside the swatch box depending on the visual style.

Change Font Swatch size

Set font swatches to large, medium, or small.

Change Font Swatch corner radius

Adjust corner radius to make font swatches square, rounded, or softer.

Change Font Swatch style

Choose outline, outline plus fill, or fill styles for the swatch selection state.

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.

FAQ

Can Font Swatch control Text Input and Text Area?

Yes. A Font Swatch can be linked to either Text Input or Text Area through Link fontSwatch in the text option's right-side settings panel.

Does Font Swatch update Live Preview by itself?

Font Swatch works as a linked control. It changes the font used by a linked Text Input or Text Area live preview layer.

Can Font Swatch values have price add-ons?

Yes. Font Swatch values can have a Price Add-on when premium font styles should add an extra charge.

Can Font Swatch use inventory?

Yes. Font Swatch values can link to Shopify variants for stock tracking when a font style or production option has limited availability.

Color Swatch

Dropdown