When a shopper personalizes one of your products, they fill in a small form next to the live preview. This guide explains every field type that form can show, so you know what your customers see and how each one behaves. It is written for merchants who want to understand the customizer from the buyer’s side.
You decide which fields appear when you build the product in the Design Studio. The customizer then renders the right control for each one. Here is what each field does.
They fall into three groups: the general inputs (text, choices, numbers and dates), the pickers (colour and font), and the fields that belong to a specific element on the design.
Text and text area
A text field is a single line. The shopper types a name, a date, or a short phrase, and it flows straight into the matching text on the design.
A text area is the multi-line version. It grows as the customer adds more lines, so it suits longer messages like a note or a short verse.
When you set a maximum length on a text field, the customizer shows a live character counter under the input. It updates as the shopper types, for example 12/30, so they always know how much room is left. The counter only appears when a limit exists.
Text and text area fields can also carry font and color choices. When you allow them, small font tiles and color swatches appear directly under the input. The shopper picks one and the text on the design updates to match. That side of these fields is covered in choosing colors and fonts.
For a single-line text field, a configured format rule can show an inline “format is invalid” error. Text areas do not provide that same live format check. Read any remaining validation messages when submitting the design.
Choices: dropdown, radio, checkbox
These three field types let the shopper choose from options you define rather than type freely.
A dropdown shows a list of options. When you give it ten options or fewer, it stays a plain list. When it has more than ten, the customizer turns it into a searchable, type-to-filter list. The shopper starts typing, and the list narrows to matching options, which keeps a long list easy to scan.
Radio choices show each option as a pill. The shopper taps one to select it. You can attach a small image or a color swatch to each choice, so the pill shows a preview beside the label. This works well for things like a frame style or a thread color.
A checkbox is a yes or no toggle. It switches a layer in the design on or off, so the shopper can add or remove part of the artwork, such as a back-of-shirt graphic or an extra line of text.
If an option list is empty, the customizer hides that field from the shopper. The field stays out of sight until you add at least one choice in the Design Studio.
Number and date
A number field has minus and plus buttons around an editable value. The minus button stops at the configured minimum, and the plus button stops at the maximum; both use the configured step. Shoppers can also type a value, so check the field’s validation messages before continuing.
A date field uses the device’s own date picker. On a phone that means the native date wheel, and on a desktop it means the browser’s date control. A calendar-month field works the same way but uses the device’s month picker, so the shopper chooses a month rather than a full date.
Whatever the shopper picks flows into the matching text on the design, just like a text field.
Color and font pickers
A colour field is a row of swatches under a Choose a color heading. The swatches are the colours you allowed when you built the product, so a shopper cannot pick something your print process cannot produce. The chosen swatch takes an accent border.
A font field opens a Choose a font list. It starts on Select font… and, when the list is long, carries a Search fonts… box that narrows as the shopper types. Only the fonts you allowed appear.
Both work the same way as a dropdown from the shopper’s point of view: pick one, and the design updates behind the form.
Fields that belong to an element
Some fields are not a general input at all. They belong to a specific element on the design, and the customizer renders the control that element needs:
- A photo field is an upload area. See uploading a photo.
- A graphic field is a picker of your own artwork. See let customers pick a graphic.
- A map, route or trip field gives a location search, a file upload or a stop list.
- A star map, moon or calendar field gives a date, and sometimes a time and a place.
- An avatar field opens the character builder.
These follow the rules you set on that element rather than a generic field type. Each one is covered in smart elements.
Two more come from the product rather than the design: a variant picker for the version being bought, and an add-on picker for extras. See add-ons.
Required fields and validation
You can mark any field as required. A required field shows an asterisk next to its label, so the shopper knows it must be filled in.
If a required field is empty when the shopper presses Add to Cart, the customizer blocks the action and names the field to complete. Filling it resolves that missing-field error; other validation or availability checks may still need attention.
Where that message appears depends on the layout you chose. A single-page customizer has nothing to refuse until Add to Cart, and says “Please complete” with the field’s name. A step-by-step one refuses earlier, at the step boundary, and says “Please fill in:” with the field’s name; product will not add to cart shows that one.
Text and text area length limits show a live counter. A single-line text field can also show an inline format error while the shopper types. Check any remaining messages when submitting the design.
Why does my dropdown not show a search box?
The search box appears only when the dropdown has more than ten options. With ten or fewer, it stays a plain list.
Where do I choose which fields are required?
You set required fields in the Design Studio when you build the product, not in the customizer.
Can a shopper type past the character limit?
No. The maximum length you set stops further typing, and the counter shows how close they are to it.
To set up these fields and decide which ones shoppers can edit, see make fields customer-editable.