Shopify Development Featured

I made a Shopify Checkout Extension App

Shopify Plus opens up a world of possibilities with Checkout Extensibility. In this post, I share my experience creating custom checkout features, including a Countdown Banner and an Entries Calculator, and how they enhanced the checkout experience for a Shopify Plus store.

Michael Myers

20 Jan 2025 • 2 min read

Introduction to Extension apps

Checkout UI extensions let app developers build custom functionality that merchants can install at defined points in the checkout flow, including product information, shipping, payment, order summary, and Shop Pay.

💡

Checkout UI extensions for the information, shipping and payment step are available only to stores on a Shopify Plus plan.

What I made

Recently, I had the exciting opportunity to work with a Shopify Plus store and explore one of its standout features: Checkout Extensibility. This powerful tool opened the door for me to create something truly impactful for their business — and I couldn’t wait to make it happen!

On the left side you can see what extensions I did

I made two extensions:

Countdown banner;
It simply shows a timer. When the timer is over it shows a question "Do you need more time" and "Yes" or "No". Pretty simple, let's move on.
Entries calculator;
This one is more complex. It has logic behind it. Some products only have a 5x multiplier, some 10x. And, of course, bonus entries have some logic behind them as well.

The cool thing is how I made it. It's pretty transparent to see what multipliers users currently have in the cart.

How to start?

To start developing the Shopify checkout extension paste these commands in the terminal:

npm init @shopify/app@latest
cd your-app
npm run shopify app generate extension

Prerequisites:

Shopify Plus Plan: Custom checkout is available only on Plus stores.
Shopify Partner Account: Required to create and deploy the app.
Dev Environment: Use Shopify CLI, Node.js, and a code editor to build the app.

Official documentation

Conclusion

Shopify Checkout Extensibility makes it easy for Shopify Plus stores to create customized checkout experiences that fit their unique needs. In my recent project, I explored this exciting technology by building features like a Countdown Banner to keep users engaged and an Entries Calculator with smart logic for a smoother checkout process.

This project showed me how flexible and powerful Shopify's Checkout UI Extensions can be. It also reinforced how important it is to create features that are simple and clear for users.

Start free trial