Headless store - checkout on primary domain

[nathangaw]

Hi - we have a headless Shopify store, with the checkout on the store's myshopify.com domain. I've switched the primary domain of the online store to a custom domain and the 'online store' channel and checkout successfully appear on the custom domain. But, when a customer is sent to the same checkout from the headless store the checkout domain is still myshopify.com. Can custom domains be applied to the checkout for headless channel customers?

[Dan-From-Ryviu]

Did you try to use another browser to checkout after connect your 3rd party domain in Shopify and mark it as the main domain in your store?

[nathangaw]

Thanks - yes, I've tried different browsers, incognito mode, completely new devices and cleared cookies/cache, but it still appears on myshopify.com when accessed via the headless channel.

[Stacy_Zhuk]

Hello @nathangaw,

Can you please clarify - you actually use 2 websites: one on the main domain where some customers sell everything natively inside Shopify and another one on a separate domain where you are using a headless Shopify installed cart and then want to direct a customer to a first mentioned instance's domain?

Best regards,
Anastasia  

[nathangaw]

Hi - we have a Shopify instance with a primary domain of store-checkout.clientdomain.com. We don't use the online store, but the online store loads fine on the primary domain. The checkout also loads on the primary domain if accessed from the online store.

The store we actually use is a Next.js build, using the Shopify SDK, on store.clientdomain.com. The SDK generates checkout links, but when the checkout is accessed from the headless store it renders on myshopify.com. The myshopify.com domain is set to redirect to the primary domain, which works fine everywhere, unless the checkout is accessed from the headless store.

I'm trying to resolve with Shopify support, but their first question was 'what's a headless store' which doesn't fill me with confidence!

Many thanks

Nathan

[Stacy_Zhuk]

Hello @nathangaw,

I suppose you are using a method/function ShopifyBuyInit().
Are you passing the domain variable inside so it looks like next:

function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: "checkout.domain.com",

Best regards,
Anastasia 

[nathangaw · Accepted solution]

H - we're using the JS Buy SDK (https://shopify.github.io/js-buy-sdk/#creating-a-checkout). The client is initialised with the store's myshopify.com address, but I don't believe it'll accept a custom domain. Shopify support have confirmed that the myshopify.com URL should redirect to the primary domain, but don't know why it isn't. In the end I've had to manually rewrite the checkout URL, replacing myshopify.com with the primary domain, before the customer navigates to the checkout which is working fine. Thanks very much for your thoughts.

[dryfire]

Did you get checkout for headless Shopify to work on yourdomain.com? 

[nathangaw]

I don't believe it's possible to load the checkout on exactly the same domain as your front-end, but you can use a sub-domain - so, for example, I'm using checkout.yourdomain.com. This should be achievable by setting the Shopify primary domain to your sub-domain. In my case the redirect from myshopify.com to my sub-domain didn't kick in when the checkout was visited from the front-end, but I believe that was unusual behaviour. I got around this by rewriting the domain of the checkout URL in the front-end code.

[ulysses_ck]

Hi there Nathangaw! I have the same issue that you resolved it. How did you managed the rewrite of the URL and what was your domain configuration?

My setup is the following, an example:
example.es Main Domain

www.example.es Redirect to main domain and created cart the checkout page holds right here
Like:
www.example.es/123456789/checkout/123456789

But, when i create a checkout, the URL is:

example.myshopify.com/123456789/checkout/123456789

And when I try to rewrite it with the main domain, my app crashes because that route in Hydrogen is not configured. Thanks in advance!

[nathangaw]

Hi - so the domain configuration was that the Shopify primary domain was set as store-checkout.clientdomain.com and then we had a Next.js front-end on store.clientdomain.com. I was using Next rather than Hydrogen, but I re-wrote the URL by adding a pre-checkout route. So, when a customer clicks on 'checkout' they are sent to the pre-checkout route, the checkout URL is fetched from the Buy SDK and then I replace the clientdomain.myshopify.com section of the checkout URL with the store-checkout.clientdomain.com and push them to this new URL. Good luck.

[Sejiux]

Hello, I found the solution and wrote an article to solve it, go to my medium: Sejiux and the title of the article is How to resolve checkout redirection in shopify headless.