Shopify Embedded App User Interface Options

TomShopify2 Comments

This post is part of a series following my building of the Best Sellers app to help Shopify stores manage and promote best selling products. If you'd like to start at the beginning of the series, you can start here.

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-app-main

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

embedded-app-top-bar

The top bar above the embedded app iframe is made up of several components:

  • An icon
  • The title
  • Breadcrumbs
  • Primary and secondary buttons
  • Pagination links

The Shopify Embedded App SDK allows each of these to be modified via the provided Javascript library. Here is the code used to build the above top bar:

For more details on the different top bar options available, check out the Embedded App SDK docs.

Modal dialogues

embedded-modal

Shopify embedded apps can also display modal popups like the one shown above to interact with the user. This modal was generated by using the following Javascript from within the embedded iframe:

There is support for 4 different types of modal dialogues:

  • ShopifyApp.Modal.open is 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.alert displays an alert dialogue to communicate important information to the user.
  • ShopifyApp.Modal.confirm displays a confirmation dialogue with two options. This is the modal used in the above example.
  • ShopifyApp.Modal.input displays a single input field to capture data from the user.

Flash messages

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.flashNotice for displaying general information such as a successful form submission.
  • ShopifyApp.flashError for 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:

flash-notice

Here is the code to generate a flash error:

And this is how the flash error is displayed:

flash-error

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:

shop-admin-links

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:

add-best-sellers-collection

There are many different types of admin links you can create. Here is a listing of the available admin link options:

shop-admin-link-options

Signup to be notified about future Shopify App development articles

Get Shopify App development tips and tricks straight to your inbox.

Summary

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.

2 Comments on “Shopify Embedded App User Interface Options”

  1. Great article! I have a question though, if I open a form in the iframe modal how can I trigger the form submission with the ok button?

  2. Hi Erokamisama,

    The function you pass in as the second argument is the callback function. It will receive the result of the button that was clicked, and then you can submit your form from there. In my example above I am just alerting the result via:

    function(result){
    alert("Result: " + result);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *