Text Input

Text Input collects short single-line personalization, such as names, initials, dates, or engraving text. It can update Live Preview, work with two-letter or three-letter Font Swatch monograms, align text left, center, or right, use a custom shadow, link to font and color controls, and adjust the price.

Overview

Text Input accepts a single line of text. Use it for names, initials, dates, or short custom messages.

How to add a Text Input option

Drag the Text Input block from the option panel into the canvas and drop it where the field should appear. The new option immediately shows up in the live preview.

Live Preview

Text Input supports Live Preview. When enabled, the typed text appears on the product image in real time. Configure font, size, color, and position in the preview layer settings. Pair with a Font Swatch to let customers choose the typeface.

Turn Live Preview on or off for Text Input

Open the Live Customizer panel on the right and flip the toggle for the Text Input option. When on, the typed text becomes a draggable layer on the product image; when off, the input renders as a plain form field.

Move the Text Input preview text

Click the preview text on the canvas to select it, then drag the bounding box to a new position over the product image. The coordinates update as you move it.

Resize the Text Input preview text

Select the preview layer and drag a corner anchor outward to enlarge the text or inward to shrink it. The font size scales proportionally as you drag.

Align text and add a custom shadow

Select the Text Input preview layer to choose left, center, or right text alignment. You can use an existing text effect or configure a custom box shadow when you need direct control over the shadow rather than a preset style.

Text color can use a fixed color or a linked Color Swatch. The effect or shadow color can also use its own custom color or linked Color Swatch, so shoppers can control the visible text and its effect color independently.

Two-Letter and Three-Letter Monograms

Monogram mode is configured on a Font Swatch option value, then linked to this Text Input. Choose Two letters or Three letters in the Font Swatch value, adjust each letter's size scale and the overall letter spacing, and review the result in the editor and swatch preview.

1. Create a Font Swatch value and change Font mode from Single Font to Monogram.
2. Choose the Two letters or Three letters layout and adjust its letter scales and spacing.
3. Link the Font Swatch to this Text Input.
4. Set the Text Input character limit to 2 or 3 so it matches the selected monogram layout.
5. Test each Font Swatch value and the exact character count on the storefront.

General Settings

• Label — The field label (e.g. "Enter your name")
• Required — Whether the field is mandatory
• Help Text — Guide text to help customers know what to enter
• Character Limit — Maximum number of characters allowed

Set the Text Input label

Select the option in the editor, then type a new value into the Label field in the right-side settings panel. The storefront preview updates as you type.

Make Text Input required

Toggle the Required switch on in the option settings. Shoppers will not be able to add the product to the cart until they have filled in the field.

Set a Text Input character limit

Enter a number in the Character Limit field to cap how many characters the shopper can type. The storefront input enforces the limit and shows a counter when the value is close to the cap.

Option Values

Text Input does not have predefined option values — the customer types their own text. Additional settings:

• Placeholder Text — Example text shown in the input field before typing
• Price adjustment — Fixed or percentage increase or decrease, or a linked variant price

Change Text Input placeholder text

Type your example text into the Placeholder field. The storefront input shows it in faded grey until the shopper starts typing, at which point it disappears.

Add a fixed surcharge to Text Input

A fixed increase is one available pricing setup. Select Increase by fixed amount and enter the amount. Whenever the shopper fills in the text input, that amount is added to the configured price.

Appearance

• Input Style — Border, outline, and corner radius of the text field
• Label Position — Above or beside the input

Change Text Input corner radius

Drag the Corner Radius slider in the appearance settings to round or sharpen the input field outline. The change is reflected in both the editor preview and the live storefront.

Conditional Logic

Use Conditional Logic to show or hide this option based on another selection. For example, show the name field only when "Add personalization" is selected.