Book a demoInstall app
Hydrogen (headless)

Hydrogen integration

Connect your headless storefront to the Shopify order.

PixelRelay uses a storefront package and a first-party route for Hydrogen events. Shopify checkout and order events complete the journey. This overview shows what each layer does and where to start.

Start the Hydrogen quickstart Assess the headless integration

Three layers, one journey

Storefront code covers the interactions you own. Shopify provides checkout and the source order.

  1. 01

    Hydrogen storefront

    The package and first-party route collect supported browse, product, cart, and search events.

  2. 02

    Shopify checkout

    Shopify’s Web Pixel handles supported checkout events after the shopper leaves the storefront.

  3. 03

    Shopify order

    The order webhook anchors the purchase to Shopify’s order record.

Your implementation path

The quickstart has the code and checks for each step.

  1. 1

    Prepare the store

    Install PixelRelay, enable Hydrogen on Growth and up, and get the per-shop token.

  2. 2

    Connect the storefront

    Install @pixelrelay/hydrogen, add the first-party route and CSP directives, then mount the provider.

  3. 3

    Cover the journey

    Wire the supported view, add-to-cart, and checkout handoff events used by your storefront.

  4. 4

    Verify delivery

    Check the first-party requests and recent events in the PixelRelay app.