useStoreInfo - Ollie Shop

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

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 in the Admin.

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 settings. You can create any custom properties you need for your store.

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

const { props } = useStoreInfo();

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

Usage

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

Example

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

index.tsx
styles.module.css

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>
  );
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

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

.platform {
  font-size: 12px;
  color: #666;
}

​Import

​Return Value

​theme

​props

​Usage

​Example

Import

Return Value

theme

props

Usage

Example