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

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