Appearance
Short Text Styling
Style every visual detail of the Short Text option type — the field, its label and help text, the colors it takes while a customer types, and how it looks when validation fails — using per-type templates.
Overview
Read Types Settings first if you haven't created a template before. This page covers every setting available once you're editing a Short Text template, grouped the same way they appear in the editor's left navigation.
Short Text is the first text-entry type you can style, and the first whose template covers the label and help text as well as the field itself. That has one consequence worth knowing up front: the template's Help text display replaces the store-wide Help Text Display Mode for every option using it.
Three states, not two
Most types are styled for idle and hover. A text field has nothing to select, so its third state is focus — the field the customer is currently typing in. Background, border and text color are set separately for Idle, Hover and Focused.
A new template starts from your shop's theme: the idle colors and sizes seed from your Colors and Borders & Shapes. Hover and focus colors are derived to differ from idle, so the three states never look identical out of the box.
This styles Short Text only
Short Text Group is a separate option type and doesn't use these templates. The other text-entry types — Paragraph Text, Email, Telephone, Number — aren't stylable yet either.
Field Style
The structural choice — pick it first, since it decides which of the settings below appear at all.
| Setting | What it controls | Default | Options |
|---|---|---|---|
| Field style | The overall look of the field | Outlined | Outlined, Filled, Underline |
In-app help: Outlined draws a border around the field. Filled is a tinted box with no border, so the border settings are hidden. Underline draws only a bottom line on a transparent field, so corners, shadow and the background colors are hidden.
| Setting | What it controls | Shown for | Default | Options / Range |
|---|---|---|---|---|
| Corners | Corner rounding of the field | Outlined, Filled | Global | Global, Pill, Square, Custom |
| Corner radius (Custom corners only) | Exact corner rounding | Outlined, Filled | 6px | 0–40px |
| Spacing | Field padding and height together | All styles | Comfortable | Comfortable, Compact |
| Border width | Border thickness — on Underline, the thickness of the line | Outlined, Underline | 1px (from your theme border width) | 0–4px |
| Shadow | Drop shadow under the field | Outlined, Filled | None (from your theme input shadow) | None, Subtle, Medium, Strong |
"Global" corners can look square
Global follows your store's corner radius from Borders & Shapes — so if that radius is 0, the field renders square. Pick Pill, Square or Custom when you want a specific shape regardless of the global value.
Label & Help Text
Two sections in one pane: where the label sits, and how the option's help text is presented.
Label
| Setting | What it controls | Default | Options / Range |
|---|---|---|---|
| Label position | Where the label sits relative to the field | Above | Above, Left |
| Label width (Left only) | Width of the label column | 140px | 60–320px |
| Space between label and field | Gap between the two | 4px | 0–24px |
| Label size | Label text size | 16px | 10–28px |
| Label weight | Label text weight | Semibold | Regular, Medium, Semibold, Bold |
| Label color | Label color | Theme text color | — |
Left labels stack on phones
Left places the label beside the field on wide screens only; on phones it stacks above the field automatically. If you use Left, set the same Label width on every Short Text option so their fields line up down the page.
Help text
| Setting | What it controls | Default | Options |
|---|---|---|---|
| Help text display | How the option's help text is shown | Above field | Above field, Below field, Tooltip, Hidden |
In-app help: Replaces the store-wide Help Text Display Mode for options using this template. Tooltip shows an "i" beside the label that reveals the help text on hover.
Shown for Above field and Below field:
| Setting | What it controls | Default | Range |
|---|---|---|---|
| Help text color | Help text color | #4B5563 (falls back to theme text) | — |
| Help text size | Help text size | 14px | 10–20px |
| Help text style | Help text style | Italic | Italic, Regular |
Shown for Tooltip:
| Setting | What it controls | Default | Range |
|---|---|---|---|
| Icon color | The "i" beside the label — on hover it fills with the tooltip colors | #6B7280 (falls back to theme text) | — |
| Tooltip position | Whether the bubble opens above or below the "i" | Top | Top, Bottom |
| Tooltip background | Bubble fill | #1F2937 | — |
| Tooltip text | Bubble text color | #FFFFFF | — |
| Tooltip text size | Bubble text size | 14px | 10–18px |
| Tooltip max width | Widest the bubble gets before the text wraps | 250px | 120–400px |
Help text display overrides your store-wide setting
This is the one setting here that changes what shows, not just how it looks. For every option using this template, it replaces the store-wide Help Text Display Mode.
With Hidden, no help text appears on those options at all, even when the option has some — the text stays saved, it just isn't rendered.
Short Text options with no template assigned keep following the store-wide setting, as before.
Field Colors
Placeholder is set once. Background, Border and Text are each set separately for three states: Idle, Hover, and Focused (while the customer is typing).
| Setting | What it controls | Shown for | Idle | Hover | Focused |
|---|---|---|---|---|---|
| Placeholder | The hint text in the empty field | All styles | #6B7280 (theme placeholder) — one value for all states | ||
| Background | Field fill | Outlined, Filled | #FFFFFF (theme input background) | #F9FAFB | #FFFFFF |
| Border | Border, or the underline, color | Outlined, Underline | #D1D5DB (theme input border) | #9CA3AF | #2563EB |
| Text | The typed text color | All styles | #111827 (theme input text) | #111827 | #111827 |
Why text color is the same in all three states
Background and border carry the state signal. The typed text stays the theme's input text color in all three so it remains readable — including on a dark storefront, where a derived hover or focus text color could drop out of contrast.
The focus Border color is what shows while the customer types. The ring drawn around the field is separate — see Focus, error & disabled.
Text
How what the customer types is rendered.
| Setting | What it controls | Default | Options / Range |
|---|---|---|---|
| Font size | Size of the typed text | 14px | 10–28px |
| Font weight | Weight of the typed text | Regular | Regular, Medium, Semibold, Bold |
| Letter spacing | Spacing between characters | 0px | −1 to 4px, in steps of 0.5 |
| Text alignment | Alignment of the typed text | Left | Left, Center, Right |
| Mobile font size | Overrides the font size at 768px wide and below | Empty (uses the desktop size) | 10–24px |
Focus, Error & Disabled
| Setting | What it controls | Default | Range |
|---|---|---|---|
| Focus ring | The ring around the field while it's focused | On | — |
| Focus ring color | Ring color | #2563EB (falls back to your theme button color) | — |
| Focus ring width | Ring thickness | 2px | 1–5px |
| Error color | The message under the field, and the field's border, when validation fails | #DC2626 | — |
| Disabled opacity | How faded the field looks when the theme disables the form | 50% | 10–100% |
Seeing the error state
Error color applies when a customer submits an invalid field — typically a required Short Text left empty on Add to cart. You don't have to reproduce that on a live storefront to style it: turn on Show error state in Manage preview — see Sandbox & Live Preview.
Turning the focus ring off
With the ring off, the only thing marking the active field is the Focused border color from Field colors. Make sure that color is clearly different from Idle, or customers won't be able to tell which field they're in. On the Underline style, the ring is drawn as a thicker line rather than a ring.
How to Style Short Text
- Open the Style Settings modal (see Customization Overview)
- Click Types → Short Text
- Create a new template or click an existing one to edit it
- Use the left navigation to jump between Field style, Label & help text, Field colors, Text, and Focus, error & disabled
- Switch between the Idle, Hover and Focused tabs to set each state's colors
- Click Manage preview to put your own label, placeholder and help text in the preview, or to see the error state — see Sandbox & Live Preview
- Click Save in the contextual save bar
Assign the template on the option itself: open a Short Text option, expand Style settings, and pick a template card.
Related
- Short Text (option type) — how to add and configure a Short Text option
- Types Settings — how templates work and how to assign one to an option
- Sandbox & Live Preview — build a test field and preview the error state
- Help Text Display Mode — the store-wide setting this template can override
- Accordion Styling
- Checkbox Styling
- Radio Styling
- Swatches Styling
- Tabs Styling
- File Upload Styling
- Slider Styling
- Date Range Styling
- Time Picker Styling
- Modal Styling