Skip to content
Inputs
Input settings in Theme settings > Inputs control default, hover, and focus styles for form fields across the storefront, including colors, horizontal padding, and whether the border wraps the field or appears on the bottom edge only.
How to change theme inputs
Set default colors
- Open Theme settings > Inputs.
- Under Default colors, choose Base or Custom for Type.
- Set Background (Body, Shade 1–3, or Transparent when Type is Base).
- Set Border: with Base, choose Subtle, Strong, or None; with Custom, pick a color Scheme for the border.
Set hover and focus colors
- Under Hover colors, set Type, Background, and Border the same way.
- Under Focus colors, set Type, Background, and Border for the active field.
Set spacing and border style
- Under Spacing, toggle Enable horizontal padding if you want extra space inside text fields.
- Under Style, set Border position to Full or Bottom.
Optional: align with theme borders
- Open Theme settings > Borders to adjust Input radius and Input width so fields match buttons and cards.
Notes on inputs
- Type chooses Base generated colors or Custom scheme-based borders.
- Focus Border on Base defaults to Strong so the active field is easy to see.
- Bottom Border position suits minimal or underline-style forms.
Input settings
Default colors
| Setting | What it controls |
|---|---|
| Type | Base uses theme-generated colors; Custom enables a scheme for borders. |
| Background | Resting background: Body, Shade 1–3, or Transparent. |
| Border | Resting border: Subtle, Strong, or None (Base), or a Scheme (Custom). |
Hover colors
| Setting | What it controls |
|---|---|
| Type | Base or Custom for hover, same pattern as default. |
| Background | Hover background: Body, Shade 1–3, or Transparent. |
| Border | Hover border: Subtle, Strong, or None (Base), or a Scheme (Custom). |
Focus colors
| Setting | What it controls |
|---|---|
| Type | Base or Custom for the focused field. |
| Background | Focus background: Body, Shade 1–3, or Transparent. |
| Border | Focus border: Subtle, Strong, or None (Base), or a Scheme (Custom). Default Strong on Base. |
Spacing
| Setting | What it controls |
|---|---|
| Enable horizontal padding | Adds left and right padding inside inputs when on. |
Style
| Setting | What it controls |
|---|---|
| Border position | Full (all sides) or Bottom (underline-style) only. |