Integrate Shopify Hydrogen with Croct
Automatically track events and ptimize your Shopify headless storefront.
This integration connects your Shopify store to Croct. Once set up, it renders dynamic content, automatically tracks your storefront’s e-commerce events, and enriches user profiles with your customers’ data, so you can build audiences, run AB tests, and personalize the shopping experience.
This integration targets stores built with Shopify Hydrogen, Shopify’s headless React framework. If your store runs on a classic Liquid theme (the Online Store), you should use the JavaScript SDK for dynamic content rendering and, when your theme already uses GTM or GA4, the Google Tag Manager integration for automatic event tracking.
How it works
The Hydrogen SDK plugs into your storefront’s server-side rendering and its analytics pipeline:
- Dynamic content rendering: You fetch a slot in a route loader and render it directly from the loader data, so the dynamic content markup ships with the initial server response.
- Automatic event tracking: Once the provider sits inside Shopify’s <Analytics.Provider>, the SDK subscribes to Shopify’s storefront analytics and forwards each event to Croct. No manual instrumentation is required for the standard storefront events.
- User identification: When your storefront uses Shopify customer accounts, the logged-in customer is identified on every request out of the box, so their experience stays consistent across devices and sessions.
The SDK works with both React Router 7 and Remix Hydrogen apps, and the CLI wires up whichever one your storefront uses.
Because Hydrogen renders on the server, Croct resolves content in your loaders and the page arrives with dynamic content already applied. There’s no client-side flash of default content before the personalized or experiment variant version loads.
Event mapping
The SDK maps Shopify’s storefront analytics events to Croct’s e-commerce and engagement events:
| Shopify analytics event | Croct event |
|---|---|
| Product view | productViewed |
| Cart view | cartViewed |
| Cart update | cartModified |
| Collection and search view | interestShown |
For events beyond the standard storefront set, you can track custom events using the SDK instance.
With the default auto mode, the SDK never tracks events until Shopify’s Customer Privacy API reports that tracking is allowed, so your storefront stays compliant out of the box. See event tracking for the details.
Prerequisites
Before you start, make sure you have:
- A Croct account with a workspace and application set up.
- A Shopify storefront built with Hydrogen on React Router 7 or Remix.
- Shopify’s standard analytics components in place, so the SDK can forward storefront events.
Set up the integration
The fastest way to connect your storefront is through the Croct CLI.
- Initialize the SDK
From your Hydrogen project, run the CLI. It detects your setup, installs the SDK, and wires the provider and request context for you.
Command to initialize your projectnpmnpx croct@latest init - Render personalized content
Fetch the slot in a route loader and render it from the loader data.
For a manual, step-by-step walkthrough instead, follow the manual installation guide.
Verify the integration
Once the SDK is running, confirm that content, events, and customer data flow into Croct.
- Browse your store
Open your storefront and view a product, add it to the cart, and start a checkout. Sign in so customer data is available.
- Check the events
Open the dashboard page in the admin app and confirm that events are arriving.
- Check the profile
Open the user profiles page, open a profile, and confirm it reflects the identified customer.
With content, store events, and customer data flowing into Croct, you can now personalize your storefront, run AB tests, and create audiences from shopping behavior.