Checkbox Styling

Style every visual detail of Checkbox (Single) and Checkbox (Multi) — 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. In the Style Settings modal this type is labeled Checkboxes — one template collection styles both Checkbox (Single) and Checkbox (Multi) options.

The editor's left navigation has 9 tabs, in this order: Item Style, Selection Box (with 2 sub-sections — the box, then the glyph), Label, Help Text, Layout, Disabled State, Quantity Input, Behavior, Advanced — matching the sections below.

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 checkbox box
Corner Radius	0–16px (4px)	Box roundness — capped at half the box size, so the top of the range is always a perfect circle
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 (default) / Inset	Filled = the accent fills the box, the glyph sits on top. Inset = the glyph takes the accent color, the box stays light
Glyph	Checkmark (default) / Dash / Dot / Square	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% (65%)	Mark size, as a percentage of the box
Glyph Thickness	1–4 (2)	Stroke weight — Checkmark and Dash only

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
Select All Control	toggle (off)	Adds a "Select all" control above the list that checks/unchecks every available value
Select All Label	text ("Select all")	The control's label — only shown when Select All Control is on

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 Checkbox

1. Open the Style Settings modal (see Customization Overview)
2. Click Types → Checkboxes
3. Create a new template or click an existing one to edit it
4. Use the left navigation to jump between Item Style, Selection Box, Label, Help Text, Layout, Disabled State, Quantity Input, Behavior, and Advanced
5. Click Manage preview above the Live Preview to mock up test values — see Sandbox & Live Preview
6. Click Save in the contextual save bar

Related

• Checkbox (Single) and Checkbox (Multi) — how to add and configure Checkbox options, including per-value Help Text
• Types Settings — how templates work and how to assign one to an option
• Radio Styling — the same editor, styled for single-select
• Sandbox & Live Preview — mock up test values while styling