Skip to main content

Order actions

Order pages allow customers to view and manage their purchases, including browsing order history, checking fulfillment status, and reviewing order details. Extensions on these pages help customers take action on their orders directly from customer accounts.

Anchor to Use casesUse cases

  • Return and exchange requests: Let customers select items to return or exchange, submit a reason, and receive a shipping label directly from the order page.
  • Reorder: Add all items from a previous order back to the cart with a single click.
  • Subscription management: Show active subscriptions tied to past orders, with options to skip, pause, or cancel.
  • Shipment tracking: Surface real-time tracking updates when a shipment is in transit.
Order pages showing available extension target locations for action menu items, action modals, announcements, and blocks.

Anchor to Order action menu targetsOrder action menu targets

Use static targets to extend the order index and order status pages with custom workflows in the order action menu.

Menu item targets render as buttons in the order action menu, while action targets open as modal overlays. The examples demonstrate fetching data from your app's backend or using the Order API.

Anchor to Order action menu item ,[object Object]Order action menu item target

customer-account.order.action.menu-item.render

Renders a button in the order action menu on the order index and order status pages. Use this target to add custom actions that navigate to a URL or open a modal for workflows like returns, exchanges, or reorders.

Extensions at this target can access order data through the Order API. The root element must be a single button component. Use the href prop to navigate directly, or omit it to open a modal rendered by customer-account.order.action.render.

Support
Components (60)
APIs (15)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function MenuActionItemExtension() {
return (
<s-button>
{shopify.i18n.translate('menuItem.button')}
</s-button>
);
}

Anchor to Order action ,[object Object]Order action target

customer-account.order.action.render

Renders a modal when a customer clicks an order action button that doesn't have an href prop set. Use this target to build multi-step workflows like return requests, order modifications, or confirmations.

Extensions at this target can access order data through the Order API and control the modal with shopify.close(). The root element must be a customer account action component.

Support
Components (60)
APIs (15)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function OrderActionExtension() {
return (
<s-customer-account-action heading="Request a return">
<s-button
slot="primary-action"
onClick={() => {
// Submit return request, then close
shopify.close();
}}
>
Submit request
</s-button>
<s-button
slot="secondary-action"
onClick={() => shopify.close()}
>
Cancel
</s-button>
<s-stack direction="block" gap="base">
<s-text>
Select the items you'd like to return and we'll email you a shipping label.
</s-text>
</s-stack>
</s-customer-account-action>
);
}

Anchor to Order index targetsOrder index targets

Use static and block targets to extend the order index page with contextual content and information.

Announcement targets render as dismissable banners at the top of the page, while block targets display as inline cards that merchants can position using the checkout and accounts editor. The examples demonstrate using the Localization API or fetching data from your app's backend.

Anchor to Order index announcement ,[object Object]Order index announcement target

customer-account.order-index.announcement.render

Renders a dismissable announcement at the top of the order index page. Use this target to surface time-sensitive information like shipping updates, promotions, or account status changes.

Extensions at this target can access locale and currency context through the Localization API. The root element should be an announcement component.

Support
Components (60)
APIs (14)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
return (
<s-announcement>
<s-stack direction="inline" gap="base">
<s-text>Your loyalty status has been upgraded!</s-text>
<s-link href="shopify:customer-account/profile">
View your profile
</s-link>
</s-stack>
</s-announcement>
);
}

Anchor to Order index block ,[object Object]Order index block target

customer-account.order-index.block.render

Renders inline content on the order index page. Use this target to display persistent information like loyalty points, subscription summaries, or account-level insights.

Extensions at this target appear as blocks that merchants can position using the checkout and accounts editor. To preview your extension in each supported location, use the placement reference for that location as a URL parameter.

Support
Components (60)
APIs (14)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

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

function Extension() {
const [points, setPoints] = useState(null);

useEffect(() => {
async function fetchPoints() {
const token = await shopify.sessionToken.get();
const res = await fetch('https://your-app.com/api/loyalty', {
headers: {Authorization: `Bearer ${token}`},
});
const data = await res.json();
setPoints(data.points);
}
fetchPoints();
}, []);

return (
<s-section heading="Loyalty program">
<s-stack direction="block" gap="base">
<s-text>
{points !== null
? `You have ${points} loyalty points.`
: 'Loading your points...'}
</s-text>
<s-link href="shopify:customer-account/profile">
View rewards
</s-link>
</s-stack>
</s-section>
);
}

Anchor to Best practicesBest practices

  • Guard against missing data: Always check that shopify.order.value is defined before rendering order-specific content in action targets. The order data loads asynchronously and might be undefined on the initial render.
  • Keep announcements concise: The announcement component is dismissable by the customer, so long messages risk being closed before they're read. Use short, actionable text and link to modals or pages for additional detail.
  • Pair menu items with modals: When building order actions, implement both customer-account.order.action.menu-item.render (the button) and customer-account.order.action.render (the modal) in the same extension. Omit href on the button to trigger the modal automatically.
Was this page helpful?