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.

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.

Prompt

Build a custom header using the store logo.

Don’t have the skill yet? Install it.

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

Overview

Start Here

AI Coding Agents

Core Concepts

Customization

CLI Reference

Ollie SDK

Analytics & Scripts

Tools & Tips

Product updates

Import

Return Value

theme

props

Usage

Example

​Import

​Return Value

​theme

​props

​Usage

​Example

Import

Return Value

theme

props

Usage

Example