Using modals in your app

Modals are overlays that require merchants to take an action before they can continue interacting with the rest of Shopify. They can be disruptive and should be used thoughtfully and sparingly.

If you need to use a modal in your app or have some questions about how App Bridge modals work, then you can follow this guide to understand how and when to use them.

As a rule of thumb, complex use cases should use the src attribute to render a route while simple content can use HTML children in the modal body. Refer to the table below for some sample use cases and which type of modal you would use to achieve them.

Use case Modal type
A confirmation dialog with a simple string for content HTML content
A form with a few fields and buttons to cancel or submit HTML content
A video taking up the full width and height HTML content
A list that can be rearranged by dragging and dropping items src attribute
A form that uses components like the Polaris Popover and Tooltip src attribute
A canvas editor used to create an email template src attribute

For specific information on max modal usage, refer to the App Design Guidelines.