Shopify Domain Settings for Proper Checkout Web URL Field on a Custom Storefront

1b4PI
Shopify Partner
5 1 2

This is a question regarding this bullet point from [Read Before Posting] Custom Storefront + Storefront API F.A.Q]:

 

Checkout + Performance:

  • The Storefront API returns a Web URL field that your customer will complete the checkout process on.

 

We've made a custom storefront using the Storefront API. This storefront app does the same thing common Liquid themes do: It has a cart manager that contains a checkout link to complete the payment. We use the Cart object to achieve this: (https://shopify.dev/api/storefront/2022-04/objects/Cart#fields)

 

During development and stage testing on a temporary URL, our cart-to-checkout process worked as expected.

 

However, once we pointed our public-facing domain to the address of our deployed app, we get a 404 error when trying to click the checkout button in the cart manager of our web app. This is because the link that is being served from the Storefront API has our public-facing domain in the Web URL (ex: our-public-url.com/20413427/checkouts/xxxx....).

 

Because we now have a custom storefront app, pointing to our public-facing URL, that Web URL doesn't work. The only way we've managed to get the link to work is to go into the domain settings of our Shopify account and select our my-shopify-url.com as the Primary Domain and turn off forwarding. Once we do that, the API provides us with a checkout URL that doesn't contain the public URL. Instead, the API now gives us links to the Shopify URL: (ex: my-shopify-url.com/20413427/checkouts/xxxx....)

 

That update fixes the broken link from our custom storefront app to the Shopify checkout.

However, now our public-facing domain is not connected to Shopify and is not being forwarded to incoming traffic from search engines. Instead of visiting our custom storefront app at our public-facing URL, traffic is going to our old liquid theme on our my-shopify-url.com.

 

For those of us that are existing Shopify customers, who are upgrading our website from a Liquid theme to a custom storefront, how do we have traffic forwarded to our public-facing URL, and also complete the checkout process on the Shopify end with a correct link that doesn't return 404?

 

FYI, this is a follow-up post to: https://community.shopify.com/c/storefront-api-and-sdks/storefront-api-app-with-custom-domain-has-40.... I had thought I self-corrected this issue, but did not realize that traffic is no longer being forwarded to our public URL.

 

Many thanks for the time and help. It's very much appreciated.

 

Reply 1 (1)

pnodet
Shopify Partner
1 0 0

Hey @1b4PI !
Curious to know how you managed this?