Creating apps for custom checkout page

[CrunchyBytes]

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? 

[Liam]

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!