> Deprecated:
> The [Embedded App SDK (EASDK)](/docs/api/embedded-app-sdk) and the [POS App SDK](/docs/api/pos-app-sdk) are deprecated. After March 1st, 2022, apps that are using either of these SDKs won't be listed on the Shopify App Store. Use [Shopify App Bridge](/docs/api/app-bridge) instead.


## ShopifyApp.init(config)

> Note:
> The equivalent method in Shopify App Bridge is [`createApp`](/docs/api/app-bridge/previous-versions/methods#createapp-config).

Should be called immediately after the script file has loaded, as early as possible on the page (not in a `jQuery.ready()` or something). It will initialize data values, add `postMessage` listeners, check that the app is embedded in an iframe, and setup our initializers.

The config hash can contain the following keys:

<table>
<thead>
<tr>
<th> Key </th>
<th> Type </th>
<th> Description </th>
</tr>
</thead>
<tbody>
<tr>
<td> <code>apiKey</code> </td>
<td> String </td>
<td> <code>ff9b1d04414785029e066f8fd0465d00</code> or similar. The client credentials provided to you for your application in the Partner Dashboard. </td>
</tr>
<tr>
<td> <code>shopOrigin</code> </td>
<td> String </td>
<td> The origin of the Shopify shop. This will come out of the session values returned from the Shopify API and should be set dynamically for each different store. It'll be something like "https://example.myshopify.com" and should always include the protocol.</td>
</tr>
<tr>
<td> <code>forceRedirect</code> </td>
<td> Boolean </td>
<td> Defaults to <code>true</code>. Can be used to disable redirection into the admin for debugging or testing purposes. </td>
</tr>
<tr>
<td> <code>debug</code> </td>
<td> boolean </td>
<td> Defaults to <code>false</code>. Will activate some <code>console.log</code> logging output. </td>
</tr>
</tbody>
</table>

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.init({
apiKey: "ff9b1d04414785029e066f8fd0465d00",
shopOrigin: "https://example.myshopify.com",
debug: false,
forceRedirect: true
});
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.ready(fn)

> Note:
> There is no equivalent method in Shopify App Bridge, as this functionality is no longer necessary.

Works similarly to jQuery's `ready()` function. It can be called many times on a page, it accepts functions, and when the Admin and the app are loaded it will call the functions in order.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.ready(function(){
alert("Ready");
});
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.pushState(path)

> Note:
> The equivalent action in Shopify App Bridge is [`History`](/docs/api/app-bridge/previous-versions/actions/navigation/history/).

Used to rewrite the current URL. This is called automatically and probably doesn't need to be explicitly called at all.

## ShopifyApp.flashNotice(message)

> Note:
> The equivalent action in Shopify App Bridge is [`Toast`](/docs/api/app-bridge/previous-versions/actions/toast).

Displays a message in the Shopify admin chrome styled as a notice. Use only for successful or neutral messages.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.flashNotice("Unicorn was created successfully.");
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.flashError(message)

> Note:
> The equivalent action in Shopify App Bridge is [`Toast`](/docs/api/app-bridge/previous-versions/actions/toast).

Displays a message in the Shopify admin chrome styled as an error. Use only for errors or failures.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.flashError("Unicorn could not be created.");
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.remoteRedirect(path)

> Note:
> The equivalent action in Shopify App Bridge is [`Redirect`](/docs/api/app-bridge/previous-versions/actions/navigation/redirect-navigate).

Dispatches away from the app to a remote URL. The path must be an absolute URL prefixed with `http` or `https`.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.remoteRedirect("https://my-app.example.com/auth/shopify?shop=my-shop-name")
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.redirect(path)

> Note:
> The equivalent action in Shopify App Bridge is [`Redirect`](/docs/api/app-bridge/previous-versions/actions/navigation/redirect-navigate).

Dispatches away from the app and into another section in the Shopify admin. The path should be prefixed with a slash, but should not include the `/admin` part. Example: `/customers/120999015` or `/settings/domains`.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.redirect("/orders");
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.Bar.initialize(config)

> Note:
> The equivalent action in Shopify App Bridge is [`TitleBar`](/docs/api/app-bridge/previous-versions/actions/titlebar).

Accepts an object that defines how the top bar and buttons will look and behave. This should almost always be called in the `ready()` method. Default behavior if `initialize` is never called will result in some pretty safe defaults, except that the loading bar will never disappear.

The config object has a number of keys, all optional.

<table>
<thead>

<tr>
<th> Key </th>
<th> Type </th>
<th> Description </th>
</tr>

</thead>
<tbody>

<tr>
<td> <code>buttons</code> </td>
<td> Object </td>
<td> An object describing the buttons displayed in the top bar. The object contains two keys, <code>primary</code> and <code>secondary</code>, and each of those keys contain an array of <a href="#button-objects">button objects</a>. Primary buttons default to blue, and have a maximum of one button. Secondary buttons have a maximum of four buttons. </td>
</tr>

<tr>
<td> <code>title</code> </td>
<td> String </td>
<td> The title string displayed in the header behind the application's name. </td>
</tr>

<tr>
<td> <code>pagination</code> </td>
<td> Object </td>
<td> An object configuring and toggling the pagination arrow button group. </td>
</tr>

<tr>
<td> <code>breadcrumb</code> </td>
<td> Object </td>
<td> A button object configuring and toggling the breadcrumb in the top bar. Can be applied only if a title has been set.</td>
</tr>

</tbody>
</table>

The configuration for pagination is a simplified version of <a href="#button-objects">button objects</a>. When the `pagination:` key contains anything that is not falsy, the buttons will appear but will be inactive. The `pagination:` key expects an object containing two objects as `previous:` and `next:`, each describing a button. The button definition objects look like this:

<table>
<thead>

<tr>
<th> Key </th>
<th> Type </th>
<th> Description </th>
</tr>

</thead>
<tbody>

<tr>
<td> <code> callback </code> </td>
<td> Function </td>
<td> When the button is clicked, this function will be executed in the app. </td>
</tr>

<tr>
<td> <code> href </code> </td>
<td> String </td>
<td> The URL to be opened in the app. </td>
</tr>

<tr>
<td> <code> loading </code> </td>
<td> Boolean </td>
<td> A boolean value stating if the loading bar should activate when this button is pressed. This defaults to `true`. </td>
</tr>

</tbody>
</table>

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.Bar.initialize({
buttons: {
primary: {
label: "Save",
message: 'bar_save'
},
secondary: [
{ label: "Help", callback: function(){ alert('help'); } },
{ label: "More",
type: "dropdown",
links: [
{ label: "Update", href: "/update", target: "app" },
{ label: "Delete", callback: function(){ alert("destroy") } }
]
},
{ label: "Preview", href: "http://my-app.com/preview_url", target: "new" }
],
},
title: 'Page Title',
pagination: {
next: {
href: "/posts?page=2"
},
previous: {
callback: function(){ alert('no previous pages') },
loading: false
}
},
breadcrumb: {
label: "Subsection",
href: "/subsection",
target: 'app',
loading: false
}
});
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.Bar.loadingOff()

> Note:
> The equivalent action in Shopify App Bridge is [`Loading`](/docs/api/app-bridge/previous-versions/actions/loading).

Stops the loading bar. Should probably be called on every page in `ShopifyApp.ready()`.

## ShopifyApp.Bar.loadingOn()

> Note:
> The equivalent action in Shopify App Bridge is [`Loading`](/docs/api/app-bridge/previous-versions/actions/loading).

Restarts the loading bar. It is a best practice to call it when moving between pages or firing off AJAX requests.

## ShopifyApp.Bar.setTitle(title)

> Note:
> The equivalent action in Shopify App Bridge is [`TitleBar`](/docs/api/app-bridge/previous-versions/actions/titlebar).

Manually set the title string in the top bar. See `ShopifyApp.Bar.initialize()`.

## ShopifyApp.Bar.setPagination(config)

> Note:
> The equivalent action in Shopify App Bridge is [`TitleBar`](/docs/api/app-bridge/previous-versions/actions/titlebar).

Manually set the pagination arrows, or pass `undefined` to remove them entirely. See `ShopifyApp.Bar.initialize()`.

## ShopifyApp.Bar.setBreadcrumb(config)

> Note:
> The equivalent action in Shopify App Bridge is [`TitleBar`](/docs/api/app-bridge/previous-versions/actions/titlebar).

Manually set the breadcrumb in the top bar for an extra level of navigation. Pass a button object, or pass `undefined` to remove it entirely. See `ShopifyApp.Bar.initialize()`. Can be applied only if a title has been set with `ShopifyApp.Bar.setTitle()`.

## ShopifyApp.Modal.open(init, fn)

> Note:
> The equivalent action in Shopify App Bridge is [`Modal`](/docs/api/app-bridge/previous-versions/actions/modal).

Opens a modal dialog in the Shopify admin that in turn loads an iframe inside of it with the passed in URL. It accepts a `src` attribute to be loaded (which must have the same origin as the rest of your app), a `title` for the top of the bar, and a configuration of primary and secondary buttons identical to `Bar.initialize()`. It also accepts a callback function that is called when the modal is closed.

<table>
<thead>

<tr>
<th> Key </th>
<th> Type </th>
<th> Description </th>
</tr>

</thead>
<tbody>

<tr>
<td> <code> src </code> </td>
<td> String </td>
<td> The URL to be opened in the iframe. </td>
</tr>

<tr>
<td> <code> title </code> </td>
<td> String </td>
<td> The title of the modal. </td>
</tr>

<tr>
<td> <code> width </code> </td>
<td> String </td>
<td> Defaults to <code>small</code>. This allows you to set a predetermined width for the modal. The acceptable values are:
<br /><code>large</code> - 980px wide
<br /><code>fullwidth</code> - Fills the width of the screen.
</td>
</tr>

<tr>
<td> <code> height </code> </td>
<td> Integer </td>
<td> This determines the height of the modal in pixels up to a maximum height of 700px and a minimum of 100px. The height is applied to the body (excluding the header and footer) of the rendered modal. This can also be set from within the modal using the <code><a href="#shopifyapp-modal-setheight-height">ShopifyApp.Modal.setHeight()</a></code> method.</td>
</tr>

<tr>
<td> <code> buttons </code> </td>
<td> Object </td>
<td> An object describing the buttons displayed at the bottom of the modal. The object contains three keys, <code>primary</code>, <code>secondary</code>, and <code>tertiary</code>. Each of those keys contain an array of <a href="#button-objects">button objects</a>. Primary buttons default to blue, are floated right, and have a maximum of one button. Secondary buttons are floated right and have a maximum of two buttons. Tertiary buttons are floated left and have a maximum of two buttons.</td>
</tr>

<tr>
<td> <code> callback </code> </td>
<td> Function </td>
<td> When the modal is closed, this function will be executed in the app. Params are <code>(result, data)</code>.</td>
</tr>

</tbody>
</table>

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.Modal.open({
src: 'https://example.com/app/path',
title: 'A new modal',
width: 'small',
height: 300,
buttons: {
primary: { label: "OK" },
secondary: [
{ label: "Cancel", callback: function (label) { ShopifyApp.Modal.close(); } }
]
}
}, function(result, data){
alert("result: " + result + " data: " + data);
});
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.Modal.alert(options, fn)

> Note:
> The equivalent action in Shopify App Bridge is [`Modal`](/docs/api/app-bridge/previous-versions/actions/modal).

Opens a JavaScript style `alert()` in the admin. When the modal is closed the optional callback is called and a modal close message is sent.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.Modal.alert("An alert message", function(result){
alert("The modal was closed.");
});
END_RAW_MD_CONTENT</script>

</div>
</p>


The `options` parameter can be a message to be displayed in the alert window, or it can be an object containing a message, a title for the modal, and a button label.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.Modal.alert({
title: "Warning!",
message: "An alert message",
okButton: "I understand"
}, function(result){
alert("The modal was closed.");
});
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.Modal.confirm(options, fn)

> Note:
> The equivalent action in Shopify App Bridge is [`Modal`](/docs/api/app-bridge/previous-versions/actions/modal).

Opens a JavaScript style `confirm()` in the admin. When the modal is closed the optional callback is called and a modal close message is sent. The callback has the status of the closure passed in.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.Modal.confirm("Are you sure you want to?", function(result){
if(result){
alert("yeah they're sure");
}
else{
alert("no, lets not");
}
});
END_RAW_MD_CONTENT</script>

</div>
</p>


The `options` parameter can be a message to be displayed in the confirm window, or it can be an object containing a message, a title for the modal, and labels for the 'OK' and 'Cancel' buttons.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.Modal.confirm({
title: "Delete your account?",
message: "Do you want to delete your account? This can't be undone.",
okButton: "Yes, delete my account",
cancelButton: "No, keep my account",
style: "danger"
}, function(result){
alert("The modal was closed.");
});
END_RAW_MD_CONTENT</script>

</div>
</p>


All modal dialogs can also accept a `style: 'danger'` attribute which will change the primary button from blue to red, useful for delete confirmations.

## ShopifyApp.Modal.close(result, data)

> Note:
> The equivalent action in Shopify App Bridge is [`Modal`](/docs/api/app-bridge/previous-versions/actions/modal).

Closes the currently open modal window and manually sets the result and data payload. Result expects a true or false and data can contain the message payload, or nothing.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.Modal.close(true, 'some data');
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.Modal.setHeight(height)

> Note:
> The equivalent action in Shopify App Bridge is [`Modal`](/docs/api/app-bridge/previous-versions/actions/modal).

Sets the height of the currently open modal window up to a maximum height of 700px and a minimum of 100px. The height is applied to the body (excluding the header and footer) of the rendered modal.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.Modal.setHeight(320);
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.User.current

> Note:
> The equivalent method in Shopify App Bridge is [`app.getState`](/docs/api/app-bridge/previous-versions/methods#app-getstate).

Returns an object representing the current user logged in to the admin. It is available anytime after the `Shopify.ready` call. Currently it only returns the accountAccess of the user.

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>accountAccess</td>
      <td>Can have 3 possible values: <code>Account owner</code>, <code>Full access</code>, or <code>Limited access</code>. The value will depend on the account access level of the current logged-in user.</td>
    </tr>
  </tbody>
</table>

Here is an example:

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTShopifyApp.ready(function(){
alert(ShopifyApp.User.current.accountAccess);
});
END_RAW_MD_CONTENT</script>

</div>
</p>


## ShopifyApp.Modal.productPicker(options, fn)

> Note:
> The equivalent action in Shopify App Bridge is [`ResourcePicker`](/docs/api/app-bridge/previous-versions/actions/resourcepicker).

Opens a modal dialog containing a list of the products or collections available in the store, with a search field for filtering results. The modal can be used for selecting one or more products/collections, using the resource picker's options.

The callback passed into the resource picker is invoked when the dialog is closed or a button is pressed. The callback is passed a `success` flag (boolean) which will be true if products are selected. The second parameter is a `data` object (JSON) which contains the selected products (if any) and any errors that may have surfaced.

### Options

| Key              | Description                                                                                                                          |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `selectMultiple` | Determines if the user can select multiple products or collections.                                                                  |
| `showHidden`     | Selects if only published products are shown, or if `true` allows hidden (unpublished) resources to be selected. Defaults to `true`. |

### Callback `fn(success, data)` arguments

| Key             | Description                                              |
| --------------- | -------------------------------------------------------- |
| `success`       | Will be true if any products are selected.               |
| `data.products` | Will contain an array of product objects (JSON), if any. |
| `data.errors`   | Will contain an array of errors (string), if any.        |

```js
var productPickerOptions = {
  selectMultiple: false
};

ShopifyApp.Modal.productPicker(productPickerOptions, function(success, data) {
  // Callback is triggered any time a button
  // is clicked or the window is closed.

  if (!success) {
    // Success is true when a resource is picked successfully
    return;
  }

  if (data.products.length > 0) {
    var selectedProducts = data.products;
    useSelectedProducts(selectedProducts);
  }

  if (data.errors) {
    console.error(data.errors);
  }
});
```

## ShopifyApp.Modal.collectionPicker(options, fn)

> Note:
> The equivalent action in Shopify App Bridge is [`ResourcePicker`](/docs/api/app-bridge/previous-versions/actions/resourcepicker).

The collection picker has the same interface as the product picker.

```js
var multipleCollectionOptions = {
  selectMultiple: true
};

ShopifyApp.Modal.collectionPicker(multipleCollectionOptions, function(
  success,
  data
) {
  // Callback is triggered any time a button
  // is clicked or the window is closed.

  if (!success) {
    // Success is true when a resource is picked successfully
    return;
  }

  if (data.products.length > 0) {
    var selectedProducts = data.products;
    useSelectedProducts(selectedProducts);
  }

  if (data.errors) {
    console.error(data.errors);
  }
});
```

## Button objects

> Note:
> The equivalent action in Shopify App Bridge is [`Button`](/docs/api/app-bridge/previous-versions/actions/button).

Button objects are used to define buttons on the top bar and in modal windows. A button object has a required `label` field for the button text. It has optional fields for `message` which is the postMessage the admin will send when the button is clicked. It also accepts a `callback` function that is called on click. Alternatively it accepts a `href` attribute which will make the button open the provided link in a new window. The use case for the link is something like "Open preview in a new window".

Buttons can be defined as follows:

<table>
<thead>

<tr>
<th> Key </th>
<th> Type </th>
<th> Description </th>
</tr>

</thead>
<tbody>

<tr>
<td> <code> label </code> </td>
<td> String </td>
<td> The text displayed in the button. </td>
</tr>

<tr>
<td> <code> message </code> </td>
<td> String </td>
<td> The value of the post message that Shopify will send down to the application that can then be listened for. Attributes such as <code>callback</code> and <code>href</code> create these messages manually and do not require this to be set. </td>
</tr>

<tr>
<td> <code> callback </code> </td>
<td> Function </td>
<td> When the button is clicked, this function will be executed in the app. Params are <code>(message, data)</code>. </td>
</tr>

<tr>
<td> <code> href </code> </td>
<td> String </td>
<td> The URL to be opened. It should be absolute for Admin links or external links. For links within Shopify it should be of the format <code>/orders/123</code>. The specific location where this link will be opened depends on the <code>target</code> attribute. </td>
</tr>

<tr>
<td> <code> target </code> </td>
<td> String </td>
<td> The location where the value of the <code>href</code> will be opened. Default is <code>app</code>. The acceptable values are: <br /><br />
<code>new</code> - Open a new window/tab.<br/><br/>
<code>parent</code> - Replace the current frame/window.<br/><br/>
<code>shopify</code> - A redirect to within the Shopify admin. A relative path without the admin prefix, like <code>/products</code>.<br/><br/>
<code>app</code> - Redirects the app's iframe to this URL. Essentially clicking a regular navigation link in the app.
</td>
</tr>

<tr>
<td> <code> loading </code> </td>
<td> Boolean </td>
<td> A boolean value stating if the loading bar should activate when this button is pressed. Shopify attempts to make a rational guess as to if this should be true or false depending on the action (ie: <code>target: 'new'</code> defaults to false, but <code>target: 'app'</code> defaults to true). It is always safe and prudent to override this value to be exactly what you require for your specific application. </td>
</tr>

<tr>
<td> <code> style </code> </td>
<td> String </td>
<td> Optional color styling for the button. It will always be a sane default, but can accept <code>danger</code> and <code>disabled</code>. If this is not set, primary buttons appear blue and secondary and tertiary buttons are white.</td>
</tr>

<tr>
<td> <code> type </code> </td>
<td> String </td>
<td> Sets the button to become a dropdown button. Should be used alongside the <code>links</code> attribute. Current accepted value is <code>dropdown</code>. Only valid for secondary top bar buttons.</td>
</tr>

<tr>
<td> <code> links </code> </td>
<td> Array </td>
<td> A list of buttons. Accepts the same attributes as a regular button, like <code>label</code>, <code>target</code> and <code>callback</code>. Only valid for secondary top bar buttons.</td>
</tr>

</tbody>
</table>