Alerts
Alerts notify merchants of important system information, and provide feedback on merchant actions.
Anchor to System alertsSystem alerts
System alerts are initiated by the application or system, independent of merchant actions. System alerts provide updates on background system status or out-of-context events that have finished.
The following are examples of system alerts:
- Lost network connection.
- A planned upgrade.
- The app subscription is expiring soon.
Anchor to Task alertsTask alerts
Task alerts are initiated in response to merchant actions during a specific task. Task alerts give merchants direct and immediate feedback.
The following are examples of task alerts:
- A form is successfully submitted.
- There's a problem uploading something.
- The information provided is incorrect or doesn't match the requested format.
Anchor to Alert patternsAlert patterns
Merchant alerts follow three common patterns, each suited to a different type of message and where it appears in the Shopify admin:
-
Banner (system alert)
Page-level alerts, often system-related or contextual alerts that are specific to a card, section, or modal. Banners persist until merchants dismiss them, and can include an action button or link.
Use to communicate information, success, warning, or error.
-
Inline (task alert)
Provides merchants with feedback that's as close to the source as possible. Inline alerts persist until merchants resolve the message.
-
Toast (task alert)
Short, temporary messages that slide in and out of a page and provide succinct information. Toast alerts without actions can disappear automatically, or merchants can dismiss them.
Use to communicate success.
Anchor to InformationInformation
When you use alerts to communicate important information to merchants, you can choose from a few standard patterns.
Use an informational banner with the blue header when you want to convey general information or actions that aren't critical.
Anchor to SuccessSuccess
When you're communicating success, it's important to provide feedback. That means using patterns that inform merchants when a task has been completed successfully.
Anchor to ToastToast
Toasts inform merchants of a process that the app has performed or will perform. Toasts display temporarily, at the bottom of the interface. Toasts don't require any merchant input to disappear, and they shouldn't interrupt the merchant experience.
Only use success banners when feedback is delayed, persistent, or has a call-to-action (CTA). Otherwise, use toasts.
Anchor to WarningWarning
When you're communicating warnings to merchants, you have different options based on what's causing the warning.
Use warning banners to display information that needs attention or that merchants need to take action on.
Anchor to Inline warning in a listInline warning in a list
Indicate specific items in a list that you want to make merchants aware of. You can use the badge web component for this.
Anchor to ErrorError
When you're communicating problems and errors, use recognizable patterns that inform merchants of the alert's significance. Put error messages as close to the problem as possible.
Error messages are necessary when something isn't working as expected, or when merchants should be alerted to critical disruptions.
When errors happen, they can be frustrating or even scary. Guide merchants to a solution clearly and quickly.
Use critical banners when you're communicating problems that need to be resolved immediately for merchants to complete a task.
Anchor to Inline errors in formsInline errors in forms
When you're validating form fields like text fields, place the error message directly below the affected field.
Use red for error message text, because it's a common convention outside of Shopify.
Anchor to Inline errors in listsInline errors in lists
Indicate specific items in a list that you want to make merchants aware of. You can use the badge web component for this.
Anchor to Errors in cards, sections, or modalsErrors in cards, sections, or modals
If an error applies to a specific card, section, or modal, then place it near the top of the affected element.