Customise form design
Adjust spacing, borders, labels, shadows, and sizing for the storefront form.
Use the form block settings to match the form to your theme.
Where design settings live
Open the form block in the theme editor.
The styling controls are grouped into Layout, Input Styling, and Advanced Styling.
Update the form design
Layout settings
Form Padding
Controls the space inside the outer form container.
Use more padding for standalone forms.
Space Between Inputs
Controls the gap between fields.
Increase this when validation messages or helper text feel cramped.
Form Max Width
Limits how wide the form can grow.
Use a narrower width for single-column forms.
Input styling
Input Padding
Controls the spacing inside each field.
This affects how dense or open the form feels.
Border Style
Controls how the field edge is drawn.
Use a style that matches the rest of the theme inputs.
Border Width
Sets the thickness of the field outline.
Border Radius
Rounds the field corners.
Small changes here usually make the biggest visual difference.
Advanced styling
Input Box Shadow
Adds or removes depth around the field.
Use a subtle shadow if your theme already uses elevated inputs.
Transition Duration
Controls how quickly hover and focus changes animate.
Short values feel more immediate.
Label Position
Controls where labels appear relative to the field.
Above Input is the safest choice for longer labels.
Input Height
Sets the height of each field.
Increase this for touch-heavy forms.
Recommended defaults
Start here if you want a clean baseline:
medium form padding
clear spacing between inputs
max width around the content column
labels above inputs
modest border radius
short transition duration
Design tips
Use full-width fields for long answers.
Keep email and phone fields tall enough for mobile use.
Do not rely on placeholder text alone.
Test error states after styling changes.
Related guides
Last updated