@zalify/storefront-kit

The Zalify storefront SDK: everything shared between Zalify storefronts, shipped as one versioned package. Scaffold a storefront with npx zalify theme create and upgrade this package to pull in new engine features, sections, and blocks — your customizations live in your project, not in a fork (the same model as the Shopify Hydrogen SDK).

pnpm create zalify-theme@latest

Subpath exports

| Import | What's inside | | --- | --- | | @zalify/storefront-kit/commerce | Framework-agnostic commerce logic: money & unit-price formatting, the cart event-bus contract, countdown math, the facets URL codec, Storefront-API product helpers. Pure TypeScript — no DOM, no React. | | @zalify/storefront-kit/schemas | The theme contract: Shopify OS 2.0-aligned theme JSON data types (templates, sections, blocks), section/block schema types, the editor manifest format, the canvas-editor bridge protocol, and validators for all of them. | | @zalify/storefront-kit/editor | The canvas-editor bridge — postMessage runtime for editing a running storefront across origins. /editor/frame mounts inside the storefront preview (selection hit-testing, highlights, optimistic template apply); /editor/host drives the preview iframe from the editor. | | @zalify/storefront-kit/react | The theme engine + shared React components: installTheme, <ThemeTemplate>/<SectionGroup> renderers, the settings→CSS pipeline, built-in section/block registries, and components like ProductCard, Price, Facets. | | @zalify/storefront-kit/react/server | Server side of the section engine: per-section-type data loaders (loadSectionData, builtinSectionLoaders) for route loaders / server components. |

React is an optional peer dependency — only the /react subpaths need it (a Liquid theme consuming /commerce installs nothing else).

How an app uses the engine

// 1. Register the theme once at startup, merging the built-in
//    sections/blocks with your app-local ones:
import {installTheme, builtinSections, builtinBlocks} from '@zalify/storefront-kit/react';
installTheme({
  schema,                                        // your theme's JSON data
  sections: {...builtinSections, ...appSections}, // extend, don't fork
  blocks: {...builtinBlocks, ...appBlocks},
});

// 2. Inject your framework's router/cart primitives through the
//    adapter seam:
import {AdapterProvider} from '@zalify/storefront-kit/react';
<AdapterProvider adapter={myAdapter}>{children}</AdapterProvider>;

// 3. Render pages from theme JSON:
import {ThemeTemplate} from '@zalify/storefront-kit/react';
<ThemeTemplate name="product" resources={resources} sectionData={data} />;

Customization happens by registering your own sections/blocks and editing your project's theme JSON — not by patching this package. That is what keeps pnpm up @zalify/storefront-kit a safe operation.

Versioning

Pre-1.0: minor versions may contain breaking changes; patch versions are safe. The package ships compiled ESM + type declarations (dist/) with the TypeScript source included (src/) for reference and sourcemaps.

License

Source-available under the Zalify Source Available License: build, modify, and operate storefronts freely (including for clients); don't redistribute the SDK or use it to build competing theme products.