Shopify
  • Personalization for Shopify
  • Installing
  • Tracking & Session Management
    • Standard Shopify Storefronts
    • Custom Storefronts (Hydrogen, Headless & more)
  • Shopify International (Markets)
    • Front End addition
  • Recommendation Extensions
  • Guides
    • Quicker loading times
    • Granting Access to your Store
    • Adding/Moving Recommendations
    • Customizing Product Metadata
    • How Nosto modifies your theme
    • Version Controlled Themes
    • Implementing enhanced conversion tracking
  • Features
    • Variations (Configurable Products)
    • Managing the Cart
    • Supplier Cost & Inventory Level
    • Restore Cart Link
    • Ratings & Reviews
    • Multi Currency Support
    • Shopify Flow
    • Shopify Hydrogen
    • Marketing permission and GDPR compatibility
    • Online Store 2.0
    • Shopify Sections
    • Dynamic Bundle Discounts
    • Customer Reference
  • Integrations
    • Using Yotpo
    • Using Stamped.IO
    • Using Judge.Me
    • Using Okendo
  • Articles
    • Article: Leveraging Margin Data
  • FAQ
  • Uninstalling
  • Visit Nosto
  • Issues
  • Releases
Powered by GitBook
On this page
  • Why Custom Setups Are Different
  • What’s Required for Tracking to Work
  • Manual Session Token Sync (Required)

Was this helpful?

  1. Tracking & Session Management

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.

PreviousStandard Shopify StorefrontsNextShopify International (Markets)

Last updated 1 month ago

Was this helpful?