Channel · Headless / custom storefronts

If your storefront is hydrated, your audit should be too.

A headless build ships a thin HTML shell and hydrates the rest — title, price, JSON-LD — in the browser. Static-fetch audit tools read the shell and report "no content." eCommerce Insights renders the JavaScript first, scores the DOM the AI engines actually see, and ships fixes as code-level diffs your team merges like any PR.

HydrogenNext.js · PWA Studio · CatalystAny backend
Why headless storefronts are exposed

The measurement error that looks like a finding.

Empty shell

Static fetches read a page that isn't there.

The initial response from a Hydrogen or Next.js Commerce build is a few KB of head meta and a bundle reference. Product content arrives after hydration. An audit that stops at the shell reports "no PDP content" — a measurement error, not a finding.

Render budget

Crawlers don't wait forever.

Google renders JavaScript; the other engines render selectively, and none waits indefinitely. A PDP whose price, availability, or JSON-LD lands after the practical render window risks being indexed by its static shell. Google's own JavaScript SEO documentation describes the rendering model the audit is built to surface.

Edge variants

Edge middleware shows crawlers a different page.

Vercel Edge Middleware, Cloudflare Workers, and Shopify Oxygen routes rewrite responses by geography, test bucket, or flag. A fixed-IP static audit sees one variant. The rendered audit can be pinned to a geography to match what the AI crawler likely receives.


What the scan checks on headless builds

Both scores, against the rendered DOM.

CheckScoreHeadless surface
Product JSON-LD present in rendered DOM — and when it hydratesBothloader / next-script
Static vs. rendered gap — what non-rendering crawlers missAgentSSR strategy
Hydration timing for price, availability, and schema vs. 2.5s windowAgentrender budget
Answer coverage of rendered PDP content vs. buyer queriesCitationpage content
Entity clarity — brand and product resolve from the rendered pageCitationschema + content
robots.txt admittance for GPTBot, PerplexityBot, ClaudeBot, Google-ExtendedAgentedge / origin
Machine-readable returns and shipping policies at stable URLsAgentroute design
llms.txt and feed availability as the machine contractAgentllms.txt / API

Catalog ingestion is backend-agnostic: commercetools, Saleor, Medusa, or a custom API all feed the same per-SKU ledger. See SKU-level tracking.

From finding to fix

Diffs your engineers merge, not tickets they translate.

On a headless build the fix is code, so the recommendation is code-shaped: emit Product JSON-LD from the server loader rather than a client effect, include offers.availability in the product fetch, serve policies at stable crawlable routes, allow the AI crawlers at the edge. Each diff explains the finding it resolves and the score it moves, ships through your normal PR flow, and re-audits against the staging URL before merge. There is no push on this channel — by design — and CSV or API export covers reporting pipelines.

Headless Shopify (Hydrogen) gets both halves: the rendered audit on the storefront plus admin-API catalog reads from the Shopify integration.

Code diff · illustrative
app/routes/products.$handle.tsx
— useEffect(() => injectJsonLd(product), [product])
+ export const loader = () => json({ product, jsonLd: productSchema(product) })
Effect: JSON-LD in the initial response — inside every crawler's render budget.
Worked example

A Hydrogen migration that silently cost citations.

JSON-LD hydration time, mobile3.4s → 0s (server)
Static fetch JSON-LD0 → 1,840 bytes
Agent-readability score44 → 88
Changes shippedone loader refactor

Illustrative: a footwear brand that migrated from a Liquid theme to Hydrogen and watched ChatGPT citations slide quarter over quarter with no obvious cause. The rendered audit showed Product JSON-LD arriving via a streaming component 3.4 seconds after load on mobile — outside the practical render window. Moving the schema into the initial server response closed the static-versus-rendered gap; the following scan cycles recorded the SKUs re-entering answers.

Numbers are illustrative; no customer case studies are published without permission.


Frequently asked questions

Why do most AI audit tools fail on headless storefronts?

They fetch statically. A typical Hydrogen, Next.js Commerce, or PWA Studio response is a thin HTML shell plus a script bundle; the title, description, and JSON-LD arrive after hydration. A static fetch reports no content found while engines that render JavaScript see a full page. The audit and the engines should read the same DOM — that's what the rendered audit does.

Which headless frameworks does eCommerce Insights support?

Any framework whose pages render in a browser, because the audit scores the rendered DOM, not the source. Most-tested: Shopify Hydrogen, Next.js Commerce, Adobe Commerce PWA Studio, BigCommerce Catalyst, Saleor and commercetools frontends, plus custom Next.js, Nuxt, Remix, and SvelteKit builds.

Can it read JSON-LD injected client-side via next/script or useEffect?

Yes, with JavaScript rendering enabled. The fetch runs in headless Chrome, waits a configurable window — 2.5 seconds by default, up to 10 — then reads every application/ld+json block in the hydrated DOM. The report shows static versus rendered side by side, so you can quantify exactly what a non-rendering crawler misses.

What does a fix look like on a headless build?

A code-level diff, not an admin edit: emit the Product JSON-LD from the server loader instead of a client effect, add the offers block to the product fetch, surface returns and shipping policies at stable URLs. Your engineering team ships it through the normal PR flow and re-audits the staging URL before merge.

Are there cases the rendered audit still misses?

Two. Content that requires interaction — a click, a scroll, a region selector — won't appear without automation, and the audit flags it because AI engines can't see it either. And content gated behind authentication or session-bound personalization won't render in a clean browser; the audit reports the public view, which is what AI crawlers get.

Ask AI about eCommerce Insights for headless storefronts

Have your preferred AI engine summarize this page for your stack.

Static and rendered, side by side

Audit the page the engines actually see.

Hydrogen, Next.js Commerce, PWA Studio, Catalyst, Saleor, and beyond. 14-day free trial, no credit card.

headless Chrome · 2.5–10s wait · any backend