TL;DR: With the upcoming deprecation of checkout.liquid, it’s more important than ever for Shopify app devs to be able to quickly build and deploy checkout extensions, and Gadget is hands down the fastest way to build checkout UI extensions.

‍

Checkout UI extension development can be a time-consuming task. Building a checkout UI extension requires an embedded admin app, which involves writing code to deal with OAuth, managing session tokens, and hosting the app. With all of these tedious tasks, creating something as simple as a banner component for the checkout can take hours or even days.

Gadget: the fastest and easiest way to build Checkout extensions

Gadget is a serverless development platform that takes care of the boilerplate required to create a Shopify app, including auth, token management, and hosting. Connecting a Gadget app to Shopify takes less than two minutes and immediately provides you with a hosted React frontend embedded in the Shopify admin.

To get started with extensions, here’s how to build and deploy a Shopify app with Gadget:

1. Go to Gadget.new to sign up for a free Gadget account and create a new app

2. Set up Shopify Partners Connection in Gadget and install your app on a development store that has checkout UI extension developer preview enabled. Follow along with our tutorial to set up the connection.

3. Create a new Shopify CLI app in your terminal: <inline-code>yarn create @shopify/app<inline-code>

4. Delete the web/ folder at the root of the CLI app: <inline-code>rm -rf web<inline-code>

5. Generate a new extension in the CLI app: <inline-code>yarn generate extension<inline-code>

6. Start your CLI app: <inline-code>yarn dev<inline-code>

Note: Do not create a new Partners app! Make sure to connect this CLI app to the same app you created in step 2).

7. Click on the link to your extension in the Developer Console provided by the Shopify CLI to open up a preview tab in your browser (if the extension includes a UI)

8. Build your extension

9. Deploy your extension to the Shopify Partners app with <inline-code>yarn deploy<inline-code>

Modify your embedded app frontend as needed. This might just be a page to welcome merchants and provide some information about how your extension works, or a full-fledged admin application used to modify input values for your extension application!

After deploying your extension, you’ll need to go into the Partners dashboard to create a new version and publish your changes! To see your published extension on a development store, open the checkout customization window in a store admin by clicking Settings -> Checkout -> Customize. You should see your extension under the Add app button. Click on it to add it to the checkout and position it as desired.

If you are on Gadget's hosted frontend beta (join our developer Discord to get access), your app frontend is inside the frontend folder of your Gadget app. With Gadget's serverless Node backend and Postgres database, you can build more complex extensions that require a backend to manage custom data and metafields.

‍

‍

Why build an embedded app?

Building an entire app just to push a simple extension might seem crazy. But that’s the biggest change with the new checkout UI extensions: creating an app is now a requirement. And ultimately, there are some major advantages to building out an app around a checkout UI extension.

Added flexibility

Your checkout UI extension might start as a simple static banner. But merchants using it might request additional features like configuring the banner message. Building an embedded app alongside your extension means that you can provide merchants with a UI where they can configure the message themselves. Additional merchant-facing features and configurations can easily be added to your app.

Required for app store listing

Shopify requires all apps listed on the app store to have an embedded app. If you want to build a public app that makes use of extensions then you absolutely need to build an embedded app and handle all the boilerplate tasks that accompany it.

Gadget takes care of all the boilerplate for you, so you can quickly build simple or complex embedded apps that power your checkout UI extensions.

No extra effort

Because Gadget handles all the boilerplate for you, you get an embedded app that works with Shopify out of the box when you build checkout UI extensions. 

Every new Gadget app comes with App Bridge tooling and Shopify Polaris pre-installed, so building embedded apps is a familiar experience whether or not you are familiar with the Shopify CLI, NextJS, or other React-based frontend frameworks.

What about other Shopify extensions?

In addition to checkout UI extensions, you can also follow the exact same steps to build other customizations, for example, Shopify Function extensions. Check out our technical guide to learn what you can build with Functions, and how to get started. 

Have questions about Gadget, extension development, or anything else Shopify-related? Join our developer Discord to chat with Gadget employees and the community!