Re: Headless store - checkout on primary domain

Solved

Headless store - checkout on primary domain

nathangaw
Shopify Partner
6 1 3

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?

Accepted Solution (1)
nathangaw
Shopify Partner
6 1 3

This is an 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.

View solution in original post

Replies 10 (10)

Dan-From-Ryviu
Shopify Partner
8525 1679 1689

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?

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

nathangaw
Shopify Partner
6 1 3

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
Shopify Partner
465 21 65

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  

Co-founder at Whidegroup, e-commerce development company from Ukraine
- 10+ years of experience with SMBs
- Deep expertise in custom development & optimization
E-mail: anastasia@whidegroup.com
nathangaw
Shopify Partner
6 1 3

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
Shopify Partner
465 21 65

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 

Co-founder at Whidegroup, e-commerce development company from Ukraine
- 10+ years of experience with SMBs
- Deep expertise in custom development & optimization
E-mail: anastasia@whidegroup.com
nathangaw
Shopify Partner
6 1 3

This is an 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
Tourist
6 0 5

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

nathangaw
Shopify Partner
6 1 3

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
Shopify Partner
4 0 4

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
Shopify Partner
6 1 3

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.