> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# Import Components

> Copy a component from another store you have access to, even one in a different organization, into your own store as an independent, re-syncable copy

It's common to need the same component in more than one store. You build a payment notice or a shipping banner once, then a sister store (sometimes in another organization) needs the exact same thing, just with a few props changed. Rebuilding it by hand is wasted effort, and the two copies drift apart over time.

Import components solves that. You pick a source store, choose the components you want, and Ollie copies each one into your store as an inactive copy that keeps a link back to its source, so you can pull updates later.

You'll find it in the Admin dashboard at **store → Components → Import components**.

<Info>
  You can only import from organizations and stores you're a **member of**. The picker is scoped by your access, so importing across organizations works only when your account belongs to more than one. You'll never see, or be able to copy, a component from a store you don't have access to.
</Info>

## How it works

```
source store (any org you're a member of)
        │  copy props + slot, copy build artifact
        ▼
your store  ──▶  new inactive component (own id, __importSource → source)
        │  Re-sync (later)
        ▼
re-copies the latest build from the source component
```

Each import creates a **brand-new component** under its own id in your target version. The name, slot, and props are copied over, the build artifact is copied to the new id, and the copy is created **inactive** so it never goes live before you've reviewed it. The copy also records its origin (`__importSource`), which is what powers **Re-sync** and keeps the same component from showing up again on a second import.

## Importing components

<Steps>
  <Step title="Open the dialog">
    Go to **store → Components** and click **Import components**. The picker loads the organizations and stores you can import from.
  </Step>

  <Step title="Pick a source organization and store">
    Choose an **Organization**, then a **Store** within it. Only stores other than the one you're importing into are listed.
  </Step>

  <Step title="Select components">
    Check the components you want, or use **Select all**. The list shows each component's **name** and **slot**, and only includes components that are worth importing (see below).
  </Step>

  <Step title="Choose the target version">
    Pick the **version** the copies should land in. It defaults to the version you're viewing, or your store's default version.
  </Step>

  <Step title="Import">
    Click **Import**. Each component is copied independently, so if some fail the rest still succeed and you're told how many of each. Imported copies arrive **inactive**, so activate one when you're ready for it to render.
  </Step>
</Steps>

## Reference

<AccordionGroup>
  <Accordion title="What shows up in the list">
    The picker lists **active** components from the source store that have a built artifact. It hides anything that wouldn't be a useful import:

    * Components you've **already imported** from that source.
    * Components whose **build already exists** in your store (same underlying build), so you don't get duplicates.
    * Duplicate builds within the source itself (listed once).

    If there's nothing left after that, you'll see **"Nothing new to import from this store."**
  </Accordion>

  <Accordion title="What an import creates">
    For each selected component, the import:

    * Creates a new component with its **own id** in the chosen target version.
    * Copies the **name**, **slot**, and **props** from the source.
    * Copies the **build artifact** to the new id, so the copy renders on its own and doesn't depend on the source store staying around.
    * Marks the copy **inactive** and records its origin in `__importSource`.
  </Accordion>

  <Accordion title="Synced copies & Re-sync">
    Because an imported copy remembers where it came from, its detail page shows a **Synced copy** notice with a **Re-sync** button.

    * **Re-sync** re-copies the latest build from the original source component into your copy. Use it to pull updates after the source changes.
    * Avoid deploying a fresh build onto a synced copy unless you mean to replace it: a deploy here overwrites the synced build, and a later Re-sync would overwrite your changes in turn.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="No stores available to import from">
    You're only a member of the store you're importing into (or of organizations with no other stores). Importing needs at least one **other** store you have access to.
  </Accordion>

  <Accordion title="'Nothing new to import from this store'">
    Every importable component from that store is already in your store, or none of its components have a built artifact yet. Build and deploy the component in the source store first, then try again.
  </Accordion>

  <Accordion title="An imported component isn't rendering">
    Imports arrive **inactive** on purpose. Open the component and activate it once you've confirmed its props and slot.
  </Accordion>

  <Accordion title="The source component changed but my copy didn't">
    Copies don't update automatically. Open your copy and click **Re-sync** to pull the latest build from its source.
  </Accordion>
</AccordionGroup>

## Related

* [Components](../concepts/component.mdx) — how components work
* [Custom Component](./custom-component.mdx) — building a component from scratch
* [Studio](./studio-editor.mdx) — preview and deploy components from the Admin dashboard
* [Versions](../concepts/version.mdx) — where imported copies land