Have been doing what most people do for headless setups, put the hosted Shopify checkout on a subdomain. I.e. checkout [dot] store [dot] com. But I came across Fashionnova, one of Shopify’s proud, new Hydrogen cases. If you go to their checkout you can see that the checkout is on the same domain. How do they do that?
Hi @ragnsan
Since they are a plus merchant, they use headless setup along with Shopify’s Checkout Extensibility, which allows them to keep checkout on the same domain, while this works through Shopify’s Multipass authentication system combined with a reverse proxy setup.
Since Shopify Oxygen is optimized for Shopify’s backend, brands can host their entire site including checkout on their primary domain. If they are not using Oxygen, some brands use a reverse proxy to route checkout requests like from Fashion Nova | Fashion Online For Women | Affordable Women's Clothing | Fashion Nova to Shopify’s checkout engine without redirecting to a subdomain.
For an easy setup for a Plus merchant, Fully migrate the store to Hydrogen, Host the store using Shopify Oxygen, Shopify will allow checkout to remain on your primary domain.
Hope this helps.
Thank you for the response! Since we use Next.js, are we out luck? Or would it still work for clients on Plus?
Hi @ragnsan
Next.js can still be used as your frontend, fetching product and cart data via Shopify’s Storefront API, Since your client is a Shopify Plus merchant, you can utilize Checkout Extensibility to customize the checkout while keeping it within your main domain.
If you are not using Shopify Oxygen, you can set up a reverse proxy in Next.js , Example: Requests to /checkout on your domain (yourstorename.com/checkout) can be proxied to Shopify’s checkout engine, keeping the URL structure intact.
Shopify’s Multipass authentication allows customers to stay logged in when redirected to checkout, ensuring a smooth user experience.
But yes, your merchant should be on the plus plan for the same.
Hope this help.