Unable to track checkout users in Shopify Live View when using Hydrogen React with Next.js #3310
Description
What is the location of your example repository?
No response
Which package or tool is having this issue?
hydrogen-react
What version of that package or tool are you using?
^2024.10.0
What version of Remix are you using?
No response
Steps to Reproduce
Create a Hydrogen React storefront using Next.js.
Configure the storefront domain as www.mydomain.com.
Configure the Shopify checkout domain as checkout.mydomain.com (verified and connected in Shopify Admin).
Initialize Hydrogen analytics and cookies with:
useShopifyCookies({
hasUserConsent: true,
domain: ".mydomain.com",
checkoutDomain: "checkout.mydomain.com",
});
Use the CartCheckoutButton component from @shopify/hydrogen-react to redirect users to checkout.
Open the browser DevTools → Application → Cookies while on the storefront.
_shopify_y and _shopify_s are present on .mydomain.com.
Click “Checkout” and inspect cookies on checkout.mydomain.com.
_shopify_y and _shopify_s are missing.
Expected Behavior
Shopify should preserve or replicate the session cookies (_shopify_y and _shopify_s) when the user is redirected from the storefront to the checkout.
The user’s session should remain active and visible in Shopify Live View throughout the entire checkout process.
The combination of useShopifyCookies() and CartCheckoutButton should automatically handle cross-domain session tracking without any additional manual setup.
There should be no loss of tracking context between the storefront and checkout, even when using separate subdomains.
Actual Behavior
On the storefront domain (www.mydomain.com), session cookies _shopify_y and _shopify_s exist as expected.
After redirecting to the checkout domain (checkout.mydomain.com), those cookies are not replicated.
Only essential cookies like _shopify_essential, keep_alive, and localization appear.
The checkout flow works, but the user session is not recognized in Shopify Live View.
As a result, Live View shows 0 users at checkout, breaking end-to-end session tracking between the storefront and checkout.