Alerts notify merchants of important system information, and provide feedback on merchant actions.
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.
- A problem uploading something.
- The information provided is incorrect or doesn't match the requested format.
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.
Alert patternsAnchor link to section titled "Alert patterns"
- Banner (system alert)
- Inline (task alert)
- Toast (task alert)
The following are common patterns available for merchant alerts:
|Pattern||Definition||Duration and interaction||Used to communicate|
Page-level alerts, often system related
Contextual alerts that are specific to a card, section, or modal
|Banners persist until dismissed by the merchant and can include an action button or link.|
|Inline||Provides merchants with feedback that's as close to the source as possible||Inline alerts persist until the message is resolved by the merchant.|
|Toast||Short, temporary messages that slide in and out of a page and provide succinct information.||Toast alerts without actions can disappear automatically or can be dismissed by the merchant.||Success|
InformationAnchor link to section titled "Information"
When you use alerts to communicate important information to merchants, you can choose from a few standard patterns.
Default bannerAnchor link to section titled "Default banner"
Use a default banner when you want to convey general information or actions that aren't critical.
MandatoryDefault banners should be gray and contain only lower priority information that's always dismissible.
Informational bannerAnchor to section titled "Informational banner"
MandatoryMake informational banners blue and always make them dismissible.
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.
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.
MandatoryDisplay toasts in the bottom center of your app screen.
MandatoryUse toasts for only short messages that confirm an action.
RequiredMake toast messages three words or less.
MandatoryToasts are only for non-critical messages that are relevant at the moment.
CautionAvoid using toasts for error messages. Instead use a banner to prominently inform merchants about persistent errors.
Success bannersAnchor link to section titled "Success banner"
MandatoryMake success banners green and include next steps, if applicable.
UnacceptableDon't use banners to show success messages for actions that merchants have completed. For user-initiated feedback, use success toasts instead.
UnacceptableDon't use success banners if there isn't a CTA.
When you're communicating warnings to merchants, you have different options based on what's causing the warning.
Warning bannersAnchor link to section titled "Warning banners"
Use warning banners to display information that needs attention or that merchants need to take action on.
MandatoryMake warning banners yellow. Seeing these banners can be stressful for merchants, so use them intentionally.
Inline warning in a listAnchor to section titled "Inline warning in a list"
MandatoryUse inline warnings to draw attention to exceptions in a list, and encourage action when possible.
UnacceptableDon't use only color to convey a warning. Pair warning messages with a warning icon. This increases accessibility by providing additional identifiers.
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.
MandatoryAlways tell merchants what happened and offer a path forward.
UnacceptableAvoid scary language, technical terms, and jargon.
UnacceptableAvoid humor, idioms, or other words and phrases that might not translate correctly.
Critical bannersAnchor to section titled "Critical banners"
MandatoryMake critical banners red and use them sparingly.
MandatoryProvide troubleshooting steps and a clear way to get support.
Inline errors in formsAnchor link to section titled "Inline 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.