Build a Live Product Customizer: Text, Font Picker & Color Swatches

🎯 Goal

PRO PLAN Live Product Customizer allows your customers to:

1. Enter custom text (e.g., engraving name)
2. Choose a custom font or color
3. See the text rendered live on a product mockup image

Step 1: Upload Your Base Mockup Image

This will be the product image where personalization appears.

1. Go to Edit your option set
2. Open the Preview / Personalize section
3. Upload your base image (e.g., wallet mockup)
4. Ensure the image is centered and properly scaled

Step 2: Create the Custom Text Field

This is the text customers will enter.

1. Go to the Options tab
2. Click Add Option
3. Select Text Field
4. Name it something like: Print Content or Engraving Text
5. Configure: Placeholder text (e.g., “Enter your name”), Character limit (recommended for engraving), Required or optional

✅ Save the option.

This option will later be linked to the preview layer.

Step 3: Create a Font Picker Option

This lets customers choose typography.

1. Click Add Option and add a Font Picker
2. Name it something like: Engraving Font
3. Upload your font files (Supported formats: .woff, .woff2, .ttf, .otf, .eot)
4. Give your font names accordingly (e.g. Script, Serif, Sans-serif, etc.)

✅ Save the option.

Step 4: Create a Color Swatch Option

These will be color options for the text to be displayed in.

1. Click Add Option and name it something like Text Color
2. Choose option type as Swatches
3. Input your available HEX color values

Step 5: Build a Preview Text Layer

Set the Preview

• Connect the Text Content: Under Linked Option, choose the corresponding Engraving Text
• Connect the Font Picker: Under Font Source, choose the fixed font or your uploaded custom fonts
• Connect the Swatch Option: Under Color Source, pick the Swatches option you've created

Step 6: Define the Text Area on the Mockup (optional)

On the right preview panel:

1. Drag the text box to the engraving area
2. Resize using corner handles
3. Adjust alignment (center, left, right)

Under Shape:

Keep as Rectangle (default) or select Circle, Diamond, custom drawing shape, etc.

This clips text inside the defined area.

Useful if engraving area must stay within a specific zone.

Step 7: Test on Product Page

After saving the changes:

1. Assign the option set to your product(s)
2. Visit the product page
3. Enter text, change font and color
4. Confirm: preview updates instantly, font switches correctly, layout stays within engraving area

✅ Launch your product customizer!

Updated on: 12/02/2026