Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
We have a custom app using the Storefront API that replaces a previously existing Shopify Liquid Theme. This app is housed at the same URL that we had for the liquid theme, and it is a NodeJS app.
The problem we are encountering is that the Checkout URL generated from a cart has our custom domain URL (ourstore.com) and not the Shopify URL (ourstore.myshopify.com). Because of this, when we deploy this app live on our production URL, the checkout doesn't work.
The only info I can find on this is outlined here [Read Before Posting] Custom Storefront + Storefront API F.A.Q:
- If you are having issues with your .myshopify.com URL being surfaced at checkout, please check that you are initializing the client and API with the custom domain such ashttps://backyardbotanicgoods.com/api/2020-04/graphql vs.coolstore.myshopify.com/api/2020-04/graphql
We are initializing our client endpoint with the Shopify domain (https://store-name.myshopify.com/api/2022-04/graphql.json). The above bullet from the F.A.Q. is admittedly unclear because any change to the client endpoint URL breaks the Storefront connection. If we try to update the client endpoint to match our custom URL then we get no store data at all.
We're missing something huge here that we weren't able to discover until going live, because our development and staging sites were deployed on different URLs than our production domain. So, every time we tested, we successfully reached the checkout URL on Shopify servers.
How do we accomplish the same on our live URL with a custom app? How do we send the customer from our storefront app on ourstore.com to a Shopify checkout that is also at ourstore.com/cart/...?
Solved! Go to the solution
This is an accepted solution.
For anyone who experiences the same issue, you need to update your primary domain settings in your Shopify admin so that the primary domain is the Shopify domain. Once you do that, the Storefront API will return checkout links that contain your Shopify URL.
This is an accepted solution.
For anyone who experiences the same issue, you need to update your primary domain settings in your Shopify admin so that the primary domain is the Shopify domain. Once you do that, the Storefront API will return checkout links that contain your Shopify URL.