> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://seedgrow.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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
![Live Product Customizer](https://storage.crisp.chat/users/helpdesk/website/-/b/7/a/3/b7a3b0ed5d55d000/live-product-customizer-text-f_16nh1x3.png)

### 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!