Modals are overlays that prevent users from interacting with the rest of the app until they take an action that dismisses the modal.

A close-up image of a modal. In the modal's title area is the word title. In the upper-right corner is an x icon to dismiss the modal. In the body of the modal, the word message appears. The modal features two buttons: a white button with the label Secondary action, and a green button with the label Primary action.

Modals can be disruptive because they require users to take an action before they can continue interacting with the rest of Shopify. You should use modals sparingly.

The Modal action set allows you to open two types of modal: message and iframe. Message modals support only plain text content. Iframe modals allow you to fully customize the modal contents.

There are 2 ways to use the modal action:

  1. Plain JavaScript
  2. React component

On this page