Lessons learned with Checkout UI extensions
[Updated article 2024–01–09]
Checkout UI extensions are fairly new and although there are pretty good tutorials, the deploy section is a bit confusing. This article will probably evolve while I learn and work, but in the meantime let me share my learnings so far.
Lesson 1: Everything starts with a Shopify App
This took me a bit to understand, given that I hadn’t created any Shopify apps before.
A Shopify App can host up to five UI checkout extensions (probably extended by summer 2023). Meaning that when you install your app in a store, it will show in your apps list, but the extensions will show separately in the Checkout customizer.
Also remember, even though you set a fixed placement for your extensions, they won’t show in the checkout unless the merchant specifically adds it in Customizer.
Lesson 2: The store must have the new Checkout Extensions enabled
Before you can add anything, the store must have migrated the old checkout.liquid to the new Checkout Extensibility
When you migrate, all your customizations inside the checkout.liquid will be useless. If you have just created a store, you will probably already have the new checkout enabled directly.
BTW, by the time of writing this article, these customizations at checkout are only available for Shopify Plus Merchants.
Lesson 3: Prepare your development environment
Even though you are working for a single merchant like we are (us, Umamicart), you will definitely have to:
- Create a Shopify Partner account.
- Create a Development Store with the Checkout Extensibility preview enabled. This is key, otherwise, you won’t be able to develop extensions.
- Install Shopify CLI 3, you’ll need it to create your app properly
Lesson 4: Enable your extensions for preview
So you wrote your extension code, and you are ready to try it locally. You run yarn dev (or npm…) and you get your preview URLs from the CLI and it works!
Let’s try to install them in our development store … You go to your Partner Admin, click on Apps, select your App, and then “Test your App”.
You are asked for permission to install, you do it. Then you visit your store’s Checkout customizer, and click on “+ Add App”. And none of your extensions are there.
If your app has definitely been installed, check that you enabled your extensions for preview in your Shopify Partner site. Go to Apps > Your App> Extensions
Lesson 5: Don’t forget to publish your extensions
If you do all the deployment process, the app has been installed in your live store (not development) and the extensions are not showing at Checkout, chances are that you forgot to publish your extensions.
[Nadine from 2024] Now the command deploy creates a new a version and asks if you want to activate it from the CLI.
Lesson 6: You don’t need to deploy your app to use your extensions
Yes, I know it’s super confusing. So you actually need to create an app in your Partner’s Dashboard and host all your Checkout UI extensions inside it.
However, running the command deploy will deploy all your extensions to Shopify. You can use one of the preview URLs that Shopify assigns to your project when running yarn dev for preview as the app’s URL.
You can still create versions for your extensions and publish them or not.
Remember that I am talking about a single merchant app, these may be different if you are dealing with a public app.
However, if your extensions have a app pages within the admin (a frontend), you will definitely need to host these. In my particular case, I started deploying the app as I mentioned before having that app’s page. But I ended up understanding that I really didn’t need this step. So finally went for a deployment without hosting the app.
Final: some helpful articles for building apps
Hopefully, this will save you some time as well. There are probably lots of things I am still learning and maybe doing wrong so, If you have any feedback please feel free to share in the comments or contact me 😄
Peace & Code ✌️
Nadine
