Choose a version:

Action API

The Action API provides modal presentation functionality for POS UI extensions, allowing you to launch full-screen modal interfaces from menu items, tiles, and block targets. The API enables navigation between different targets within your extension.

Anchor to Use casesUse cases

Modal launch: Launch workflows from menu item buttons or tile interfaces.
Multi-step processes: Create processes requiring more screen space than basic components allow.
Forms: Implement modal-based forms, configuration interfaces, or data entry workflows.
Wizard interfaces: Build wizard-style interfaces that guide users through complex operations.

Support

Targets (15)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides modal presentation functionality. Access the following properties on shopify to launch full-screen modal interfaces from menu items, tiles, and block targets.

Anchor to presentModal presentModal () => void required: Presents the corresponding action (modal) target on top of the current view as a full-screen modal. For example, calling this method from pos.purchase.post.action.menu-item.render presents pos.purchase.post.action.render. Use to launch detailed workflows, complex forms, or multi-step processes that require more screen space than simple components provide.

Examples

jsx

import {render} from 'preact';

export default async () => {

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

};

const Extension = () => {

return (

<s-button

onClick={() => {

shopify.action.presentModal();

}}

/>

);

};

Examples

Description
Present a full-screen modal from menu item actions in detail screens. This example shows how to use `shopify.action.presentModal()` to launch a modal workflow from post-purchase, order details, or other action menu item contexts. With this pattern, you can implement complex, multi-step operations.
jsx
```
import {render} from 'preact';

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

const Extension = () => {
  return (
    <s-button
      onClick={() => {
        shopify.action.presentModal();
      }}
    />
  );
};
```

Description

Present a full-screen modal from smart grid tiles on the POS home screen. This example demonstrates using `shopify.action.presentModal()` to launch modal workflows from tile interactions. This pattern is well-suited for high-frequency tasks that require additional UI beyond the tile itself.

jsx

import {render} from 'preact';

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

const Extension = () => {
  return (
    <s-tile
      heading="My App"
      subheading="Present modal from tile"
      onClick={() => {
        shopify.action.presentModal();
      }}
    />
  );
};

Anchor to Best practicesBest practices

Use modals for complex workflows: Reserve modals for operations that genuinely require more screen space, multiple steps, or complex interactions that can't be handled by simple button actions.
Provide clear entry points: Use descriptive button labels and titles that clearly indicate what the modal will contain or what action it will perform, helping users understand what to expect.
Handle modal dismissal gracefully: Ensure your modal-based workflows handle user dismissal, saving progress when possible and providing clear feedback about incomplete operations.

Anchor to LimitationsLimitations

The presentModal() method must be called from a user interaction (such as a button click or tile tap) and can't be invoked programmatically during extension initialization or from background operations.

Was this page helpful?