Choose a version:

App Home target

App Home UI extensions have a single target, admin.app.home.render, that renders in the main App Home area of Shopify admin. Extensions at this target render as the full page of the app, not as an extension at a specific resource detail page or action menu.

This target renders through the same web component runtime as the other Admin UI extension targets, so you can ship your app's main landing page in the same bundle as its other extensions.

Anchor to Use casesUse cases

Primary app experience: Render the main landing page merchants see when they open your app, without hosting a separate iframe-based web app.
Navigation hub: Link merchants to the rest of your app's workflows, with deep links and contextual entry points.
Onboarding: Guide first-time merchants through setup steps for your app's extensions.

Anchor to App home render ,[object Object]App home render target

admin.app.home.render

Renders your app's home landing page as a UI extension module. Merchants reach this surface by opening your app from the Shopify admin navigation. Use this target to build the primary entry point for your app without hosting a separate iframe-based web app.

Extensions at this target can access the core capabilities of the Shopify admin through the Standard API, including authentication and GraphQL Admin API access.

Examples

jsx

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 opening your app.

</s-paragraph>

<s-button href="/settings">

Open settings

</s-button>

</s-section>

</s-page>

);

}

Examples

Description

Render a simple App Home landing page with a heading and a button that navigates to another page in the app. This example shows the minimal structure for an `admin.app.home.render` extension using Preact and Polaris web components.

jsx

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 opening your app.
        </s-paragraph>
        <s-button href="/settings">
          Open settings
        </s-button>
      </s-section>
    </s-page>
  );
}

Anchor to Best practicesBest practices

Load quickly: App Home is the first thing merchants see when they open your app. Defer non-critical data fetching until after the initial render, and show loading states for asynchronous data.
Link into your app: Use relative paths or the app: protocol on links and buttons to deep-link into other pages of your app from the landing page, so merchants can jump straight into common workflows.

Was this page helpful?