Skip to main content

App Window

The s-app-window component displays a fullscreen modal window. It allows you to open up a page in your app specified by the src property. You can use this when you have larger or complex workflows that you want to display. The app window covers the entirety of the screen. The top bar of the app window is controlled by the admin and allows the user to exit if needed.

Anchor to s-app-window elements-app-window element

The s-app-window element is available for use in your app. It configures a App Window to display in the Shopify Admin.

The content of the app window is specified by the src property and should point to a route within your app.

Anchor to src
src
string
required

The URL of the content to display within the S-App-Window. S-App-Window only supports src-based content (required).

Anchor to id
id
string

A unique identifier for the S-App-Window

Was this section helpful?

Anchor to s-app-window instances-app-window instance

The s-app-window element provides instance properties and methods to control the App Window.

Anchor to content
content
undefined
required

Always returns undefined for s-app-window (src-only)

Anchor to addEventListener
addEventListener
(type: "show" | "hide", listener: EventListenerOrEventListenerObject) => void

Add 'show' | 'hide' event listeners.

Anchor to contentWindow
contentWindow
Window | null

A getter for the Window object of the s-app-window iframe. Only accessible when the s-app-window is open.

Anchor to hide
hide
() => Promise<void>

Hides the s-app-window element

Anchor to removeEventListener
removeEventListener
(type: "show" | "hide", listener: EventListenerOrEventListenerObject) => void

Remove 'show' | 'hide' event listeners.

Anchor to show
show
() => Promise<void>

Shows the s-app-window element

Anchor to src
src
string

A getter/setter for the s-app-window src URL

Anchor to toggle
toggle
() => Promise<void>

Toggles the s-app-window element between showing and hidden states

Was this section helpful?

App Window

<s-app-window id="app-window" src="/app-window-content.html"></s-app-window>

<s-button command="show" commandFor="app-window">Open App Window</s-button>


Preview

Anchor to examplesExamples

App Window title bar options

Anchor to example-app-window-title-bar-optionsApp Window title bar options

Anchor to example-title-bar-headingTitle bar heading

App Window title

Anchor to example-title-bar-actionsTitle bar actions

App Window title bar actions

Was this section helpful?

Title bar heading

<s-app-window src="/app-window-content.html"></s-app-window>

// app-window-content.html
<s-page heading="App Window Title"></s-page>

Anchor to example-controlling-the-app-windowControlling the App Window

Anchor to example-instance-methodsInstance methods

Controlling the App Window with the show and hide methods

Anchor to example-command-attributeCommand attribute

Controlling the App Window with the command attribute

Was this section helpful?

Instance methods

<s-app-window id="app-window" src="/app-window-content.html"></s-app-window>

<s-button onclick="document.getElementById('app-window').show()">Show App Window</s-button>
<s-button onclick="document.getElementById('app-window').hide()">Hide App Window</s-button>

Anchor to relatedRelated

APIsModal
APIsModal