Updates from Shopify Editions Summer 2023
marcOverview
My past few blog posts have revolved around replacing the logic in the checkout.liquid file using Shopify Functions or Shopify Extensions.
To continue with this theme, in this blog post I will be covering the some of the updates that were recently announced at the Shopify Editions Summer 2023 event.
Extension-only apps
Perhaps the biggest announcement was the introduction of extension-only apps.
Extension-only apps are custom apps that don't have embedded app pages. Because they're made up entirely of extensions, extension-only apps can be hosted on Shopify.
This is great! Previously, if you wanted to customize your Shopify Checkout using Checkout UI Extensions or Shopify Functions, you would need to create and host your own Shopify app.
With the new extension-only apps, you can now host your app on Shopify for free!
The steps to create an extension-only app are still the same as before, so you can still follow the steps the I outlined in my last post on creating Shopify Checkout UI extensions. Be sure to checkout the updates to the shopify.extension.toml file below.
In short, once you have your app and extension setup you can simply run npm run dev to preview the extension locally and then npm run deploy to deploy the extension to your Shopify store.
It can't get much easier than that!
Simplified Deployment
Another helpful update is the simpliflication of the extension deployment process. Previously, you would need to deploy each extension independently.
Now with the new update, all of your app's extensions are versioned together. This means that each app version is also a snapshot of all of the extensions that are included in that version.
Changes to Checkout UI Extensions
A few changes were announced for Checkout UI Extensions.
If you followed my previous blog post on creating Shopify Checkout UI extensions, you will need to make a few changes to your extension to get it working again.
The main changes that need to be made concern the toml configuration file. First, it was renamed from shopify.ui.extension.toml to shopify.extension.toml.
Next, you will need to update the shopify.extension.toml file to match the new format.
Also, the extension_points field was renamed to targeting and the formatting of the extension points was also changes (e.g. Checkout::Dynamic::Render is now purchase.checkout.block.render).
Here are the two formats side-by-side for comparison:
Previous shopify.ui.extension.toml
type = "checkout_ui_extension"
name = "My Extension"
extension_points = ['Checkout::Dynamic::Render']
[[metafields]]
namespace = "my_namespace"
key = "my_key"
[settings]
[[settings.fields]]
key = "banner_title"
type = "single_line_text_field"
name = "Banner title"
description = "Enter a title for the banner"
Current shopify.extension.toml
api_version = "2023-07"
[[extensions]]
type = "ui_extension"
name = "My Extension"
handle = "my-extension"
[[extensions.targeting]]
module = "./src/index.ts"
target = "purchase.checkout.block.render"
[[extensions.metafields]]
namespace = "my_namespace"
key = "my_key"
[extensions.settings]
[[extensions.settings.fields]]
key = "banner_title"
type = "single_line_text_field"
name = "Banner title"
description = "Enter a title for the banner"
You can read the full details on the changes to the toml file on the Shopify developer docs and also on Github.
Conclusion
The new updates to Shopify Checkout UI Extensions and the introduction of extension-only apps are great news for developers.
The new simplified deployment model will save developers a lot of time and headaches that were previously spent on managing deployments.
The ability to create extension-only apps will also allow developers to create and host their own Shopify apps without any additional cost or hassle.
I'm excited to see what developers will create using these new features.
Thanks for reading!