Choose a version:

Toast API

The Toast API provides temporary notification functionality for POS UI extensions, allowing you to display brief, non-intrusive messages to users for feedback, confirmations, and status updates that automatically disappear. Toast messages appear as overlay notifications that don't interrupt the user's workflow.

Anchor to Use casesUse cases

Action feedback: Provide immediate feedback for successful data saves or operations.
Error display: Display error messages and warnings without blocking workflows.
Progress updates: Show progress for long-running operations like data synchronization.
Status changes: Communicate system status changes like connectivity issues.

Support

Targets (28)

Supported targets

Anchor to PropertiesProperties

The shopify object provides methods for showing toast notifications. Access the following properties on shopify to display brief, non-intrusive messages to merchants.

Anchor to show show (content: string) => void required: Displays a toast notification with the specified text content. The message appears as a temporary overlay that automatically dismisses after the specified duration. Use for providing immediate user feedback, confirming actions, or communicating status updates without interrupting the user's workflow.

Examples

jsx

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

const Extension = () => {

return (

<s-tile

heading="My App"

onClick={() => shopify.toast.show('Toast content', {duration: 5000})}

);

};

Examples

Description
Display a toast notification from a tile. This example demonstrates using `shopify.toast.show()` to display a brief, non-intrusive message that automatically disappears. This is useful for confirmations, status updates, or success messages that don't require user interaction.
jsx
```
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-tile
      heading="My App"
      onClick={() => shopify.toast.show('Toast content', {duration: 5000})}
    />
  );
};
```

Anchor to Best practicesBest practices

Write clear, concise messages: Keep content brief since toasts disappear automatically.
Provide meaningful feedback: Use toasts to confirm actions, explain errors, or communicate status changes.
Avoid overuse: Reserve for important feedback. Don't show multiple toasts simultaneously.
Handle multiple toast messages: Multiple toast messages may overlap or interfere with each other if shown in rapid succession. Consider queuing or spacing out notifications appropriately.

Anchor to LimitationsLimitations

Toast content is limited to plain text and can't include rich formatting, links, or interactive elements.

Was this page helpful?