Appearance
Radio Styling
Style every visual detail of the Radio option type — item style, the selection box and its glyph, labels, per-value help text, layout, disabled state, and the quantity stepper — using per-type templates.
Overview
Read Types Settings first if you haven't created a template before.
Radio uses the exact same editor as Checkbox Styling — same fields, same groups, same order. Only the defaults differ (so a fresh radio template looks like a radio, not a checkbox), plus one Behavior setting. If you already know Checkbox Styling, skim the table below and skip to How to Style Radio.
How Radio Differs from Checkbox
| Where | Checkbox default | Radio default |
|---|---|---|
| Selection Box → Corner Radius | 4px (rounded square) | 16px (circle) |
| Selection Box → Fill Mode | Filled | Inset |
| Selection Box → Glyph | Checkmark (options: Checkmark / Dash / Dot / Square) | Dot (options: Checkmark / Dot / Square — no Dash) |
| Selection Box → Glyph Size | 65% | 60% |
| Selection Box → Glyph Thickness shows for | Checkmark and Dash | Checkmark only |
| Behavior | Select all control (+ label) | Allow deselect (toggle, default off) — clicking the selected radio clears the whole group |
Everything else — Item Style, Label, Help Text, Layout, Disabled State, Quantity Input, Advanced — is identical to Checkbox.
Radio is single-select
Picking one radio value clears any other selection in the group, and all values are always visible (never collapsed) — there's no equivalent to Checkbox's multi-select behavior.
Item Style
The entry-point preset. Container fields only appear once Boxed is picked.
| Setting | Options (default) | What it controls |
|---|---|---|
| Item Style | Plain (default) / Boxed | Plain rows, or each value wrapped in a clickable card. The fields below appear only when Boxed |
Item Container (Boxed only):
| Setting | Options (default) | What it controls |
|---|---|---|
| Padding | per side, max 32px (12/14/12/14) | Space inside each card |
| Corner Radius | 0–20px (8px) | Card roundness |
| Border Width | 0–3px (1px) | Card border thickness |
| Background (Idle / Hover / Selected) | color, transparent allowed (#FFFFFF each) | Card fill per state |
| Border Color (Idle / Hover / Selected) | color (#E2E8F0 each) | Card border color per state |
All three states share the same default
Idle, Hover, and Selected all start at the same color — set them apart to make hover and selection visible.
Selection Box
The box shape and its unselected/selected colors — shown as one nav item with two sub-sections.
The Box
| Setting | Options (default) | What it controls |
|---|---|---|
| Box Size | 14–32px (20px) | Size of the radio box |
| Corner Radius | 0–16px (16px) | Box roundness — capped at half the box size, so 16 reads as a perfect circle at every supported box size |
| Border Width | 0–4px (2px) | Box border thickness |
| Background (unselected) | color, transparent allowed (#FFFFFF) | Box fill when unchecked |
| Border Color (unselected) | color (#CBD5E1) | Box border when unchecked — hidden if Border Width is 0 |
| Selected Accent | color (#2563EB) | Drives the whole selected state. What it colors depends on Fill Mode below |
The Glyph
| Setting | Options (default) | What it controls |
|---|---|---|
| Fill Mode | Filled / Inset (default) | Filled = the accent fills the box, the glyph sits on top. Inset = the glyph takes the accent color, the box stays light — the conventional radio look |
| Glyph | Checkmark / Dot (default) / Square (no Dash — a dash reads as "some selected," meaningless for single-select) | Which mark is drawn when selected |
| Glyph Color | color (#FFFFFF) | Mark color — Filled mode only; in Inset mode the glyph uses the Selected Accent |
| Glyph Size | 40–90% (60%) | Mark size, as a percentage of the box — a dot reads well slightly smaller than a checkmark |
| Glyph Thickness | 1–4 (2) | Stroke weight — Checkmark only (no Dash option to share it with) |
Label
| Setting | Options (default) | What it controls |
|---|---|---|
| Font Size | 10–20px (14px) | Value label size |
| Font Weight | Regular (default) / Medium / Semibold / Bold | Value label weight |
| Text Color (Idle / Hover / Selected) | color (#1F2937 each) | Label color per state |
Hover and Selected default to Idle
Unset, Hover and Selected colors inherit whatever Idle is set to — set them individually to make hover/selection visible.
Help Text
Styles the optional per-value Help Text field. These settings only apply to values that actually have help text — a value without it reserves no space.
| Setting | Options (default) | What it controls |
|---|---|---|
| Display As | Inline (default) / Tooltip | Inline = a line under the label. Tooltip = a ⓘ icon with a hover bubble. Fields below switch with this |
Inline mode:
| Setting | Options (default) | What it controls |
|---|---|---|
| Font Size | 8–16px (12px) | Help text size |
| Text Color (Idle / Hover / Selected) | color (#94A3B8 each) | Help text color per state |
| Gap Below Label | 0–8px (2px) | Space between the label and the help text |
Tooltip mode:
| Setting | Options (default) | What it controls |
|---|---|---|
| Icon Color | color (#94A3B8) | The ⓘ icon color |
| Tooltip Position | Top (default) / Bottom | Where the bubble appears |
| Tooltip Background / Text Color | color (#1A1A1A / #FFFFFF) | Bubble colors |
| Tooltip Font Size | 10–18px (13px) | Bubble text size |
| Tooltip Max Width | 100–400px (260px) | Bubble width before it wraps |
| Tooltip Padding / Corner Radius | px (8/12/8/12 · 6px) | Bubble inner spacing and roundness |
| Tooltip Shadow | None / Soft (default) / Medium | Bubble shadow |
Layout
| Setting | Options (default) | What it controls |
|---|---|---|
| Box Position | Left (default) / Right | Box before or after the label |
| Gap to Label | 4–24px (10px) | Space between the box and the label |
| Columns | 1 (default) / 2 / 3 / Auto | How many columns the value list uses |
| Spacing Between Options | 0–32px (8px) | Vertical/grid gap between values |
Disabled State
Applies to values the inventory check marks unavailable.
| Setting | Options (default) | What it controls |
|---|---|---|
| Hide Out-of-Stock Values | toggle (off) | Removes out-of-stock values from the list entirely instead of styling them — no reserved gap. If every value is out of stock, the whole option is hidden. Required options always stay visible: their values show as out of stock so the customer can see why they can't add to cart. The fields below only apply while this is off |
| Opacity | 20–100% (40%) | How faded an unavailable value is. Floored at 20% — anything lower reads as an invisible hole in the list; use Hide instead if you want it gone |
| Strike Through Label | toggle (off) | Draws a line through an unavailable value's label |
| Overlay | None (default) / Diagonal / Cross / Fade | Extra visual over an unavailable value |
| Overlay Color | color (#999999) | Color of the Diagonal/Cross overlay — only for those two |
No click-behavior setting
Out-of-stock values are always non-selectable — a variant that can't be bought can't be picked, so there's no toggle for it. Hide or style is the only choice.
Quantity Input
Only appears when a value is priced with a quantity box.
| Setting | Options (default) | What it controls |
|---|---|---|
| Layout | Connected (default) / Separated / Field only | Connected = one pill (− n +). Separated = three detached boxes. Field only = just the number, no buttons |
| Height | 24–44px (28px) | Stepper height |
| Number Width | 20–64px (24px) | Width of the number box |
| Border Width | 0–3px (1px) | Border thickness |
| Corner Radius | 0–20px (6px) | Roundness |
| Show Dividers | toggle (on) | Lines between −, number, and + — Connected layout only |
| Font Size / Weight | 10–18px (13px) · Regular–Bold (Medium) | The number's typography |
| Text Color / Background / Border Color | color (#333333 / #FFFFFF / #CBD5E1) | The number box colors |
| Button Style | Ghost (default) / Solid | −/+ buttons: transparent (Ghost) or filled (Solid). Buttons are hidden in Field-only |
| Button Color | color (#333333) | The −/+ glyph color (idle) |
| Button Background | color (#F1F5F9) | −/+ fill — Solid only |
| Button Color / Background (Hover) | color (#333333 / #E2E8F0) | −/+ colors on hover |
Behavior
| Setting | Options (default) | What it controls |
|---|---|---|
| Allow Deselect | toggle (off) | Lets customers clear their choice by clicking the already-selected radio again — normally, once a radio group has a selection, one value is always selected |
Advanced
| Setting | Options (default) | What it controls |
|---|---|---|
| Focus Ring Color | color (#3B82F6) | Ring shown when a value is reached by keyboard — can't be turned off |
| Focus Ring Width | 1–4px (2px) | Ring thickness |
How to Style Radio
- Open the Style Settings modal (see Customization Overview)
- Click Types → Radio
- Create a new template or click an existing one to edit it
- Use the left navigation to jump between Item Style, Selection Box, Label, Help Text, Layout, Disabled State, Quantity Input, Behavior, and Advanced
- Click Manage preview above the Live Preview to mock up test values — see Sandbox & Live Preview
- Click Save in the contextual save bar
Related
- Radio (option type) — how to add and configure a Radio option, including per-value Help Text
- Types Settings — how templates work and how to assign one to an option
- Checkbox Styling — the same editor, styled for multi-select
- Sandbox & Live Preview — mock up test values while styling