Text Input

Accept single-line text like names or initials.

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.

Drag Text Input into the editor when shoppers need to enter names, initials, or short messages.

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.

Enable live preview when the typed value should appear on the product image.

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.

Drag the preview text to position it on the product image.

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.

Use the preview anchor to resize the text layer directly on the product image.

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.

Use a clear label so shoppers know exactly what text to enter.

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.

Required text inputs prompt shoppers before checkout if the field is empty.

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.

Character limits keep shopper input inside the printable or engravable area.

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 Add-on — Flat fee for this personalization option

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.

Placeholder text gives shoppers an example before they type.

Add a fixed surcharge to Text Input

Enter a flat amount in the Price Add-on field. Whenever the shopper fills in the text input, that amount is added to the cart total alongside the base product price.

Use a fixed surcharge when this personalization always adds the same 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.

Adjust the input radius to match your storefront form style.

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.

Badge Group

Text Area