Appearance
Sandbox & Live Preview
Control exactly what data the Live Preview shows while you're styling an Accordion, Swatches, Tabs, or File Upload template — a realistic mockup, your own temporary test values, or (for Accordion/Swatches/Tabs) 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, or how a rejected file looks in your File Upload styling.
Sandbox is available whenever you're editing an Accordion, Swatches, Tabs, or File Upload 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, Swatches, Tabs, or File Upload 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, 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 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.
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.
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, 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, 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, Swatches Styling, File Upload Styling
- File Upload (option type)