Integrating regular Shopify store with a custom Storefront

[risman]

Hi, I would like to ask if it's possible to:

1. create a custom Checkout page from scratch using Storefront API
2. Make it so that the custom storefront only consists of the said Checkout page. So the customers browse, and add products to cart through an existing regular Dawn Shopify store, but the checkout button is modified to send the customers to the custom checkout Storefront app.

For context, our store is on Shopify Plus subscription and I'm a web developer trying to add a few custom fields to the shipping address form on the checkout page.

Thanks in advance.

Regards,
Risman

[Liam · Accepted solution]

Hi Risman, 

The Storefront API is typically not used for anything related to checkout. If you're looking to add custom fields to the shipping address form on the checkout page, I would recommend looking into either Checkout UI extensions which allow you to add custom UI or content to the checkout process and order status page. Another option might be to see if you can achieve your use case with Shopify Functions as these allow you to extend or replace key parts of Shopify’s backend with custom logic.

Hope this helps!
 

[risman]

Hi Liam, thank you for the quick reply. Upon looking into Checkout UI Extension, I found out from the version dropdown on the documentation page, it shows that it's currently "unstable"? So would you recommend this for production use?

[Liam]

Hi Risman,

We do recommend that unstable versions should be used only for testing as features and changes that are part of these versions are still in progress. That being said, I believe these extensions and endpoints should be available in the next stable API release, 2023-10 available on October 1, 2023, so it could be worth testing out the Checkout Extensibility developer preview to see if it will achieve what you're looking for.  

Hope this helps!

[risman]

I see. So I have to wait until that stable API release on October before I can deploy the checkout UI extension.

Thank you for your answers, Liam, it's been very helpful to us. I have marked your first answer as the Solution in this thread, but do you mind if I ask more about Checkout UI Extensions here?

[Liam]

Sure - you can ask more questions here. Also, I've digged into this a bit more and this tutorial that uses checkout UI extensions looks close to what you're trying to achieve. You could try this out and augment it for your own purposes. 

[risman]

Thank you, I appreciate it.

So my follow up question would be as follows.
In my understanding, a checkout UI extension is also a Custom App [1], and a Custom App is a server side app that we should host externally. Is that correct?

But I have not found any examples of where should I put the react component from the examples. Is it to be rendered on an HTML that should be returned by the app's install URL? Or do I understand it incorrectly?
I'm trying to understand how it works a little bit more deeply because we don't usually use node.js or react in our company. We're encouraged to use Java backend and Vue.js everywhere if possible 🙂

[1] https://help.shopify.com/en/manual/apps/app-types/custom-apps