Using my custom domain for the checkout page when using Buy Button

[CVS1]

Hello!

I am just about to migrate out of Shopify themes, amazing as they are, and create my own website using a different service. I created a Basic Buy Button, embedded that into the website. The behavior is that the button Adds To Cart, the cart is the overlay on the right which has a Checkout button. Everything works flawlessly till here. But upon clicking Check Out, it redirects the user to a abc.myshopify.com/... checkout URL and not to my own custom domain. Since I am migrating to a new design, I am nervous as this might affect the website's credibility a little. Is there a way to mask the domain or have checkout redirected to customdomain.com/.... I am not entirely comfortable with programming but I can tinker. I'd be really grateful if anyone could help out.

Additionally, a side question if anyone knows- will the Add To Cart action of a Buy Button trigger Facebook's Pixel Event normally like it does within Shopify themes?

Thanks guys!

[Debbie_Phillips]

I am currently going through the same thing and wanting to have the checkout as my custom domain, I am assuming though that it defaults to the abc.shopify.com domain as that is where the checkout system is hosted whilst your actual website is hosted externally to shopify. I would also like to be able to add a 'continue shopping' link to the Buy Button but that doesn't seem to be something that I can do either with the Buy Button. 

Hopefully there will be a response to your question soon. 

[CVS1]

Hi Debbie,

I believe since it is a Buy Button for a specific product, the Checkout button takes you to the Checkout Link of that product which is hosted on abc.myshopify.com domain and not the actual fully fledged checkout as you would on your Shopify hosted shop. Hoping there's an update to the Buy Button soon, if there's no easy solution to this. Fingers crossed.

[Lactucaman]

Any progress on masking the checkout URL with buy buttons?

Christian

[MrGic]

Stil hoping/waiting for a solution to this.

Anyone been in direct contact with customer support about this topic? 

I know I would turn around as a customer experiencing this “weird” URL behavior.

I’m expecting abc.com but get abc.shopify.com

Dear Shopify - Please look into this and if possible provide us “custom domainers” with a fix

[jakedoering · Accepted solution]

I have some good news for you all. Like you, I wanted to be able to design my own website while using Shopify checkout and was baffled that Shopify provided no way to point a domain to buy-button checkout. I spent hours chatting with Support about this, and heard many times that it's simply "not a feature." There's actually an extremely simple solution that's either not known to support or they've chosen not to share.

If you go into your buy button's embed code, you'll find a script like the following: 

function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'insert-custom-domain.com',
storefrontAccessToken: '12345..........',
});

Yes – you can control the domain that surfaces during buy-button checkout by simply switching out the "domain" variable's value ('insert-custom-domain' here for clarity) to your custom domain. I thought this was too simple to work, but confirmed this via a comment from Shopify in a tangentially related thread and it works for me. 

FYI I'm using a subdomain that I've connected to my online-store channel in Shopify. I don't think this solution would work without that connection. 

Enjoy!

[Debbie_Phillips]

Wow @jakedoering 

thankyou so much for this. I have just looked at the Buy Buttom code now and am kicking myself that I didn't look into the code better as it makes perfect logical sense. Unfortunately, I ended up changing to shopify basic as there didn't seem to be a solution. I will keep this solution in mind for the future. Bloody awesome though, thankyou

Cheers

[CVS1]

@jakedoering this will help out a lot of folks indeed! I have rudimentary technical knowledge and while this seems good, I hope for everyone implementing it, it is a safe way to do it. I wonder why Shopify has not suggested this before! It looks simple and straightforward enough. 

I eventually just had to go with a theme and customize it quite a bit to fit it to my needs. Nowhere close to how I envisioned the website but good enough. Will keep this in mind though for implementing the button on a sister website. Thanks a ton.

[ROK3]

Life saver. thank you.

[jakedoering]

I have a basic Shopify plan (not Lite). I imagine you'd need this too,
since you point a domain to Shopify (and checkout) via the Online Store
channel. Doesn't seem like this would work with Lite.

[filzstift82]

@jakedoering Hi Jake, yes, sorry, I am on Basic too... 
so I think I have a slightly different case, I ONLY USE THE BUY BUTTON, that I embed in my third party domain / wordpress. 
If I follow your instruction and connect my domain with shopify, traffic will be forwarded to the storefront, which I dont want. 
this is my domain: https://bodyclock.health/schlaf
(and i am using a WP shopify buy button because if I use the code from shopify, i can only use it once on the page, otherwise it displays the buy button twice - another problem i haven't found an answer to here in the community): 
[wps_products_buy_button title="RNA-Haartest & Ergebnisbericht" hide_quantity="true"]
any help greatly appreciated! 
Philipp

[jakedoering]

As mentioned in my original post, I pointed a *subdomain* to Shopify that's
only used for checkout – i.e. "checkout.yourdomain.com"

[Jameslmyers]

Hi Jake

I’ve been reading a thread where you mention you have managed to use a subdomain for the buy button URL instead of [shopURL].myshopify.com. Forgive my limited knowledge - did you set up your Basic Plan shopify store under the subdomain name of your own website? If so have you effectively then removed all pages to the shopify store other than the checkout page? Apologies, I’m having a nightmare with this - I added ‘Limited’ to my store name when I entered my details into the original Shopify trial and it has gone downhill from there. Thanks for any assistance you can provide.  

[dogowner]

hi @Jameslmyers 

I'm not sure if this answers your question completely but I was able to remove my "Online Store" from the sales channels.  You might have to customize the header / footer from your templates *before* doing that to prevent weird links from showing on the checkout page.  Then my buy button on my main domain (example.com) works with the embedded js code and sends the checkouts to checkout.example.com (shopify checkout).  I think I'm using the middle plan but I'm not sure if that matters.

[jakedoering]

Hi @Jameslmyers,

I don't use Shopify to create a storefront. To reiterate, I have a custom-built website hosted elsewhere, with Shopify Buy Buttons embedded.

I then created a subdomain through my domain provider (i.e. "checkout.mycustomdomain.com") and integrated it via Shopify. 

If you were to go to checkout.mycustomdomain.com, you would then see an un-styled Shopify storefront. To prevent this, I created redirects for this URL – so if someone clicks a "back" link from checkout, they're sent to my website's real domain.

Hope that helps!

[noirDIVISION]

Hi @jakedoering

It's early 2022 and I'm a little late to the party but this thread is getting me pretty darn close to what I'm trying to accomplish. Everything you've written has been very helpful but I have one question:

How did you manage to create your redirects for your pointed subdomain in order to prevent an unstyled (or non-existent) Shopify storefront to be seen by your checkout users? These redirects would need to be created within Shopify's Storefront settings, correct? There's no way such redirects could be handled from anywhere else, like straight from within the DNS provider (e.g Cloudflare), right?

And if you did indeed set up your redirects through Shopify's native redirect settings, how did you manage to redirect your custom subdomain altogether? Doesn't Shopify force a front slash (/) at the start of whatever you enter in the URL field to be redirected?

Thanks a million for everything you've shared here so far 🙂

[awvickers]

I'm not exactly sure I'm understanding the redirect question correctly, but can state how I approached our setup.

1. I have my "store" located at domain.com. This is a WordPress hosted site with a custom theme and utilizes Shopify Buy Button JS. We are not using WooCommerce as we rely on the Shopify checkout process
2. Within Shopify under the domain admin area I have the primary domain set as domain.com but not connected.
3. I have a third-party domain set up which is checkout.domain.com and then a CNAME pointing checkout.domain.com > shops.myshopify.com
4. We dynamically generate our Buy Buttons based off of the Buy Now JS SDK but the main part of it, pertaining to URLs or "how does the redirect work" is that you need to set your domain to the thrid-party domain you created earlier when you initialize your Buy Button

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

The whole shopping experience happens on our WordPress site as the "cart" utilizes the flyout cart that is part of Shopify Buy Button JS framework. Once the user presses "checkout" this is when they jump over to checkout.domain.com and finalize their purchase.

Again, our approach was based off of needing Google Analytics to properly track the user session over the Shopify hosted checkout. Cross-domain linking within GA never appeared to work with domain.com > domain.myshopify.com as Shopify has their checkout flow somewhat locked down from a thrid-party script perspective. Since GA links sessions out of the box on the "root" domain domain.com > checkout.domain.com worked perfectly.

[filipr]

Hi!

I have a question about your second point: how did you manage to add a root domain to your primary domain area without connecting it? I'd like to set it up exactly how you did, but my root domain has already CNAME and A records that come from Webflow. Is it ok to add another A/CNAME point to Shopify in the DNS provider? 

[Judy_Schmitz]

Hi - we are having the same issue, but, even tho we replace the domain in the buy button script as above, it is specific to that session, so, if after addingn something to the cart, the customer coninues to shop, that item is not reflected in the cart shown on the website. Did you also replace the token?

[TheGoodChad]

You are a life saver. Thank you so much for suffering through that so I didn't have to. That works like a charm.

[prairie]

Hello! Happy to have found this thread. I still seem to be having issues and I know that is my fault. Having trouble with the sub domain and verifying connection between Shopify and Squarespace. Any tips? I know this is simple and I'm pulling my hair out the fact that I am missing it.

[awvickers]

I'm so happy I came across this post! I've been battling this issue for too long and just recently though to search for "custom domain for checkout." My problem is related to Google Analytics. I have the same setup in that our customer website is driven by WordPress and Buy Buttons and once the user clicks Checkout from the flyout panel the GA session is lost and a new one is created. My assumption/hope is that if I use a subdomain for checkout the session will transfer successfully because of the "root" domain remains the same. Can anyone using the setup in the Approved Answer confirm that GA sessions transfer correctly?

[DavidR2D2]

This worked for me for the buy button. The only complaint I have is the item in the shopping cart doesn't stay in the store's shopping cart if you click off to somewhere else on the site. 

[MichaelSFP]

This does not work anymore. The button does not show up if I change the domain.

[Judy_Schmitz]

Unfortuneately this only solves one part of the problem. The problem for us is not changing the domain, but having the checkout process be part of our shopify site. Shopify tells us that this was never the intention, that buy buttons are a completely separate process, and will never fully integrate with the cart or checkout process on your regular site. So, if someine buys something from a buy button on a blog or post, and then tries to add from your real site, it won't show the buy button item. Insane, but thats the way it is. It's a huge problem for us, but .... there you go. Fine if you want to ONLY sell from external or ONLY want to sell from shopify, but never the twain shall meet.