We have a NextJS app utilizing the Storefront API. This site is hosted on a custom domain e.g. `headless.com` but we felt we needed to change our primary domain to the subdomain `checkout.headless.com` since we cannot embed the checkout on our headless site as far as we're aware. This didn't seem like it would be an issue, but now Shopify thinks our primary domain for everything is `checkout.headless.com` which means all app integrations, SEO and sitemap, etc. are pointing to `checkout.headless.com`. For instance coupon code links go to `checkout.headless.com/discounts/[id]` rather than `headless.com/discounts/[id]` and product links go to `checkout.headless.com/products/[id]` etc. But we do not use the Shopify Online Store since we are headless, so none of these links are accurate.
I feel we have set this up incorrectly, but have searched everywhere to find a way to fix this and cannot find a resolution.
The ideal solution would be that the Shopify Checkout has its own domain while the rest of Shopify points to the headless domain. Unless there is a way we can have the checkout and the headless storefront on the same domain, but I don't see any way that would be possible.
As far as I know is not possible, at the moment, to have the Shopify checkout on the same domain of an headless storefront, not even on Shopify Plus.
At the moment I found only one website that does that and it is Netflix Shop and it was created in collaboration with Shopify.
Could be that in future they will extend this possibility to other shop too.
If this isn't possible I wonder what approach headless stores will typically choose to solve this problem? Because the checkout will be on whatever is set to primary domain and if that cannot be on the same domain as the headless site, that means that all of the pre-generated Shopify links (and all connected app store integrations) will be defaulting to the primary domain which does not actually host the store and is wrong e.g. primarydomain.myshopify.com/discounts/[id] instead of headlessdomain.com/discounts/[id] among many other examples such as products, collections, SEO and sitemaps.
If you go headless, you have to reimplement all the frontend. Shopify collections and products exist only in the backend, you have to develop the code to present them to the user.
Regarding SEO and sitemap, same story, you implement SEO on your main domain, not on Shopify and you have to create your custom sitemap.
You'll will not able to use any Shopify App that work with Shopify frontend, or you have to integrate those apps by yourself through scripts or API that the App Developer may eventually provide.
Same for discount, you will create a Checkout instance using Shopify APIs and add the discount based on your business logic.
There's a lot of work involved if you want to go headless.
Yes I am aware you need to implement this all on the frontend. What I'm saying is these integrations (even some that are intended for headless) are pointing to the primary domain instead of the alternate domain that is used for the headless frontend. Some of these things are not able to be turned off via Shopify to prevent it from pointing things to the primary domain. This causes lots of issues since there seems to be no way to specify the domain of the frontend. Yotpo is an example as their widgets that are designed for implementation on the headless frontend point to the primary domain rather than the actual domain that is used for the website, making them virtually unusable. This same thing happens in every App Store integration I have seen, as there is no way to specify the base url of the actual domain for the frontend versus the primary domain which isn't used for anything except for checkout.
It seems the only solution is to build your own custom checkout and create a sales channel to do so.