Appearance
Sandbox & Live Preview
Control exactly what data the Live Preview shows while you're styling an Accordion, Checkbox, Radio, Slider, Swatches, Tabs, File Upload, Date Range, or Time Picker template — a realistic mockup, your own temporary test values, or (for every type except File Upload) one of your real saved options.
Overview
Normally the Live Preview renders a built-in sample so you can see your styling changes without needing real data. Sandbox lets you swap that sample for something more useful to the change you're making — for example, testing how a long label wraps, how a 3rd swatch color looks selected, how your Tab Bar behaves once tabs start overflowing, how a value's help text looks on a Checkbox or Radio template, how a Stepped slider handles a coarse versus fine range, or how a rejected file looks in your File Upload styling.
Sandbox is available whenever you're editing an Accordion, Checkbox, Radio, Slider, Swatches, Tabs, File Upload, Date Range, or Time Picker template (see Types Settings). It isn't available for Global settings or other option types.
Session-only
Nothing in Sandbox is saved to your store. It resets to the default mockup every time you reopen Style Settings — it exists purely to help you preview, not to configure real data.
File Upload works differently
Accordion, Swatches, and Tabs share the mockup/build/pick model described below. File Upload has no option values to pick from, so its Sandbox skips straight to a customer-interaction simulator instead — see File Upload further down this page.
Opening Sandbox
- Open the Style Settings modal and start editing an Accordion, Checkbox, Radio, Slider, Swatches, Tabs, File Upload, Date Range, or Time Picker template (see Types Settings)
- Above the Live Preview, click Manage preview
- The Live Preview is replaced by the Sandbox browser (for File Upload, this goes straight to the simulator — see File Upload)
- Click Done at any time to return to the normal Live Preview
Smart default
If you opened Style Settings by clicking Edit styling on a specific option (rather than from Settings), the Live Preview already shows that option instead of the generic mockup — you don't need to do anything extra. This doesn't apply to File Upload, which has no option values to default to.
The Four Ways to Feed the Preview
Applies to Accordion, Checkbox, Radio, Slider, Swatches, and Tabs. File Upload's Sandbox works differently — see File Upload.
| Source | What it shows | Good for |
|---|---|---|
| Mock up (default) | A built-in, realistic sample for the type | Quick styling checks without any setup |
| Create temporary preview | Values you type in yourself, on the spot | Testing a specific edge case — a long label, an extra swatch, out-of-stock styling |
| From current option set | The real options of this type already in the option set you're editing (including unsaved changes) | Seeing the template applied to the exact option you're about to save |
| Pick from existing | Any saved option of this type from anywhere in your store | Checking how a template looks on a specific real option, styled with that option's own assigned template |
Mock Up
The Mock up card is selected by default and needs no setup — it's a realistic built-in sample (e.g. a set of sample swatch colors, or sample tab titles and content).
Create Temporary Preview
Click Create temporary preview to open a small builder:
For Swatches, each row has:
| Field | What it does |
|---|---|
| Swatch color | Pick a color for this value (a native color picker) |
| Label | The value's display name |
| Price | Simulated add-on price — set to 0 for free |
| Out of stock | Renders this value in its disabled/out-of-stock styling |
| Quantity | Shows a quantity input for this value, as if it had a price and quantity enabled |
Use Add value to add more rows, or the delete icon to remove one.
For Checkbox and Radio, each row has:
| Field | What it does |
|---|---|
| Label | The value's display name |
| Price | Simulated add-on price — set to 0 for free |
| Out of stock | Renders this value in its disabled/out-of-stock styling |
| Quantity | Shows a quantity input for this value, as if it had a price and quantity enabled |
| Help text | Simulated per-value help text — leave empty to preview how a value with no help text renders |
For Accordion and Tabs, each row is just a Title and multi-line Content — no pricing, since these are pure content types. Use Add item (Accordion) or Add tab (Tabs) to add more rows.
For Slider, there are no rows at all — see Slider below.
The Live Preview updates immediately below the builder as you edit rows, so you can fine-tune content while watching the result.
Testing tab overflow
Add enough tab rows in the Tabs builder to exceed the bar's width, then check Tab Bar Layout settings like alignment and scroll buttons against the real overflow behavior.
From Current Option Set
If the option set you're currently editing already has one or more options of the matching type — even changes you haven't saved yet — they appear here as selectable cards. Clicking a card immediately closes Sandbox and shows that option in the Live Preview.
This section only appears when you opened Style Settings while editing an option set that has a matching option.
Pick From Existing
Search and browse every saved option of the matching type across your entire store, not just the set you're currently editing. Each card renders a live thumbnail styled with that option's own assigned template — so you see exactly how it really looks, not the template you're currently editing. Results load a page at a time with Load more.
Clicking a card immediately closes Sandbox and shows that option in the Live Preview.
Slider
Slider uses the same four sources as the other types — Pick from existing and From current option set show real sliders you've configured, styled with their own assigned template, exactly as they do for swatches or buttons.
What's different is Create temporary preview. A slider isn't a list of values; it's a single range configuration. So its builder edits one config — the same five fields as a real slider's admin card — instead of a list of rows:
| Field | Default | What it does |
|---|---|---|
| Lowest | 0 | Smallest value the preview slider allows |
| Highest | 100 | Largest value the preview slider allows |
| Step | 10 | Increment between values |
| Default | 50 | The value the preview slider starts on |
| Unit | empty | Suffix shown after the value, e.g. cm. Capped at 5 characters, same as the real option |
Editing any field updates the Live Preview immediately, and the temporary preview stays the active preview while you keep editing.
Why the default step is 10, not 1
0–100 with step 1 is 101 stops — past the tick cap, so the Stepped preset would thin them away and end up looking identical to Classic. Step 10 gives eleven stops and eleven visible ticks, so the preset is actually distinguishable in the preview. Set a finer step yourself when you want to check how thinning behaves.
Step won't accept zero or negative
Typing 0 or a negative number keeps the last valid value instead of applying it — the same rule the real slider's schema enforces. The other four fields accept whatever you type, including values that a real option would reject on save, so you can preview edge cases freely.
Date Range
Date Range uses the same four sources as the other types. Its Create temporary preview builder edits one calendar configuration rather than a list of values:
| Field | What it does |
|---|---|
| Count as | days or nights — changes the length the summary reports |
| Minimum / Maximum | Duration limits, so you can see which days grey out |
| Available dates | All dates, or All dates except… |
| Unavailable days | Weekday toggles, to preview the unavailable-day styling |
Two extra controls exist only to make styling easier — they have no equivalent on a real option:
| Control | What it does |
|---|---|
| Keep the calendar open | Pins the calendar open so it doesn't collapse while you edit day colours |
| Preselect a range | Shows the selected and in-range colours without having to pick dates each time |
Use both while styling Days
The Days group is where most of the work happens, and half its settings only show up once a range exists. Turn both helpers on before you start.
Time Picker
Time Picker's Create temporary preview builder sets the window the preview generates slots from:
| Field | What it does |
|---|---|
| Display | Clock input or Time slots — Pills and List styling needs Time slots |
| Format | 12-hour or 24-hour slot labels |
| Earliest / Latest | The window slots are generated between |
| Interval (min) | The gap between slots |
| Preselected | Shows the selected state |
The builder warns you when a combination would produce nothing to preview:
| Message | Cause |
|---|---|
| Latest must be after earliest — no time slots can be generated. | The window is inverted |
| Preselected must be between earliest and latest. | The preselected time is outside the window |
| Preselected must fall on the interval — a customer could never choose it. | The preselected time is off the interval |
Set Display to Time slots before styling Pills or List
With Clock input there are no slots to draw, so the preview falls back to Field and the Pills/List settings appear to do nothing.
File Upload
File Upload options have no option values, so there's nothing to "pick" — opening Sandbox skips the mockup/build/pick chooser entirely and goes straight to a customer-interaction simulator alongside the Live Preview. The idea: fake what a customer's upload session looks like, and the preview shows exactly how your styling handles every state.
Like the other types, it's session-only — nothing you build here is saved. Closing the modal discards it.
The Simulator
| Control | What it does |
|---|---|
| File rows | Add as many as you want with Add file; remove any with the trash icon |
| File name | Editable per row. The extension drives the file icon in the list — e.g. photo.jpg shows a thumbnail when File Icon is set to Thumbnail, and the colored badge follows the file type |
| File type | A dropdown (Image, PDF, Document, Spreadsheet, Video, Audio, Archive) that swaps the row's extension to a representative one for that kind — a quick way to test icons without typing exact filenames |
| Status | Complete or Rejected |
| Simulate drag over | A checkbox that puts the drop zone into its drag-over state without actually dragging a file, so you can check the Drag Accent (border + background tint) directly. Only shown when the current Trigger Style renders a drop zone |
No "Uploading" state
File Upload has no live progress indicator on the real storefront — files transfer as part of the add-to-cart submission itself. The simulator's Status field only has Complete and Rejected for this reason; see File Upload Styling for why there's no progress-bar styling either.
What each status renders in the preview:
| Status | What it shows |
|---|---|
| Complete | The finished row with the Success Color checkmark |
| Rejected | The row in its error state — Error Color border and label, the same thing a customer sees when their file fails the allowed-types rule |
Before you touch the simulator, the preview isn't empty — it opens with four representative rows so the file list is stylable immediately: two documents and an image marked Complete, and one oversized archive marked Rejected.
The preview is the real storefront component rendered with your current, unsaved editor settings — not a lookalike. Structural changes (Trigger Style, File Icon, Item Layout, List Position, Button Label…) update it instantly, and whatever you see there is what the storefront renders after saving. The same rendering also powers the template cards in the option editor's template picker.
How to Use Sandbox
For Accordion, Checkbox, Radio, Slider, Swatches, and Tabs:
- Open a template under Types in the Style Settings modal (see Types Settings)
- Click Manage preview above the Live Preview
- Choose a source:
- Leave it on Mock up, or
- Click Create temporary preview to build custom test values (for Slider, a test range — see Slider), or
- Pick a card under From current option set / Pick from existing
- If you built a temporary preview, click Back once you're happy with it to return to the source list — the Sandbox stays open so you can compare with other sources
- Click Done to return to editing your template with the chosen preview data showing
- Continue adjusting settings — the preview keeps using whatever source you picked until you close Style Settings
For File Upload:
- Open a template under Types → File Upload in the Style Settings modal
- Click Manage preview above the Live Preview — the simulator opens directly, no source list to choose from
- Use Add file / the trash icon to build the set of rows you want to test, setting each row's name, file type, and status
- Check Simulate drag over to test the drop zone's drag state, if applicable
- Keep adjusting your template's settings — the preview updates live against whatever rows are in the simulator
- Click Done to return to the normal Live Preview
Related
- Types Settings — how per-type templates work
- Tabs Styling, Accordion Styling, Checkbox Styling, Radio Styling, Slider Styling, Swatches Styling, File Upload Styling
- File Upload (option type)
- Slider (option type)