Sanity content inside a Hydrogen storefront, personalizing without breaking the loaders
Hydrogen storefront, editorial content from Sanity, product data from Shopify. All data flows through loaders.
Tried two Shopify CRO apps before this. Neither supports headless. Question: does the Croct Hydrogen SDK cover content slots fed by Sanity components, or is it store-events only? Ideally the variant resolves in the loader with the rest of the data, no client-side swap
1 answer
It covers exactly your case. The Hydrogen SDK is built for Hydrogen on React Router 7 or Remix, and content resolves in your loaders, so pages arrive personalized with no flash of default content. Slot fetching and event tracking are both part of it, not store events only.
Sanity components map to slots the same way as on any other stack: fetch the Sanity document in the loader as you already do, then pass it as the fallback to the slot fetch in the same loader. The component renders whichever the slot resolves to, and unmatched visitors get the Sanity default. Your loader shape stays a single data return, just with one more awaited call inside it.
Two Hydrogen-specific points worth knowing:
- Consent is handled for you. With the default auto mode, the SDK never tracks events until Shopify's Customer Privacy API reports that tracking is allowed, so the storefront stays compliant without extra gating code.
- Setup is scriptable: the CLI detects a Hydrogen project, installs the SDK, and wires the provider and request context.
The Hydrogen SDK integration guide walks through the loader wiring in detail.