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

1

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.

2

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.

3

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.

4

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.