Appearance
Time Picker Styling
Style every visual detail of a Time Picker — how customers pick a time, the shape and density of the control, its colors per state, and its typography — 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 Time Picker.
The editor's left navigation has 4 tabs: Picker style, Shape & density, Colors, and Typography & states — matching the sections below.
The time window isn't here
Display mode, Earliest, Latest, Interval, Default time, and Exclude times all live on the option itself, not the template — see Time Picker. Those decide what a customer may enter; this editor only decides how it looks.
Picker Style
The master preset. It decides which elements the storefront renders, and gates a few settings below.
| Setting | Options (default) | What it controls |
|---|---|---|
| Picker style | Field / Pills (default) / List | Field shows one input box. Pills and List show the time slots as buttons |
Pills and List need time slots
Pills and List draw the generated slots, so they require the option's Display to be set to Time slots. Assign one of them to a clock-input option and it falls back to Field at render time — the app tells you so in the editor: Set this option's Display to a dropdown of time slots to use Pills or List. A clock input has no slots to show.
Field only
| Setting | Options (default) | What it controls |
|---|---|---|
| Clock icon | Show (default) / Hide | Shows a clock on a clock input, or the arrow on the time-slot dropdown. Hiding it keeps the field working — with no icon, tapping anywhere in the field opens the picker |
| Icon color | color (#64748B, falls back to the Global text color) | Applies to the clock and the dropdown arrow in every browser — only when the icon is shown |
| Icon color (hover) | color (#334155) | The icon color on hover |
Pills and List only
| Setting | Options (default) | What it controls |
|---|---|---|
| Gap between slots | 0–20px (8px) | Space between the slot buttons or rows |
Pills only
| Setting | Options (default) | What it controls |
|---|---|---|
| Columns | Auto (default) / 2 / 3 / 4 | Auto lets pills wrap naturally. A fixed count gives every slot the same width |
A List row is full width by definition, so a column count would fight the preset — it isn't offered there.
Shape & Density
Both rows apply to the field box and the slot chips, so one change re-skins the type whatever Picker style is set to.
| Setting | Options (default) | What it controls |
|---|---|---|
| Corners | Global (default) / Pill / Square / Custom | Applies to the field box and the time slots |
| Corner radius | 0–40px (6px) | Only when Corners is set to Custom |
| Density | Comfortable (default) / Compact | Sets padding and control height together. Compact fits more time slots into a narrow column |
| Border width | 0–4px (1px, follows the Global border width) | Border thickness on the box and the slots |
Why the first corner option is called "Global", not "Rounded"
It follows your store's corner radius. If that radius is 0, this renders square — a label promising round corners while drawing square ones would simply be wrong. Pick Pill, Square, or Custom when you want a specific shape regardless of the store setting.
Colors
Three states, stacked rather than hidden behind tabs.
Default:
| Setting | Options (default) | What it controls |
|---|---|---|
| Background | color (#FFFFFF, falls back to the Global input background) | Field box / slot fill |
| Border | color (#E2E8F0, falls back to the Global input border) | Field box / slot border |
| Text | color (#1F2937, falls back to the Global text color) | The time text |
Hover:
| Setting | Options (default) | What it controls |
|---|---|---|
| Background | color (#F8FAFC) | Fill on hover |
| Border | color (#CBD5E1) | Border on hover |
| Text | color (#1F2937, follows the Global text color) | Text on hover |
Selected — Pills and List only:
| Setting | Options (default) | What it controls |
|---|---|---|
| Background | color (#EFF6FF) | Fill of the chosen slot |
| Border | color (#2563EB) | Border of the chosen slot |
| Text | color (#1D4ED8, follows the Global text color) | Text of the chosen slot |
Only the Default state follows your Global colors
Hover and Selected are relational — they communicate by differing from the default. If all three pointed at the same Global values they'd collapse into one color and the customer couldn't tell which slot they'd picked. So hover and selected keep designed literal defaults, and only the default state seeds from your palette.
A native field is one box with no "selected" state, so the Selected group is hidden under the Field preset rather than shown as three dead color pickers.
Typography & States
| Setting | Options (default) | What it controls |
|---|---|---|
| Font size | 8–32px (14px) | Time text size |
| Font weight | Light / Regular (default) / Medium / Semibold / Bold | Time text weight |
| Letter spacing | −2 to 8px, 0.5 steps (0) | Tracking on the time text |
| Text alignment | Left / Center (default) | Applies to pills. List rows always align left so they read as rows |
| Mobile font size | 8–24px (empty) | Optional override below 768px. Leave empty to use the same size everywhere |
Focus & disabled
| Setting | Options (default) | What it controls |
|---|---|---|
| Focus outline | toggle (on) | The ring shown when a customer reaches the picker with the keyboard |
| Focus outline color | color (#2563EB) | Ring color — only when the toggle is on |
| Focus outline width | 1–5px (2px) | Ring thickness — only when the toggle is on |
| Disabled opacity | 10–100% (50%) | How faded the picker looks when disabled |
Turning the focus outline off hurts keyboard users
The app says so directly: Turning it off makes the picker harder to use without a mouse. Prefer recoloring it to match your theme over removing it.
How to Style a Time Picker
- Open the Style Settings modal (see Customization Overview)
- Click Types → Time Picker
- Create a new template or click an existing one to edit it
- Pick a Picker style first — it decides which fields the rest of the editor shows
- Use the left navigation to jump between Picker style, Shape & density, Colors, and Typography & states
- Click Manage preview above the Live Preview to set a test window — see Sandbox & Live Preview
- Click Save in the contextual save bar
Related
- Time Picker (option type) — Display mode, window, interval, and exclusions
- Types Settings — how templates work and how to assign one to an option
- Sandbox & Live Preview — set a test window while styling
- Date Range Styling
- Slider Styling