Build Your Shopify App with No Hosting Required: App Home UI Extensions

Shopify's 2026-07 API release ships a fully-fledged App Home UI Extension — a new way to render your app's main landing page as a Preact-based extension module, hosted entirely by Shopify, bundled alongside your other admin UI extensions. No web server. No separate deploy pipeline. One command.

🔄 The Architecture Shift: What Changed?

Historically, building an app's home surface in Shopify admin meant running your own web server, managing deployments, and wiring up an iframe-hosted frontend. That model still exists — but with admin.app.home.render, custom-distribution apps can now skip all of it.

Key shift: Shopify now hosts your entire App Home surface — JavaScript bundle, static assets, and all — deployed with a single shopify app deploy command. No web server to provision, no infrastructure to maintain.

The extension renders inside the same Remote DOM runtime that powers all other admin UI extensions, which means you ship one unified bundle for your whole app — App Home included.

🎯 The Single Target: `admin.app.home.render`

App Home UI extensions expose exactly one extension target. It renders as the full-page app surface merchants see when they open your app from the Shopify admin nav — not a panel or sidebar, but the entire App Home view.

# shopify.extension.toml api_version = "2026-07"  [[extensions]] type    = "ui_extension" name    = "App Home" handle  = "app-home" uid     = "f62f100d-15e6-9866-eda9-23f99de4b5d2"    [[extensions.targeting]]   target  = "admin.app.home.render"   module  = "./src/Home.tsx"   assets  = "./assets"

🏗️ What You Can Build

The App Home surface is flexible enough to serve as several different interaction patterns:

Primary landing page — Replace your iframe-hosted home with a native Polaris extension that loads faster and ships in your bundle.
Navigation hub — Deep-link merchants into workflows, modals, and other extensions using the app: protocol.
Onboarding flow — Walk first-time merchants through setup steps without maintaining a separate onboarding web app.

💻 A Minimal Example

The extension entry point is a standard Preact module. Export a default function, render to document.body, and use Shopify's Polaris web components as JSX elements:

import '@shopify/ui-extensions/preact'; import { render } from 'preact';  export default function extension() {   render(<Extension />, document.body); }  function Extension() {   return (     <s-page heading="Welcome to My App">       <s-section heading="Getting started">         <s-paragraph>           Use this page as the landing experience for merchants.         </s-paragraph>         <s-button href="/settings">Open settings</s-button>       </s-section>     </s-page>   ); }

📡 Direct API Access (Zero Proxies)

Your extension can query the GraphQL Admin API directly — no proxy server needed. Calls to shopify:admin/api/graphql.json are automatically authenticated by the runtime. You can use the native fetch() API or the shopify.query() shorthand:

// Option A — fetch() const res = await fetch('shopify:admin/api/graphql.json', {   method: 'POST',   body: JSON.stringify({     query: `query GetProducts {       products(first: 5) {         nodes { id title }       }     }`   }) }); const { data } = await res.json();  // Option B — shopify.query() global const { data: { products } } = await shopify.query(`   query GetProducts {     products(first: 5) {       nodes { id title }     }   } `);

Both approaches return the same data. shopify.query() is slightly less boilerplate; fetch() gives you more control over headers and error handling.

🗺️ Custom Navigation Protocols

Three URL patterns cover every navigation need inside your extension framework:

shopify:admin/products/1234 — Constructs admin-absolute URLs.
app:settings/advanced — Builds app-relative links without needing to know your base URL at build time.
/reviews/{product.id} — Plain relative paths for route-to-route navigation within your app package.

⚡ Bundle Limits at a Glance

Constraint Criteria	Operational Boundary / Limit
Compiled bundle	64 KB compressed — strictly enforced at deploy time
Per-asset file	1 MB maximum per static asset file
Total static assets	500 files / 50 MB combined framework size
Allowed asset types	.png .jpg .jpeg .gif .webp .avif .ico .txt .md .json — SVG is not supported
Targets per app	Exactly one `admin.app.home.render` allocation target

🚀 Performance Best Practices

Defer non-critical fetches. Merchants land on App Home the moment they open your app. Show a skeleton UI state immediately, then fetch supporting data asynchronously so the core page shell renders instantly.

Use deep links generously. Relative paths and the app: protocol let your landing page double as a fast navigation hub — common workflows are just one tap away.

Stay under 64 KB. Run shopify app build --analyze to inspect your bundle sizes. Lazy-import heavy code layers and avoid bundling third-party components that duplicate primitive web components already natively active.

🛠️ Testing and Deployment Workflows

Spin up an active live preview tunnel against your dev store with one command. The CLI hot-reloads your extension architecture on every local file save:

# Start local dev server environment with hot-reload shopify app dev  # Deploy code assets to production shopify app deploy

As of API version 2026-04, you can write proper unit tests for admin UI extensions using @shopify/ui-extensions-tester — the first time admin UI extensions have had first-class native test tooling modules.

⚠️ Custom distribution apps only. App Home UI extensions are exclusively available for custom-distribution architectures. If you're building a public app destined for the commercial Shopify App Store, continue using the standard iframe-based App Home model instead.

📋 The Verdict: Should You Migrate?

If your app has a simple frontend layout — no server-side rendering, no webhooks inside the view, no browser APIs outside the Remote DOM runtime environment — migrating to App Home UI extensions drops your operational footprint and cloud hosting costs to zero. One deploy, one bundle, zero infrastructure to maintain.

If your app relies heavily on a backend engine for listening to webhooks or processing cron worker scripts, you still need to host that core infrastructure. However, you can replace the iframe frontend layer completely with this UI extension framework to achieve native interface rendering speeds.

Full reference guide: shopify.dev/docs/api/app-home-ui-extension/latest