useStoreInfo

Use this hook when you need store metadata (logo, platform, ids), the version’s theme tokens, its props and flags, or the store’s page settings. It’s useful for branded headers, components that read a custom prop, and anything that must follow a checkout flag.

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`	The store’s id in Ollie Shop
`platform`	`string`	The commerce platform, for example `"vtex"`
`platformStoreId`	`string`	The store’s id on the platform (the VTEX account name)
`versionId`	`string \| undefined`	The id of the version being served
`template`	`"default" \| "grocery" \| "sales" \| undefined`	The version’s template
`logo`	`string \| undefined`	URL of the store’s logo
`theme`	`Record<string, string> \| undefined`	The version’s design tokens, keyed by CSS variable name
`props`	`Record<string, unknown> & StoreInfoProps \| undefined`	The version’s props: flags, custom props, integrations
`settings`	`Record<string, unknown> \| undefined`	Store-level settings: `title`, `description`, `favicon`
`components`	`CustomComponent[] \| undefined`	The custom components injected into this version, with `id`, `name`, `slot`, `props` and `url`
`correlationId`	`string \| undefined`	Id of the current request, useful when reporting a problem

theme

Every token of the Theme tab, keyed by its CSS variable name. Only tokens the version has set are present.

const { theme } = useStoreInfo();
const primary = theme?.["--color-primary"]; // "#0061cc" or undefined

In CSS you can use the variables directly, var(--color-primary), without reading them here.

props

Everything the version’s Props Configuration tab holds, plus the integrations from the General tab:

props.flags: the checkout flags, typed as RuntimeFlags. A flag that was never set is undefined; the checkout applies its default internally.
props.steps, props.font, props.formFieldsController, props.shareCart: the predefined props.
props.integrations: GTM_ID, PAYPAL_CLIENT_ID and the other integration keys.
Any custom prop you added, under the key you gave it.

Only flags, formFieldsController, experiment, installmentsMinOrderValue and checkout are strongly typed. The rest is unknown, so narrow it before use:

const { props } = useStoreInfo();

const coupon = props?.flags?.showCouponCodeInputOpened;          // boolean | undefined
const banner = props?.promoBanner as { text?: string } | undefined; // a custom prop

settings

The store’s Settings Configuration: title, description and favicon, as an open record.

Usage

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

Example

Display the store logo in a custom header component, colored with the theme.

index.tsx
styles.module.css

import { useStoreInfo } from '@ollie-shop/sdk';
import styles from './styles.module.css';

function CustomHeader() {
  const { logo, settings, theme } = useStoreInfo();
  const title = typeof settings?.title === 'string' ? settings.title : null;

  if (!logo) {
    return null;
  }

  return (
    <header
      className={styles.header}
      style={{ backgroundColor: theme?.['--color-primary'] }}
    >
      <img src={logo} alt={title ?? 'Store logo'} className={styles.logo} />
    </header>
  );
}

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

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

Notes

In Studio, the values returned here already include the unsaved overrides you are previewing (components, props and theme), so a component behaves in the preview as it will after publishing.
messages (the version’s text overrides) is not exposed here; the native components read it through the translation layer.

Checkout Flags: the keys under props.flags and their defaults
Theme: the tokens behind theme
Store Settings: the fields behind settings

Overview

Start Here

AI Coding Agents

Core Concepts

Customization

Ollie Studio

Functions

CLI Reference

Ollie SDK

Analytics & Scripts

Tools & Tips

Product updates

Import

Return Value

theme

props

settings

Usage

Example

Notes

​Import

​Return Value

​theme

​props

​settings

​Usage

​Example

​Notes

​Related

Import

Return Value

theme

props

settings

Usage

Example

Notes

Related