Solved

Integrating regular Shopify store with a custom Storefront

risman
Shopify Partner
4 0 0

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

Accepted Solution (1)

Liam
Shopify Staff
2731 301 780

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 6 (6)

Liam
Shopify Staff
2731 301 780

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

risman
Shopify Partner
4 0 0

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
Shopify Staff
2731 301 780

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!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

risman
Shopify Partner
4 0 0

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
Shopify Staff
2731 301 780

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. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

risman
Shopify Partner
4 0 0

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