Creating apps for custom checkout page

Retired Boards Appdev Store Design
, ,

Topic summary

  • Goal: Build a single-page checkout with Shopify Checkout Extensibility using JS/React, with four components (three static, one dynamic). The dynamic component is a free-shipping progress/loading bar that needs Checkout API data.

  • Issues raised: How to style the loading bar (width, background color) given no visible styling props on containers; whether extensions can be placed outside documented targets, or if the CLI offers another way to do so.

  • Key guidance provided:

    • Styling: Use the Branding API. Its customizations object can style specific UI areas and individual components, which may cover the loading bar’s visual requirements.
    • Placement limits: Checkout extensibility extensions can only be added to the documented extension targets; there’s no option (including via CLI) to place them elsewhere.

  • Outcome/Status:

    • Practical next step: Apply styling via the Branding API’s customizations.
    • Constraints clarified: Extension placement is restricted to official targets.
    • Open point: Data retrieval for the loading bar isn’t addressed; discussion appears ongoing.
Summarized with AI on January 13. AI used: gpt-5.
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?

2

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!