Appearance
Time Picker
Let customers choose a time of day — a delivery slot, a pickup window, an appointment — either as a free clock input or as a fixed list of generated time slots.
Overview
Time Picker has two modes, chosen with the Display field:
- Clock input — a native time input. The customer can enter any time, and their browser draws the picker from their locale.
- Time slots — the app generates a fixed list from Earliest to Latest at the chosen Interval. How that list is drawn (a dropdown, pills, or a list) comes from the assigned Customization template, not from the option.
Use Time Picker for:
- Delivery or pickup time windows
- Appointment and booking slots
- Service start times
- Preferred contact times
Key characteristics:
- Every time is stored as 24-hour
HH:mm, regardless of how it's displayed - Can be marked as required
- Works as a condition source, compared chronologically
- The chosen time reaches the cart as a line-item property
Time format is display-only
Switching between 12-hour and 24-hour never rewrites stored data. A time saved as 14:30 stays 14:30 underneath whether it reads as "14:30" or "2:30 PM", so conditions written against a time keep matching after you change the format.
Configuration
Basic Settings
| Setting | Description |
|---|---|
| Label | Option name displayed to customers (e.g., "Delivery time") |
| Option is required for this option set | If enabled, customers must choose a time before adding to cart |
| Hide Label from storefront | If enabled, only the picker is shown |
Time Picker Settings
| Setting | Options (default) | What it controls |
|---|---|---|
| Display | Clock input (default) / Time slots | Clock lets customers pick any time; Time slots offers a fixed list. |
| Time format | 24-hour (14:30) — default / 12-hour (2:30 PM) | How times are shown to customers. Only visible when Display = Time slots |
| Interval (minutes) | whole number 1–720 (30) | The gap between time slots, e.g. 30 for half-hourly |
| Earliest time | time (empty) | The earliest time a customer can choose. Empty = no limit |
| Latest time | time (empty) | The latest time a customer can choose. Empty = no limit |
| Default time | time (empty) | The time selected when the page loads. Empty = none |
| Exclude times | comma-separated 24-hour times (empty) | Slots to remove from the list, e.g. 12:00, 12:30. Only visible when Display = Time slots |
How Earliest / Latest / Interval are enforced
The card states this once, under the fields:
Time slots only offer the times allowed here, while a clock input can't restrict its own picker — there these are checked when the customer adds to cart.
In other words: with Time slots, an out-of-window time simply isn't in the list. With Clock input, the browser's native picker still accepts any time, and the restriction is applied when the customer tries to add to cart.
Why Time format and Exclude times disappear in Clock mode
A clock input is drawn by the browser from the customer's own locale, so a Time format setting couldn't affect it. And there's no generated list to remove entries from, so Exclude times would promise filtering that doesn't happen. Both fields are hidden rather than shown-but-inert.
Advanced Settings
| Setting | Description |
|---|---|
| Internal Label | Admin-only identifier (replaces label in the options list) |
| Help Text | Additional guidance shown to customers (based on display mode) |
| Placeholder | Text shown before a time is chosen — see below |
| CSS class / CSS ID | Your own selectors on this option's container — see CSS Class & CSS ID |
Where Placeholder actually applies
Placeholder reaches exactly one combination: Display = Time slots and the assigned template's Picker style = Field. There it becomes the first entry of the dropdown.
| Case | Effect | Why |
|---|---|---|
| Time slots + Picker style Field | First dropdown entry reads your placeholder | The only empty element available |
| Placeholder left blank | First entry falls back to Choose {option name} | It is never empty |
| Picker style Pills or List | No effect | Every slot is a button or row — there's no empty element to put text in |
| Display = Clock input | No effect | A native time input has no placeholder. The browser draws its own empty state — --:-- in desktop Chrome, blank on iOS Safari — and it can't be set or styled |
Choosing a slot replaces the placeholder, and the placeholder itself is never submitted.
Validation
Saving is blocked, with a red error on the offending field, when:
| Message | Cause |
|---|---|
| Interval must be a whole number of minutes between 1 and 720. | Interval is empty, fractional, below 1, or above 720 |
| Latest time must be after the earliest time. | Latest ≤ Earliest |
| Default time must be between the earliest and latest times. | Default falls outside the window |
| This default isn't one of the generated time slots. Set it to a slot on the interval, or adjust the earliest time or interval so it lands on one. | Default is inside the window but off the interval |
| Enter a valid time in HH:MM format. | A time field isn't HH:MM |
| Enter excluded times in HH:MM format, separated by commas. | Exclude times is malformed |
| Every time in this window is excluded, so customers would have nothing to choose. Remove an exclusion or widen the window. | Exclusions eliminate every generated slot |
| This default is in the excluded list, so it can never be selected. | Default is also excluded |
Why the admin fields may show AM/PM
Earliest, Latest and Default use a native time input, so your browser's locale decides whether they read as 24-hour or 12-hour while you configure them. That's cosmetic — the stored value is always 24-hour, and the option's own Time format setting controls what customers see.
How to Add a Time Picker
- Navigate to Option Sets and open your option set
- Click Add Option
- Select Time Picker from the Option Type modal (it's under the Input category)
- Enter a Label (e.g., "Delivery time")
- Choose a Display mode — Clock input for free entry, Time slots for a fixed list
- Set Interval, Earliest time, Latest time, and a Default time if you want one preselected
- (Time slots only) Set a Time format and any Exclude times
- (Optional) Click Advanced Settings for an Internal Label, Help Text, Placeholder, or a CSS class/ID
- (Optional) Expand Style settings to assign a template — see Types Settings
- Click Save in the contextual save bar
On the Storefront
- Clock input renders the browser's native time control. Its appearance and its empty state come from the customer's device
- Time slots renders the generated list in whichever shape the template's Picker style specifies — a dropdown Field, tappable Pills, or a vertical List. Pills and List require Display = Time slots; if the option uses a clock input, they fall back to Field
- A Default time is preselected on first load
- A customer can clear a chosen time and return to the empty state
Cart Properties
The chosen time becomes a line-item property named after the option's label, written in the option's configured Time format:
- 24-hour option → Delivery time: 14:30
- 12-hour option → Delivery time: 2:30 PM
The AM/PM marker is included deliberately — "2:30" alone would be ambiguous on the cart, at checkout, and on the order.
Conditions
Time Picker works as a condition source with six comparators:
| Comparator | Meaning |
|---|---|
| is | The chosen time equals this time |
| is not | The chosen time is anything else |
| is before | The chosen time is earlier than this time |
| is after | The chosen time is later than this time |
| is empty | No time has been chosen |
| is not empty | A time has been chosen |
Comparisons are chronological, not alphabetical — "before 12:00" matches 09:30 and not 14:00.
Unlike Slider, a Time Picker can genuinely be left empty, so is empty / is not empty are meaningful and offered.
Unreachable rule values are flagged
If you write a rule against a time the option can never produce — outside its Earliest/Latest window, or off its interval — the rule shows: This time isn't one a customer can choose — it's outside the option's earliest/latest window or off its interval, so the rule could never match.
Use Cases
Delivery window
Label: Delivery time Display: Time slots · Interval: 60 · Earliest: 09:00 · Latest: 17:00 Exclude times: 12:00, 13:00
Result: Hourly slots from 9 to 5 with the lunch hour removed
Appointment booking
Label: Appointment Display: Time slots · Interval: 15 · Earliest: 08:00 · Latest: 18:00 Time format: 12-hour · Default: 09:00
Result: Quarter-hour appointments reading as "9:00 AM"
Preferred contact time
Label: Best time to call Display: Clock input · Required: No
Result: Free time entry with no fixed slots
Best Practices
Pick the mode that matches the promise:
- Use Time slots when only certain times are genuinely available — the customer can't pick something you can't fulfil
- Use Clock input for preferences where any time is acceptable
Keep the slot list short enough to scan:
- A 15-minute interval across 12 hours is 48 slots — long in a dropdown, longer as pills
- Widen the interval or narrow the window before reaching for styling
Set a default only when there's an obvious choice:
- A preselected time can be submitted without the customer ever looking at it
- Leave it empty when you need a deliberate choice — and mark the option required
Mind the format you promise:
- 12-hour reads more naturally to some markets, but the stored value never changes
- Changing format later is safe: existing orders and conditions are unaffected
Troubleshooting
Time format and Exclude times aren't showing: Display is set to Clock input. Both are Time slots only
My placeholder isn't visible: It only applies to Time slots with Picker style = Field — see the table above
The picker shows --:-- and I can't change it: That's the browser's own empty state for a native time input, not something the app sets
Pills/List styling isn't applying: Those need Display = Time slots. With a clock input there are no slots to draw, so the template falls back to Field
Can't save — "This default isn't one of the generated time slots": The default is inside the window but off the interval. Move it onto a slot, or change Earliest/Interval
The admin fields show AM/PM but I chose 24-hour: Those fields follow your browser's locale — see the note above
Styling
Time Picker has its own dedicated styling — the Picker style (Field, Pills, or List), corner shape and density, per-state colors, and typography are all configurable via named templates.
See Time Picker Styling for the full settings reference, and Sandbox & Live Preview for how to set a test window while you style.
Related
- Date — a single calendar date
- Time Picker Styling — the full styling reference
- Date Range — a start and end date from one calendar
- Types Settings — assign a template and set the Picker style
- Condition Types — using a Time Picker as a condition source
- Required Fields — making options required
- CSS Class & CSS ID — target this option from your theme CSS