How can I add a custom text input field?
If your product requires additional inputs such as a personalized text, you can create additional form fields in the Upload field section of the field configuration.
Available field types:
Select a field type and enter the field name (where the input will be stored) and optionally add a form label:
In the preview, you will see your custom input field:
Select
For inputs with multiple values you can configure the allowed input values separated by comma.
The first value in the list is pre-selected when the page loads. This matters if the field is set to Required: because a value is already selected, the validation passes and the customer can add to the cart without ever opening the dropdown.
To start with an empty selection, begin the list with a comma:
, Red, Green, Blue
The leading comma creates a blank first entry. A blank value is treated as no selection, so a Required field now forces the customer to pick a real value before adding to the cart.
A placeholder text as the first value does not work for this. In a list like Please select, Red, Green, Blue the entry "Please select" is a normal value and satisfies the required check, the same way a single dash does. Use the leading comma for a true empty entry.
Color
The color field type will show a color picker and store the hex code (e.g: #FF0000) in the specified field name.
Default color
If you provide a single value the color picker will be set to the provided color. Customers can still open the color picker and select a different color.
Color selection
If multiple colors are provided e.g: #F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107
The input is changed to show only the allowed colors that the customers can choose from.
If these inputs are not enough for your use case or you need further assistance, please send us a request and we will be happy to help you out.
Changing the input fields position
The input field position can be changed to show on top or below the upload field. In the Preview, click on the theme edit button:
At the very bottom you can change the position:
Accessing custom input fields
The custom inputs from your customer are not stored inside the app. The inputs are stored on the cart items and will be visible in the Shopify Order View:
