The Inputs tab sets the look of every form field on your store at once: the checkout form, the contact form, the newsletter signup, and the write a review form.
Where to find it
Open the builder, click the gear icon, and open the Inputs tab. It has two parts: Layout and Appearance.
Layout: Type
Type controls how input labels are displayed in forms. It has two options: Collapse (the default) and Expand. They place the label of each field a little differently, and the result depends on your theme. Switch between them and look at your checkout form in the preview to choose.
Appearance: Icons
Most fields have a small icon, such as a phone for the phone number or a pin for the address. Icons decides where it shows:
- None: no icons. Fields look plain and simple.
- Default: the icon is inside the field.
- Label: the icon is next to the label, above the field.
With Default, a Position setting appears. Start puts the icon before the text, End puts it after the text. Start and End follow the reading direction, so on an Arabic page Start puts the icon on the right.
Whatever style you pick, required fields keep their small red mark.
Which fields follow these settings
Every kind of field follows them: text fields, lists such as shipping and payment, dropdowns such as city, the birthday date field, and the color field. The labels and placeholders themselves are not set here. For the checkout form they are in the Checkout form tab, and for the contact form, newsletter, and review form they are in those sections.
Where field colors come from
The colors of fields are not set here. They come from the Input colors of the color scheme the form uses: background, label, text, border, and hover background. See Color schemes.
Which fields show on the checkout
This tab only changes the look. To show, hide, rename, or reorder the checkout fields, use the Checkout form tab. See Checkout form fields.
Common tasks
- A clean, minimal checkout: set Icons to None.
- Help shoppers understand each field fast: set Icons to Default and Position to Start.
- Fields look crowded on phones: try Icons set to Label, so the field itself has more room for text.
- The label position looks odd with my theme: switch Type to the other option and compare.
Good to know
- These settings belong to the market you are editing and apply to all its pages.
- Changes go live when you click Publish.
- The line weight of the icons follows the Icons settings.
- Changed your mind? Undo the change in the builder. See Shortcuts, undo and redo.