Creating apps for custom checkout page

Creating apps for custom checkout page

CrunchyBytes
Shopify Partner
11 0 1

Hello,

 

I'm having issues with shopify checkout extensibility. I'd like to implement several component, 3 which are static, and one that needs data from the checkout API. The page I'm creating this for uses a single checkout page layout. 

 

The component that needs data is a loading bar for free shipping and my setup is with JS/React, but I'm unsure of how to style the bar with the checkout components. I did not see any properties on any of the containers to control width or background color. 

 

Aside from this I wanted to know if there is any way to place either checkout extensibility extensions outside of the targets shown in the documentation, or is there another feature offered in the cli for creating an app or extension to do this? 

Reply 1 (1)

Liam
Shopify Staff
2807 310 805

Hi CrunchyBytes,

 

You may be able to achieve the styling of your custom loading bar with the Branding API - the `customizations` object allows you to style specific parts of the UI, individual components, or groups of components. 

 

For your other question, checkout extensibility extensions can only be added to the targets listed here: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview

 

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