Shopify Embedded App User Interface Options
The Shopify Embedded App SDK provides a way for Shopify apps to be placed seamlessly within the Shopify admin section.
In this post, I’ll walk you through the various Shopify Embedded App user interface options with examples of how they work.
We’ll cover the following topics:
- The main embedded app iframe
- The top bar
- Modal dialogues
- Flash messages
- Shopify admin links
The main embedded app iframe
Embedded Shopify apps are displayed directly within the Shopify Admin via an iframe. In the above example, i’ve added a blue border around the iframe portion of the page. This iframe is able to expand horizontally as much as needed and scroll bars will be shown.
Here is the code used to create the above page:
This iframe can serve any page for an embedded app directly your application’s servers. This means you can put just about any content within this iframe.
However, pages within an iframe have a few limitations such as not being able to communicate directly with other parts of the containing web page. As we’ll see in the following sections, the Shopify Embedded App SDK provides tools to allow embedded apps to work around some of these limitations.
The top bar
The top bar above the embedded app iframe is made up of several components:
- An icon
- The title
- Primary and secondary buttons
- Pagination links
For more details on the different top bar options available, check out the Embedded App SDK docs.
There is support for 4 different types of modal dialogues:
ShopifyApp.Modal.openis a general modal window that allows any content to be displayed. Under the covers, this uses an iframe inside of the modal window, similar to the main iframe approach.
ShopifyApp.Modal.alertdisplays an alert dialogue to communicate important information to the user.
ShopifyApp.Modal.confirmdisplays a confirmation dialogue with two options. This is the modal used in the above example.
ShopifyApp.Modal.inputdisplays a single input field to capture data from the user.
Shopify provides a way to briefly display (a.k.a - flash) messages to the user. This message will be shown at the bottom of the screen for a few seconds before disappearing. A flash message would typically be used after a user initiated action such as submitting a form.
There are two types of flash messages available:
ShopifyApp.flashNoticefor displaying general information such as a successful form submission.
ShopifyApp.flashErrorfor displaying error messages, such as an invalid form submission.
Here is the code to generate a flash notice:
And this how the flash notice is displayed:
Here is the code to generate a flash error:
And this is how the flash error is displayed:
Shopify admin links
Shopify apps may also optionally configured to have custom admin links. These admin links will be displayed within a specific section of the Shopify admin, such as on Collection or Product pages.
In the Shopify app settings, there is a section to configure shop admin links as shown here:
In this example, I’ve setup a link to add a new best sellers collection which will be shown from the collection overview section of the Shopify admin like so:
There are many different types of admin links you can create. Here is a listing of the available admin link options:
Using the Shopify Embedded App SDK provides a nice, seamless experience for users of your app.
Let’s recap what was covered in this post:
- Embedded apps can show any page within an iframe directly within the Shopify admin.
- The app can customize various elements of the top bar above the iframe such as the icon, title, breadcrumbs and buttons.
- Modal dialogues can be used to interact with the user outside of the iframe.
- Flash messages provide a way to communicate feedback to the user based on actions performed.
- Shopify admin links allow an app to add context-sensitive actions within other sections of the Shopify admin UI.