Skip to main content
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

PropertyTypeDescription
storeIdstring | undefinedUnique identifier for the store in Ollie Shop’s database
logostring | undefinedURL to the store’s logo image
versionIdstring | undefinedVersion identifier for the current store configuration
platformstringName of the e-commerce platform (e.g., "vtex", "shopify")
platformStoreIdstringStore ID from the underlying platform (e.g., VTEX account name)
themeRecord<string, string> | undefinedTheme object with style tokens like colors and fonts
propsRecord<string, unknown> | undefinedCustom 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. 
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>
  );
}