Appearance
Short Text Group Styling
Style every visual detail of the Short Text Group option type — how its fields are arranged, the fields themselves, the group title, each field's label and the help text, the colors the fields take while a customer types, and how the group looks when fields are missing an answer — 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 Group template, grouped the same way they appear in the editor's left navigation: Group style, Fields, Labels & help text, Field colors, and Focus & error.
A Short Text Group template is built on the Short Text template: most settings have the same names and defaults, and each one applies to every field in the group at once. What's new is Group style — one choice that decides how the fields are arranged, where their labels sit, and whether they join into a single card. As with Short Text, the template's Help text display replaces the store-wide Help Text Display Mode for every option using it.
Three states, not two
A text field has nothing to select, so its third state is focus — the field the customer is currently typing in. Background and border are set separately for Idle, Hover and Focused. The typed text keeps one color in all three.
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 worked out from those, so the three states never look identical out of the box. The hex values in the tables below are what a template uses when your theme doesn't set that color.
Short Text Group has its own templates
Short Text and Short Text Group are styled separately. A Short Text Group option only offers Short Text Group templates, and a Short Text template never affects a group.
What's different from Short Text
If you've already styled Short Text, these are the settings you won't find here:
| Short Text setting | On Short Text Group |
|---|---|
| Label position, Label width, Space between label and field | Replaced by Group style |
| Pill corners | Not offered — Corners are Global, Square or Custom, and Custom goes up to 24px |
| Letter spacing, Text alignment | Not offered |
| Tooltip position, Tooltip text size, Tooltip max width | Not offered — the tooltip bubble has a fixed position and size |
| Focus ring on/off | Not offered — the ring is always shown |
| Disabled opacity | Not offered |
| Text color per state | One Text color for all three states |
Group Style
The structural choice — pick it first, since it decides which other settings appear and how the rest of the template is applied.
| Setting | Options (default) | What it controls |
|---|---|---|
| Group style | Picture cards: Stacked (default) / Side by side / Labels inside / Connected | How the fields are arranged, where their labels sit, and whether they join into one card |
In-app help: Each style is a finished layout: it sets how the fields are arranged, where their labels sit and whether they join into one card.
| Setting | Options (default) | What it controls |
|---|---|---|
| Fields per row (Side by side only) | Dropdown: 2 (default) / 3 / 4 | The most fields placed on one row |
| Space between fields (Stacked, Side by side, Labels inside) | Slider, 0–32px (12px) | The gap between fields. On Side by side it's used both between columns and between rows |
In-app help for Fields per row: The most fields on one row. Narrow screens show fewer, so a field is never squeezed.
With Connected, Space between fields is hidden — the rows touch — and the editor shows a note instead: Connected joins the fields with no space between them. Their look (outline, fill or underline), corners and shadow are set under Fields.
What each Group style looks like
| Group style | Arrangement | Where each field's label sits | What the box is |
|---|---|---|---|
| Stacked | One field per row | Above its field | Each field is its own box |
| Side by side | Up to Fields per row fields on a row, wrapping onto more rows | Above its field. Fields on the same row stay lined up along the bottom, even when one label wraps onto two lines | Each field is its own box |
| Labels inside | One field per row, in separate boxes | A small caption inside the box, above the typed text. Clicking the caption puts the cursor in the field | The box holds both the label and the field |
| Connected | One field per row, joined into a single card | A caption inside each row, as with Labels inside | One card, with thin dividers between the rows |
How Side by side decides how many fields fit
Each column needs room for roughly ten characters of typed text at your Font size, plus the field's padding. When a row is too narrow for the number you picked in Fields per row, fields move onto the next row instead of shrinking — so on a phone, a group set to 3 per row usually shows 2 or 1. A larger Font size or Mobile font size means fewer fit.
Fields
Two sections in one pane: the look of the fields, and the text customers type into them.
Field Style
| Setting | Options (default) | What it controls |
|---|---|---|
| Field style | Picture cards: Outlined (default) / Filled / Underline | The overall look of every field |
| Corners (Outlined, Filled) | Picture cards: Global (default) / Square / Custom | Corner rounding |
| Corner radius (Custom corners only) | Number, 0–24px (6px) | Exact corner rounding |
| Spacing | Picture cards: Comfortable (default) / Compact | The fields' padding and height together |
| Border width (Outlined, Underline) | Slider, 0–4px (1px, from your theme border width) | Border thickness — on Underline, the thickness of the line |
| Shadow (Outlined, Filled) | Dropdown: None (default, from your theme input shadow) / Subtle / Medium / Strong | Drop shadow |
In-app help:
- Field style: Outlined draws a border around each field. Filled is a tinted box with no border, so the border settings are hidden. Underline draws only a bottom line, so corners, shadow and the background colors are hidden. With Labels inside and Connected, the style applies to the box that holds the label and the field.
- Corners: Global uses your store's corner radius, so it looks square when that radius is 0. With Connected, only the card's outer corners are rounded.
- Spacing: Sets the fields' padding and height together. Compact suits groups with many fields.
- Border width: On the Underline style this is the thickness of the line.
"Global" corners can look square
Global follows your store's corner radius from Borders & Shapes — so if that radius is 0, the fields render square. Pick Square or Custom when you want a specific shape regardless of the global value.
How Field style combines with Group style
| Stacked and Side by side | Labels inside | Connected | |
|---|---|---|---|
| Outlined | A border around each field | A border around each box (label and field together) | One border around the card; neighboring rows share a single dividing line |
| Filled | Each field is a tinted box with no border | Each box is tinted, with no border | Tinted rows, separated by a thin gap |
| Underline | A line under each field, no box | A line under each label-and-field pair, no box | A line under every row — a ruled form |
| Corners | Round every field | Round every box | Round only the card's outer corners: the top of the first row and the bottom of the last |
| Shadow | Under each field | Under each box | Around the whole card |
On Underline, the fields lose their side padding so the typed text lines up with its label, and corners and shadow don't apply in any Group style.
Filled on a white input background
Filled has no border, so if your theme's input background is white and so is your page, the fields seem to disappear. When you use Filled, pick a tinted Background under Field colors.
Typed Text
How what the customer types is rendered, in every field of the group.
| Setting | Options (default) | What it controls |
|---|---|---|
| Font size | Number, 10–28px (14px) | Size of the typed text |
| Font weight | Regular (default) / Medium / Semibold / Bold | Weight of the typed text |
| Mobile font size | Number, 10–24px (empty — uses Font size) | Replaces Font size at 768px wide and below |
In-app help for Mobile font size: Optional override at 768px wide and below. 16px or more stops iPhones zooming in when a field is tapped. Leave empty to use the same size everywhere.
Mobile font size also changes Side by side on phones
When Mobile font size is set, phones use it to work out how many fields fit on a row in Side by side — a larger size gives each column more room, so fewer fields share a row.
Labels & Help Text
Three sections in one pane: the group title, each field's own label, and how the option's help text is presented.
Group Title
The option's label — the name shown above the whole group.
| Setting | Options (default) | What it controls |
|---|---|---|
| Title size | Number, 10–28px (16px) | Group title text size |
| Title weight | Regular / Medium / Semibold (default) / Bold | Group title text weight |
| Title color | Color (your theme text color; #1F2937) | Group title color |
Field Labels
The label of each field — the names you entered under the option's Text Input Labels.
| Setting | Options (default) | What it controls |
|---|---|---|
| Label size (Stacked, Side by side) | Number, 10–24px (14px) | Size of the label above each field |
| Inside label size (Labels inside, Connected) | Number, 10–18px (12px) | Size of the caption inside each box |
| Label weight | Regular / Medium (default) / Semibold / Bold | Label text weight |
| Label color | Color (your theme text color; #374151) | Label color |
In-app help:
- Inside label size: A label inside a field reads as a caption, so it starts smaller than the text typed under it.
- Label color: A field that is missing an answer shows its label in the error color.
Only one of the two sizes shows at a time, depending on the Group style. Both are saved with the template, so switching Group style back and forth keeps each one.
Labels inside a box sit on the box's colors
With Labels inside and Connected, the label is drawn on the field's Background — at rest, on hover and while typing. Check that Label color reads well on all three.
Help Text
| Setting | Options (default) | What it controls |
|---|---|---|
| Help text display | Picture cards: Above fields (default) / Below fields / Tooltip / Hidden | How the option's help text is shown |
In-app help: Replaces the store-wide Help Text Display Mode for groups using this template. Tooltip shows an "i" beside the group title that reveals the help text on hover.
Shown for Above fields and Below fields:
| Setting | Options (default) | What it controls |
|---|---|---|
| Help text color | Color (your theme text color; #4B5563) | Help text color |
| Help text size | Number, 10–20px (14px) | Help text size |
| Help text style | Dropdown: Italic (default) / Regular | Help text style |
Shown for Tooltip:
| Setting | Options (default) | What it controls |
|---|---|---|
| Icon color | Color (your theme text color; #6B7280) | The "i" beside the group title |
| Tooltip background | Color (#1F2937) | Bubble fill |
| Tooltip text | Color (#FFFFFF) | Bubble text color |
In-app help for Icon color: The "i" beside the group title. On hover it fills with the tooltip colors.
Shown for Hidden: no settings, just a note — Groups using this template show no help text, even when the option has some.
No tooltip position or size here
Unlike Short Text, the tooltip bubble always opens above the "i", at a fixed text size and width. Only its colors are part of the template.
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 Short Text Group 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 Group options with no template assigned keep following the store-wide setting, as before.
Help text can look a little smaller than its size
On the storefront, help text is shown in your theme's small-text style, so it can come out slightly smaller than Help text size. Check the size on your live store before you settle on it.
Field Colors
Placeholder and Text are set once and apply in every state. Background and Border are set separately for Idle, Hover and Focused (while the customer is typing), each under its own heading.
| Setting | Options (default) | What it controls |
|---|---|---|
| Placeholder | Color (your theme placeholder color; #6B7280) | The hint shown in each empty field — all field styles |
| Text | Color (your theme input text color; #111827) | What the customer types — all field styles |
| Background — Idle (Outlined, Filled) | Color (your theme input background; #FFFFFF) | Field fill at rest |
| Border — Idle (Outlined, Underline) | Color (your theme input border; #D1D5DB) | Border, or underline, color at rest |
| Background — Hover (Outlined, Filled) | Color (worked out from your theme; #F9FAFB) | Field fill under the cursor |
| Border — Hover (Outlined, Underline) | Color (worked out from your theme; #9CA3AF) | Border, or underline, color under the cursor |
| Background — Focused (Outlined, Filled) | Color (worked out from your theme; #F9FAFE) | Field fill while the customer types |
| Border — Focused (Outlined, Underline) | Color (worked out from your theme; #2563EB) | Border, or underline, color while the customer types |
In-app help:
- Placeholder: The hint shown in each empty field.
- Text: What the customer types. It keeps this color on hover and while typing.
- Background (Focused): A faint tint on the field the customer is typing in.
- Border (Focused): Shown while the customer is typing. The focus ring itself is set under Focus & error.
Hover colors start as your theme's input colors shifted slightly toward your text color; focus colors are shifted toward your button color. That's why, unlike Short Text, the focused field gets a faint tint rather than keeping its resting background.
With Stacked and Side by side, these colors paint each field. With Labels inside and Connected, they paint the whole box, caption included — hovering anywhere on a box, or typing in it, recolors the entire box.
Focus & Error
| Setting | Options (default) | What it controls |
|---|---|---|
| Focus ring color | Color (your theme button color; #2563EB) | The ring around the field the customer is typing in |
| Focus ring width | Slider, 1–4px (2px) | Ring thickness |
| Error color | Color (#DC2626) | The message under the group, and the border and label of each field missing an answer |
In-app help:
- Focus ring color: Drawn around the field the customer is typing in. On the Underline style it is drawn as a thicker line under the field. It is always shown, so shoppers using a keyboard can see where they are.
- Error color: Used for the message under the fields, and for the border and label of each field missing an answer. Turn on Show error state in Manage preview to see it.
Where the focus ring is drawn:
| Group style | Focus ring |
|---|---|
| Stacked, Side by side | Around the field, with a small gap |
| Labels inside | Around the whole box, label included, with a small gap |
| Connected | Just inside the edge of the row, so it never spills onto the rows above and below |
| Any Group style with Underline | A thicker line under the field, in the ring color |
The ring stays visible on a field that's missing an answer, too.
What a field missing an answer looks like:
| Field style | The field | Its label |
|---|---|---|
| Outlined | Border in the Error color | Error color |
| Filled | A thin ring in the Error color (Filled has no border to recolor) | Error color |
| Underline | Underline in the Error color | Error color |
With Labels inside and Connected, the whole box takes the error look and keeps its Idle background on hover. On Connected, a marked row keeps its red edge even when the customer hovers the row next to it.
Seeing the error state
You don't have to fail an Add to cart on a live storefront to style the error look: in Manage preview, turn on Show error state and choose which fields are missing an answer — see Sandbox & Live Preview.
On the Storefront
Errors are per field
Only a required Short Text Group checks its fields. After a failed Add to cart, only the fields the customer left empty take the error look described above — fields they filled in stay as they were. A field's error clears as soon as the customer types in it.
One message appears under the group, in the Error color — for a group titled Delivery details, "Delivery details is required".
Phones
- Mobile font size, when set, replaces Font size at 768px wide and below.
- Side by side shows fewer fields per row as the screen narrows, down to one. The other Group styles are always one field per row.
Options without a template
Short Text Group options on Global styles look exactly as they did before templates existed: fields stacked with their labels above, your theme's input colors, and help text following the store-wide Help Text Display Mode.
How to Style Short Text Group
- Open the Style Settings modal (see Customization Overview)
- Click Types → Short Text Group
- Create a new template or click an existing one to edit it
- Use the left navigation to jump between Group style, Fields, Labels & help text, Field colors, and Focus & error
- Pick a Group style first — it decides whether Fields per row, Space between fields, Label size or Inside label size appear
- In Field colors, set Background and Border under the Idle, Hover and Focused headings
- Click Manage preview to put your own title, placeholder, help text and fields 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 Group option, click Style Settings, and pick a template card (or Global styles). Then save the option set.
Related
- Short Text Group (option type) — how to add and configure a Short Text Group option
- Types Settings — how templates work and how to assign one to an option
- Sandbox & Live Preview — build a test group and preview the error state
- Help Text Display Mode — the store-wide setting this template can override
- Language Settings — the message shown under a group with empty fields
- Short Text Styling — the single-field version of this template
- Accordion Styling
- Checkbox Styling
- Radio Styling
- Swatches Styling
- Tabs Styling
- File Upload Styling
- Slider Styling
- Date Range Styling
- Time Picker Styling
- Modal Styling
- Formula Styling