Skip to main content
Every custom component your checkout renders is a record in a store Version: a name, a slot, an active flag, optional props, and the build that holds its code. Studio and the CLI create and update these records for you; the Components area of the Admin is where you see and manage all of them.

​
The components list

Components list

Components: filter by version, search, and switch between grid and table

Open Components in the store sidebar. You can filter by version, search by name, slot or id, and switch between the grid (default up to 20 components) and the table. Each component carries one status: Two actions sit at the top: Import components, covered in its own page, and Create Component.

​
Creating a component record

Create Component form

New Component: the record is created first, the code can follow in the same form or later

After creation, copy the ID shown next to the component name. That is the id you link in your project’s ollie.json and pass to ollieshop deploy --component-id (see Build Your First Component). If you work from Studio instead, Publish creates the record and deploys in one step, so you rarely need this form.

​
The component page

A component has four tabs.

​
General Configuration

Component General Configuration tab
Name, Active, Slot (with the same Custom value option) and Version. Changing the version moves the component to another version of the store. The Danger Zone deletes the component and its builds; the action cannot be undone.

​
Props Configuration

Component Props Configuration tab
Key/value props the component receives at runtime. Add Property opens a drawer where you give the key, pick a type (String, Number, Boolean or JSON) and a value; object and array props get an edit button, and every prop can be deleted. Save is enabled once something changed, and the checkout reads the new values on its next load, with no rebuild. How a component declares and reads its props is covered in Props. Studio offers the same editor with a form or raw JSON view.

​
Code Management

Component Code Management tab
Upload a zip of the component’s source to start a build. The zip must contain a package.json and an index.tsx at its root, and can be at most 10 MB. The build status updates every few seconds (Building, Built, or Build failed) with a collapsible build log. Most projects never use this tab directly: ollieshop deploy and Studio bundle the folder and upload it for you. It is the right place when someone hands you a zip. An imported component shows a Synced copy notice here instead of the upload box first. Use Re-sync to pull the source’s latest build; deploying your own build replaces the synced copy.

​
Builds

Component Builds tab
Every build of the component, newest first, with its status (Current, Failed, or Archived), build id, who started it and when, and its log. Any build other than the current one offers Roll back, which repoints the storefront at that build without rebuilding anything. See Roll Back a Component.