> ## 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.

# useStoreInfo

Use this hook when you need to access store metadata like the logo URL, platform information, or custom configuration. It's useful for building custom headers, or branded components.

<Tip>
  **Let your agent build it.** The Ollie Shop skill ships with projects created by `npx create-ollie-shop` and knows to read the platform account from here rather than taking it as a component prop.

  ```text title="Prompt" theme={"system"}
  Build a custom header using the store logo.
  ```

  Don't have the skill yet? [Install it](/ollie-shop/skills).
</Tip>

## **Import**

```typescript theme={"system"}
import { useStoreInfo } from '@ollie-shop/sdk';
```

## **Return Value**

| Property | Type | Description |
| - | - | - |
| `storeId` | `string \| undefined` | Unique identifier for the store in Ollie Shop's database |
| `logo` | `string \| undefined` | URL to the store's logo image |
| `versionId` | `string \| undefined` | Version identifier for the current store configuration |
| `platform` | `string` | Name of the e-commerce platform (e.g., `"vtex"`, `"shopify"`) |
| `platformStoreId` | `string` | Store ID from the underlying platform (e.g., VTEX account name) |
| `theme` | `Record<string, string> \| undefined` | Theme object with style tokens like colors and fonts |
| `props` | `Record<string, unknown> \| undefined` | Custom configuration properties defined in the Admin |

### theme

The `theme` object contains CSS custom properties (tokens) that define your store's visual identity. These values are configured in the [Theme settings](/ollie-shop/configuration/theme) in the Admin.

```typescript theme={"system"}
const { theme } = useStoreInfo();

// Example theme object:
// {
//   "--color-primary": "#556AEB",
//   "--color-secondary": "#BFC9FF",
//   "--font-family": "Inter, sans-serif"
// }
```

### props

The `props` object contains custom configuration values that you define in the Admin under your [Version](/ollie-shop/concepts/version) settings. You can create any custom properties you need for your store.

<Info>
  Custom props are defined in the Admin under **Version > Props**. You can add any JSON configuration that your custom components need.
</Info>

```typescript theme={"system"}
const { props } = useStoreInfo();

// Access custom props you defined in the Admin
const myCustomConfig = props?.myCustomSetting;
```

## **Usage**

```typescript theme={"system"}
const {
  logo,
  platform,
  platformStoreId,
  storeId,
  versionId,
  theme,
  props
} = useStoreInfo();
```

## **Example**

Display the store logo in a custom header component with platform-specific styling.

<Tabs>
  <Tab title="index.tsx">
    ```typescript theme={"system"}
    import { useStoreInfo } from '@ollie-shop/sdk';
    import styles from './styles.module.css';

    function CustomHeader() {
      const { logo, platform, theme } = useStoreInfo();

      if (!logo) {
        return null;
      }

      return (
        <header
          className={styles.header}
          style={{ backgroundColor: theme?.['--color-primary'] }}
        >
          <img
            src={logo}
            alt="Store logo"
            className={styles.logo}
          />
          <span className={styles.platform}>
            Powered by {platform}
          </span>
        </header>
      );
    }
    ```
  </Tab>

  <Tab title="styles.module.css">
    ```css theme={"system"}
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
    }

    .logo {
      height: 40px;
      width: auto;
    }

    .platform {
      font-size: 12px;
      color: #666;
    }
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.