Skip to content
Guides

Store, menus, and CMS

Read the /v1/settings snapshot and the store's published content.

The generated root loads /v1/settings before rendering. That snapshot is available to every page and layout; you do not need to create a provider.

Snapshot structure

FieldContent
schemaVersionContract version 1 or 2.
generatedAtGeneration date.
storeIdentity, domains, currency, language, theme, features, and checkout.
cms.settingsBranding, SEO, contact, tracking, and scripts.
cms.pagesCMS pages included in the snapshot.
cms.menusPublished menus.

In a page

settings is passed directly to component:

pages/about.tsx
import { definePage } from "@ecomiq/storefront";

export default definePage({
  component: ({ settings }) => (
    <section>
      <h1>{settings.store.name}</h1>
      <p>{settings.store.description}</p>
      <p>{settings.store.currency}</p>
    </section>
  ),
});

In a component

Use useSettings inside the generated application tree:

import { useSettings } from "@ecomiq/storefront";

export function StoreLogo() {
  const settings = useSettings();
  const logo = settings.cms.settings.branding.logoUrl ?? settings.store.logo;

  return logo ? (
    <img src={logo} alt={settings.store.name} />
  ) : (
    <span>{settings.store.name}</span>
  );
}

useMenu finds a menu by key, excludes items with visible: false, and sorts them by order:

import { Link, useMenu } from "@ecomiq/storefront";

export function MainMenu() {
  const items = useMenu("main");

  return items.map((item) => (
    <Link key={item.url} to={item.url}>
      {item.label}
    </Link>
  ));
}

CMS pages

To find a published page inside the snapshot:

import { findStorefrontCmsPageBySlug } from "@ecomiq/storefront";

const page = findStorefrontCmsPageBySlug(settings, "home");

To request a page by slug from Storefront API:

import { serverApi } from "@ecomiq/storefront";

const page = await serverApi.getPageBySlug("about");

The reserved /pages/:pageSlug route uses getPageBySlug; it does not rely only on the snapshot.

Local config vs. settings

ecomiq.config.js contains operational settings. The store name, SEO, menus, currency, and business rules belong to /v1/settings.

On this page