Shopify Headless Getting Started

Use this path when Shopify is still your commerce backend, but the storefront is Hydrogen, Next.js, or another custom frontend.

What Changes In Headless Mode

You still use Shopify as the commerce system, but you do not use the theme app extension blocks as the storefront layer.

Instead, you usually combine:

• Shopify-side catalog ownership
• PSYKHE APIs for tracking and recommendations
• @psykhe-ai/ui or custom host UI in your headless frontend

Recommended Integration Sequence

1. Confirm how catalog sync will work.
2. Implement shopper tracking in the headless frontend.
3. Render recommendation, browse, or search surfaces in the frontend.
4. Validate route behavior, identity, and query synchronization.

Catalog Sync Options

Recommended:

• keep Shopify as the source of truth
• use the Shopify app or a Shopify-managed sync path where available

Fallback:

• use the generic ingestion flow documented in Custom Integration

Frontend Integration Options

For the storefront itself, you have two good choices:

1. use @psykhe-ai/ui and keep the web-component contract
2. call the APIs directly and render your own host UI

The first option is faster. The second option gives you full frontend ownership.

APIs You Usually Need

• Tracking API for shopper behavior
• Recommendation and browse APIs for search, PLP, and recommendation surfaces
• Ingestion API if you are not using a Shopify-managed sync path