All things Shopify and commerce
Hello we are using a headless implementation of Shopify using Next.js , when a customer tries to check out from our headless store they are redirected to a completely different domain which looks like its part of shopify template store to finalize the payment. Is there a way to keep checkout native and on the domain thats connected to the headless storefront?
TLDR;
Customer visits ourheadlessstore.com
Custom adds item to cart
When customer presses Checkout button customer redirected to blahblahblah-3.myshopify/checkouts/
Any clues on how to keep checkout native on the headless storefront? What am I missing?
Solved! Go to the solution
This is an accepted solution.
Yes, it is possible to keep the checkout process native and on the same domain as your headless Shopify store. This can be achieved through the use of Shopify's Checkout API.
The Checkout API allows you to build custom checkout experiences for your customers. It provides access to the same checkout data and functions as the default Shopify checkout, but with the added flexibility of allowing you to fully customize the checkout process within your own website.
This is an accepted solution.
Yes, it is possible to keep the checkout process native and on the same domain as your headless Shopify store. This can be achieved through the use of Shopify's Checkout API.
The Checkout API allows you to build custom checkout experiences for your customers. It provides access to the same checkout data and functions as the default Shopify checkout, but with the added flexibility of allowing you to fully customize the checkout process within your own website.
You are wrong. It is NOT possible unless you create a Sales Channel which is not practical. This is Shopify's biggest pitfall and reason we don't recommend it.
Even a sales channel can not use a native checkout, I have researched and talked with Shopify employees about this, as a sales channel YOU ARE FORCED to use cart permalinks, even though the documentation says that there is a way to use native checkout this is not possible and the documentation is wrong because it is not updated. That's why there is no single app (apart of Shop) that has a native checkout for Shopify stores. It is not possible to solve this problem even if you become a marketplace (Faire/Amazon/Ebay) because Shopify does not allow you to use their website or store to redirect the checkout to other website. It seems that this is a strategic move from Shopify.
Yeah, unfortunately, this is not correct. When it comes to your domain, if you point it to your headless application (which we all will), the checkout will be set to default my-store.shopify.com. This means all links (for instance, the logo on the checkout page) will go back to the default templated store and not your headless application. I have went around this by forwarding EVERYTHING with my-store.shopify to my headless, but unfortunately, the biggest hurdle is having to deal with a checkout that loses continuity from the main app. It works for us but it looks tacky, and feels tacky.
Definitely incorrect.
We spent a great deal of time building out a custom checkout via the Checkout API only to be informed (after many painful discussions with support) that the documentation is outdated and this is no longer possible
"Regardless of whether you're using the online store or Hydrogen, customers are always directed back to a Shopify-hosted checkout. Traditionally, a checkout URL might look something like {shop}.myshopify.com/123456/checkouts…."
https://shopify.dev/docs/storefronts/headless/hydrogen/migrate#subdomain-for-checkout
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024