Shopify admin UI extensions are an easy way to customize how merchants can interact with the Orders, Products, and Customers pages.
By now, you’ve probably heard about Shopify’s decision to move away from Scripts and Liquid customizations, and towards Shopify Functions and extensions. A few extension types have been released in the past year, with checkout UI extensions being the most notable, as Shopify announced that they would replace checkout.liquid when it’s deprecated. Because extensions make it easy to read and request data stored in Shopify and surface it to merchants, they’ve been extended to other areas of Shopify as well – including the admin.
The Shopify admin is where merchants spend most of their time, so it only makes sense that this would be a place that needs an extra layer of customization. With admin UI extensions, merchants can tailor their Shopify admin to work for their specific store needs. For developers and agencies building custom apps, this is a big deal, so let’s talk about what admin UI extensions are and how to use them.
What are admin UI extensions?
Shopify admin UI extensions were first announced during Summer Editions 2023, in an effort to standardize how developers and agencies customize the Shopify admin UI, and create the best possible experiences for merchants. Admin extensions give developers the option to add custom blocks and actions to the existing Orders, Products, and Customers pages. This means that app developers can add custom UIs and actions to the existing Shopify admin portal instead of designing and building out additional workflows and pages in a custom-embedded app.
Currently, there are two types of admin UI extensions you can build with: action extensions and block extensions, which can be created using the Shopify CLI 3.48 or later.
An example of how a merchant would navigate to an admin extension in Shopify
Admin action extensions
If you’re looking to add new ways to let merchants quickly customize orders, products, or customers, admin action extensions are a great place to start — and the good news is that these are generally available, which means you can start using them in your public and custom apps right away.
Shopify has released a suite of action-based components developers can embed in the Shopify admin, including buttons, forms, date pickers, and a variety of other field types. These are all used to make changes to an individual resource, for example logging complaints that have come in for certain products. Action extensions will appear in the More Actions section in the top right of a resource details page, for example, a specific order or product. They can also appear on the overview pages for products or orders for bulk selection actions. From there, merchants can make changes which will instantly be reflected on the order, product, or customer resource.
Tip: We recommend communicating where merchants can access admin extensions in some of your app onboarding materials!
Admin block extensions
Block extensions, on the other hand, are used to add additional context and information to the admin, making your apps more integrated with Shopify. Rather than having to navigate to your app interface, merchants will be able to see and interact with the information from your app directly in the admin. Block extensions give merchants an inline card on the product/order/customer page that can be used to display or change custom data unique to your app. Instead of navigating a separate embedded admin app, all relevant data can be viewed by merchants on a single page.
Bonus: You can call your action extensions from within block extensions!
Extending custom apps with admin UI extensions
If you’re working with merchants on custom apps and internal tools, admin UI extensions are an easy way to integrate the added functionality they’re looking for into an interface they’re already familiar with. Although block extensions are still in developer preview, you can start building with them so that once they become generally available, you’re able to quickly deploy them to any merchant clients. In the meantime, admin action extensions are available and ready to be added to your apps to extend the order, product, or customer resources directly in the admin portal.
Many of your existing custom apps may benefit from being connected more directly into the Shopify admin. If the tools you’ve built for your clients regularly require modifying things like products or orders, check to see if any of the new components could help streamline those workflows. Your merchant clients will thank you for saving them from the tedious task of flipping between your app interface and the admin portal.
If you’re looking for a place to get started with Shopify admin UI extensions, you can follow along with our build of a VIP customer tagger. We use the Shopify CLI and Gadget to combine customer segment template extensions with admin UI extensions in just 10 minutes.
If you have any questions, feedback, or just want to connect with a community of other Shopify developers, stop by our Discord and say hi.