Skip to main content

Global Provider

App-wide wrapping already exists in the repository as a plain React component, ThemeProvider, and it is rendered explicitly in the layout code.

In the hosted Turbo theme, a theme exports a GlobalProvider component from the theme bootstrapping function (getGlobalProvider), and the Theme Engine wraps the storefront with it automatically.

export function ThemeProvider({ children }) {
  const fpi = useFPI();
  // SEO tags, font preloads, CSS variables, Copilot initialization, etc.

  return <>{children}</>;
}
return (
  <ThemeProvider>
    <div className="fdk-theme-header">
      <Header fpi={fpi} />
    </div>
    <main className="fdk-theme-outlet">
      <Outlet />
    </main>
    <div className="fdk-theme-footer">
      <Footer fpi={fpi} />
    </div>
  </ThemeProvider>
);

Adding Your Own App-Wide Context​

To add app-wide context, state, or a third-party integration in Headless Turbo, edit theme/providers/global-provider.jsx and theme/layouts/RootLayout.jsx directly instead of authoring a separate GlobalProvider and registering it elsewhere:

  • Extend ThemeProvider with additional side effects or useEffect calls, or
  • Nest your own provider component around {children} inside ThemeProvider, or around <ThemeProvider> in RootLayout.jsx if it needs to wrap the header and footer too.

There is no separate registration step — whatever you render in RootLayout.jsx wraps the entire routed application.