What is Ollie Studio

Ollie Studio is the workspace where you see your checkout change as you work on it. It loads your store’s real checkout in a preview, connects to the dev server running in your project, and lets you edit what the checkout renders from a sidebar. When something is ready, you publish it from the same screen.

Studio overview — Studio with a local project connected: stage selector and connection status in the header, the Components tab on the left, and the real checkout on the right rendering the local HelloWorld component in its slot

Opening Studio

From the Admin, open your store and click Studio in the sidebar. It opens in a new tab at admin.ollie.shop/studio?storeId=<store-id>.
From a project, npm start (which runs ollieshop start) opens Studio for the store in your ollie.json and connects it to the dev server. Pass --no-open to skip the browser.

How it works

Studio is a bridge between three things:

your project (components/, ollie.json)
        │  ollieshop start builds it and serves a manifest + live reload on http://localhost:4000
        ▼
Studio (Admin)  ──pushes components and settings──▶  checkout preview (your store, in an iframe)

The dev server in your project builds every component it discovers and exposes a manifest. When you save a file, it rebuilds and notifies Studio.
Studio reads the manifest, shows your components in the sidebar, and pushes each component’s code into the preview. It pushes again on every rebuild, so the preview hot-reloads.
The preview is your real checkout, loaded in Studio mode. Everything the shopper sees (cart, shipping, payment, totals) is real for the version you selected; only the components you are working on come from your machine.

Two status dots in the header tell you whether each half of the bridge is up: CLI (Studio can reach the dev server, and the last build succeeded) and Checkout (the preview has loaded and is listening).

Nothing you do in Studio changes your store until you Save or Publish. Previewing a local component, switching device sizes, or navigating the preview is invisible to shoppers.

What you can do from Studio

Task	Needs the dev server?	Where
Preview components from your project in the real checkout, with hot reload	Yes	Components tab
Set a component’s slot, edit its props, toggle active, and save	No for linked components	Props panel
Publish an unlinked local component (creates it in the store and deploys it)	Yes	Props panel
Deploy one or several linked components	Yes	Components tab
Duplicate a component into a second slot	Yes	Components tab
Edit the version’s theme tokens (brand, neutral and system colors, shape and size) and save	No	Theme tab
Inspect slots: hover the preview to see slot ids, right-click to copy one or jump to the component in that slot. Highlight all slots outlines every slot at once	No	Header
Preview the checkout as desktop, tablet or mobile and from a different start route	No	Header and Settings tab
Switch between the store’s versions, or between your project’s stages	No for versions, yes for stages	Header

What Studio does not do: it does not edit code. Your component source stays in your project and your editor; Studio shows the result. The Functions tab is marked coming soon, so functions are still created and configured in the Admin and deployed with the CLI.

The main workflows

Preview and iterate

Start the dev server, open Studio, and open the Components tab. Every component in your project is listed, grouped by slot. Click one to open its props panel. Edit the file in your editor; the preview updates on save. An unlinked component (one your store does not know yet) shows a temporary studio-* id and only renders once it has a slot. Set the slot in the props panel, or in the component’s ollie.json entry.

Edit props without a deploy

For a linked component, the props panel is the fastest way to change behaviour that the component reads from props: switch between the Visual form and raw JSON, change the slot, toggle active, then Save changes. The checkout picks the new values up on its next load. No build and no CLI involved. See Props.

Studio props panel — The props panel of an unlinked component: slot picker, Visual/JSON props editor, and the Publish button

Publish and deploy

An unlinked component gets a Publish button once it has a slot. Publish creates the component record in the selected version, bundles your local code, uploads it, and follows the build until it finishes. The CLI then writes the new id into your ollie.json, so the folder is linked from then on.
A linked component has a Deploy action in its card menu. Select several cards to deploy them together with Deploy (N).

Deploys go to production for the selected version. Studio refuses to deploy while the dev server reports a build error.

Theme

The Theme tab edits the design tokens of the selected version: brand, neutral and system colors, shape and size presets, plus any custom token under Advanced Customization. Each color pair shows its contrast ratio against the WCAG AA and AAA thresholds. Save changes writes the theme to the version; Reload preview shows it in the checkout. See Theme for the token names.

Inspect slots

Turn on Inspect slots in the header and hover the preview: the slot under the pointer is outlined and labelled with its id. Right-click it to Copy slot id, or to Edit in studio, which opens the component currently rendered there. This is the quickest way to answer “which slot is this?” when you plan a customization.

Studio slot inspector — Slot inspector: the hovered slot is outlined and labelled, and a right-click offers Copy slot id and Edit in studio

Versions and stages

Without a dev server, the header selector lists your store’s versions, with the live one marked. With a dev server running on a project that uses the ollie.json components map, the selector switches to your project’s stages instead (ollie.json is prod, ollie.<stage>.json the others), so you can preview the components each stage links against its own version.

Next steps

Studio reference

Every tab, button and status, plus troubleshooting

Quickstart

Scaffold a project and publish your first component from Studio

Slots

What a slot is and how components fill them

Theme

The tokens the Theme tab edits

Overview

Start Here

AI Coding Agents

Core Concepts

Customization

Ollie Studio

Functions

CLI Reference

Ollie SDK

Analytics & Scripts

Tools & Tips

Product updates

What is Ollie Studio

Opening Studio

How it works

What you can do from Studio