Studio reference

​

How it works

dev server (localhost:4000)
        │  manifest + live reload
        ▼
Admin → Studio  ──▶  checkout preview (your store)

• CLI: whether Studio can reach the local dev server (and whether the build is healthy).
• Checkout: whether the preview has loaded and is ready to receive components.

​

Reference

Header

• Back to admin: returns to the store in the Admin.
• Version / stage selector: without a dev server it lists the store’s versions, with the live one badged. With a dev server connected on a project that uses the ollie.json components map, it lists the project’s stages instead ([PROD], [DEV], …), each badged local, and switching one reloads the preview on the version that stage links.
• CLI / Checkout status dots: green = ok, yellow = connecting, red = error.
• Device: switch the preview between Desktop (full width), Tablet (768px) and Mobile (390px).
• Inspect slots: outlines the slot under the pointer with its id. Right-click a slot to Copy slot id or Edit in studio.
• Highlight all slots: outlines every slot in the preview at once, to see where components can go.
• Reload preview: reloads the checkout preview.
• Maximize / Restore: hides the sidebar to give the preview full width.
• View live store: opens the same checkout in a new tab.

Sidebar tabs

• Theme: the version’s design tokens (see below).
• Components: the components in your local project (see below).
• Functions: coming soon. Functions are still managed in the Admin and deployed with the CLI.
• Settings: preview settings (see below).

Theme tab

Edits the theme of the version selected in the header. It works without a dev server.

• Sections: Brand Colors (primary, secondary, accent), Neutral Colors, System Colors (error, warning, success, info), Shape & Size (selector, fields, boxes), and Advanced Customization for any other token.
• Each color shows its contrast ratio and whether it passes AA or AAA.
• Save changes writes the theme to the version. Revert to saved discards the edits. Use Reload preview to see a saved theme in the checkout.

Components tab

Lists every component found in your local project, grouped by the slot it targets. Each row shows the component name, its id, and its assigned slot.

• Search by ID or name filters the list.
• Click a name to open its props panel.
• Open the ⋯ menu to Deploy it, or to Duplicate it.
• Select all or tick rows to enter select mode, then Deploy (N) to deploy several linked components at once. Unlinked components have to be published one by one first.
• Show all components reveals components that belong to another stage’s config.
• If the dev server isn’t running, the tab tells you to start it.

Duplicate copies the component’s entry in your project’s ollie.json into a second entry over the same folder, keyed by a generated alias (GlobalPixels-copy-a1b2c3) instead of a component id:

{
  "components": {
    "c3d4e5f6-a7b8-4c9d-8e0f-2a3b4c5d6e7f": {
      "path": "components/GlobalPixels",
      "slot": "global_layout_bottom"
    },
    "GlobalPixels-copy-a1b2c3": {
      "path": "components/GlobalPixels",
      "slot": "global_layout_bottom"
    }
  }
}

The copy shows up as a second, unlinked component: same source, its own slot and props. Deploy it to register it in your store. The alias is then replaced by the new component’s id. Available on projects using the ollie.json components map (not the legacy per-folder meta.json).

Settings tab

• Start route: the path the preview loads (defaults to /cart). Edit and reload to preview another page.
• A summary of how many components are linked vs unlinked.

Props panel

Selecting a component opens its editor, where you can edit its props and slot and toggle active.

• Visual edits props through a form driven by the component’s props schema (inferred from the current values when none is authored); JSON edits the raw object.
• Save changes persists props, slot and active for a linked component. It works without a dev server.
• Publish appears for an unlinked component once a slot is set: it creates the component in the selected version and deploys it to production.
• Back returns to the list.

Linked vs unlinked components

• Linked: the component exists in the database (real id, tied to your store/version). You can edit its props and deploy updates.
• Unlinked: a local component Studio detected but that isn’t registered yet (its id starts with studio-). Set a slot and Publish it before you can save props or deploy updates.

​

Deploying from Studio

1. Make sure the CLI dot is green and the build has no errors (deploy is disabled on build errors).
2. For an unlinked component, open it, set a slot, and click Publish. For a linked component, choose Deploy in its card menu, or select several and click Deploy (N).
3. Confirm in the dialog. Studio bundles the component, uploads it, and polls the build status until it succeeds (or surfaces a failure). After a successful publish, the CLI writes the new component id into your ollie.json.

​

Troubleshooting

​

Related

• Quickstart: set up your project and preview in Studio
• Payment Slots: building custom payment-method components
• Components: how components work
• Theme: theming the checkout