Custom Storefronts (Hydrogen, Headless & more)

Personalization in Nosto depends on the ability to recognize returning visitors, follow them through the purchase journey, and attribute purchases correctly. On Shopify, tracking and session persistence require a few special building blocks — especially during Checkout. If your store is built using Shopify Hydrogen, Next.js, or another custom frontend framework, session tracking requires a slightly different setup than it does with standard storefronts.

This guide explains how to keep Nosto Personalization working across the customer journey — even when the standard tracking cookie and Shopify Pixel don’t work out of the box.

Why Custom Setups Are Different

In custom storefronts, Shopify often hosts the Storefront and Checkout on different domains (e.g. yourstore.com and checkout.shopify.com). Because of this, browser cookies (like Nosto’s 2c.cId) don’t automatically carry over from one context to the other.

As a result:

• The cookie is not available in checkout

• The Shopify Pixel may not trigger

• Session continuity can break without manual intervention

What’s Required for Tracking to Work

To maintain session tracking across Storefront & Checkout, you’ll need to:

• Ensure the Nosto script runs on the custom frontend

• Manually sync session data with Nosto before Checkout

Manual Session Token Sync (Required)

You’ll need to send the customer’s session ID, cart token, and shop ID to Nosto before redirecting to checkout. You can use this function:

export async function checkTokenToCustomer(cartIdGid, shopIdGid, providedCustomerId) {
  let customerId = providedCustomerId || getCookie('2c.cId');
  const cartToken = cartIdGid?.replace('gid://shopify/Cart/', '');
  const shopId = shopIdGid?.replace('gid://shopify/Shop/', 'shopify-');

  if (!customerId || !cartToken || !shopId) return;

  const NOSTO_URL = `https://connect.nosto.com/token/${shopId}/${customerId}/${cartToken}`;
  try {
    await fetch(NOSTO_URL);
  } catch (err) {
    console.error('Nosto: error updating cart:', err);
  }
}

💡 Call this after cart updates and right before sending the user to Checkout.