Checkout Progress Form Breadcrumbs

Checkout Progress Form Breadcrumbs

Jun_Kuan
Shopify Partner
44 0 5

I'm trying to customize the checkout progress steps breadcrumbs on my test store's checkout page, I was thinking if there's an API endpoint that will be able to get which step of the checkout process a customer is in.

 

My thought process is to hide the default checkout progress step breadcrumbs and put a customized and styled checkout progress step breadcrumbs using react. Can anyone point me to the right direction on how do you think would be the best step to achieve this?

 

image.png

 

I'm thinking either hide this, then display a customized one using checkout UI extensions using react, or just s

Replies 2 (2)

Liam
Shopify Staff
2873 312 821

Hi Jun,

 

There's no specific endpoint that will return what step of the checkout a customer is in, but it could be possible to to use JavaScript to monitor the changes in the URL or the DOM elements on the checkout page to infer the current step. Using checkout extensions to add a custom navigation bar could be a good solution too. It's also worth keeping in mind too that there's a one page checkout coming soon which might affect the functionality of this app. 

 

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

Jun_Kuan
Shopify Partner
44 0 5

Thank you for the response! Is it possible to include a CSS on the extension UI that can customize the native elements of the checkout page?