Shopify admin UI extensions: putting your app where the work happens

An app that lives only on its own page in the Shopify admin is an app merchants forget about. Admin UI extensions solve that by letting your app render directly on the pages where work already happens — the order page, the product page, the customer page.

The two kinds

Admin blocks are panels that render inline on a resource page. A block on the order page showing that order's status in your ERP. A block on the product page showing supplier data. They're always visible once the merchant adds them, which makes them right for information they want at a glance.

Admin actions are modal interactions launched from a menu on the resource page. "Push this order to the warehouse." "Regenerate this product's specification sheet." Right for something the merchant does occasionally rather than reads constantly.

Rule of thumb: if they need to see it, build a block. If they need to do it, build an action.

What they look like

Extensions are written in React against Shopify's own component set, so they inherit the admin's styling, spacing and accessibility rather than looking like an iframe someone bolted on.

``bash npm run shopify app generate extension # choose "Admin action" or "Admin block" ``

The extension receives the current resource — the order, the product, whatever page it's on — and can query your own backend and Shopify's Admin API from there.

The constraints

• Shopify's components only. You can't ship arbitrary HTML and CSS. That's a real limitation and mostly a good one: it stops every app from inventing its own visual language inside the admin.
• They run sandboxed, so they can't interfere with the admin itself.
• Keep them fast. An extension that takes three seconds to load makes the whole page feel broken, and merchants blame Shopify before they blame you.
• Placement is defined, not arbitrary. You render where Shopify allows, not wherever you like.

When an extension beats an app page

Use an extension when the task is about one specific record. Order 1042's fulfilment status. This product's supplier stock. This customer's account terms in your system. The merchant is already on that page; making them navigate away, find the record again in your app, and navigate back is the friction that gets apps uninstalled.

Use a full app page when the task is about many records or about configuration — a dashboard, a bulk operation, settings, reporting.

Most useful apps have both: a settings page, plus extensions that surface the app's value where the merchant already is.

The pattern that works

For a typical integration app:

1. An admin block on the order page showing whether the order reached the external system, when, and with what result.
2. An admin action to retry a failed push, so support staff can fix a problem without emailing you.
3. An app page for configuration and a log of recent failures.

That third item plus the retry action is the difference between an integration the client can run and one where every hiccup becomes a support ticket. It's cheap to build and it's routinely left out.

Where extensions fit with everything else

Shopify's extension surfaces divide up cleanly:

An app can ship several. Each is its own build and its own testing, which is why app cost scales with how many surfaces you need rather than with features.

Testing

Run the extension against a development store with realistic data, and specifically test the states that aren't the happy path: the record your extension knows nothing about, your backend being down, a slow response. An extension that renders an infinite spinner when your API is unavailable is worse than one that says "couldn't load — retry".

The best admin extension is one the merchant stops noticing, because the information they needed is simply there on the page they were already looking at.