How to Display a Progress Bar in Cart Page and Cart Drawer via Shopify App?

Extensions
1

I’m working on developing a Shopify app that displays a progress bar in the cart page and cart drawer.

The goal of the progress bar is to show customers how close they are to reaching a free shipping threshold (for example, ₹2000), helping to encourage higher order values.

I would like to know the recommended approach to implement this feature as part of a Shopify app, without modifying the store’s theme directly.

My main questions are:

  1. What is the best way to inject custom UI (like a progress bar) into the cart page and cart drawer via a Shopify app?

  2. Are there any simple examples or official guidance available that I could follow?

  3. How should I approach dynamically tracking the cart total and updating the progress bar?

Any help, insights, or pointers to useful resources would be very appreciated.

2

Hey @SUDHAGAR_G

Theme app extensions are the recommended approach for injecting custom UI elements into cart pages and cart drawers via Shopify apps. You have two main options: app blocks for inline content that merchants can position within their cart layout, or app embed blocks for floating or overlaid elements. Both integrate cleanly with Online Store 2.0 themes without requiring direct theme code modifications, which provides a much better merchant experience.

The theme app extensions documentation provides comprehensive guidance on building these integrations, including configuration examples and best practices for accessing cart data dynamically.

You’ll also find helpful examples in the broader apps in the online store guide that covers different integration methods and when to use each approach.