Skip to main content
Upgrade to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use Polaris web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension and avoid being blocked from updating your extension after October 1st 2026.

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 (63)
APIs (14)

Supported components

Available APIs

Examples
import {
reactExtension,
Button,
useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order.action.menu-item.render',
() => <MenuActionItemExtension />,
);

function MenuActionItemExtension() {
const translate = useTranslate();

return (
<Button>
{translate('menuItem.button')}
</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 close(). The root element must be a CustomerAccountAction component.

Support
Components (63)
APIs (14)

Supported components

Available APIs

Examples
import {
reactExtension,
useApi,
CustomerAccountAction,
Button,
BlockStack,
Text,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order.action.render',
() => <OrderActionExtension />,
);

function OrderActionExtension() {
const {close} = useApi<'customer-account.order.action.render'>();

return (
<CustomerAccountAction
title="Request a return"
primaryAction={
<Button
onPress={() => {
// Submit return request, then close
close();
}}
>
Submit request
</Button>
}
secondaryAction={
<Button onPress={() => close()}>
Cancel
</Button>
}
>
<BlockStack spacing="base">
<Text>
Select the items you'd like to return and we'll email you a shipping label.
</Text>
</BlockStack>
</CustomerAccountAction>
);
}

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 a Banner component.

Support
Components (63)
APIs (13)

Supported components

Available APIs

Examples
import {
reactExtension,
Banner,
InlineStack,
Text,
Link,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-index.announcement.render',
() => <Extension />,
);

function Extension() {
return (
<Banner>
<InlineStack spacing="base">
<Text>Your loyalty status has been upgraded!</Text>
<Link to="shopify:customer-account/profile">
View your profile
</Link>
</InlineStack>
</Banner>
);
}

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 (63)
APIs (13)

Supported components

Available APIs

Examples
import {useState, useEffect} from 'react';
import {
reactExtension,
BlockStack,
Text,
Link,
Heading,
useSessionToken,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-index.block.render',
() => <Extension />,
);

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

useEffect(() => {
async function fetchPoints() {
const token = await 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 (
<BlockStack spacing="base">
<Heading>Loyalty program</Heading>
<Text>
{points !== null
? `You have ${points} loyalty points.`
: 'Loading your points...'}
</Text>
<Link to="shopify:customer-account/profile">
View rewards
</Link>
</BlockStack>
);
}

Anchor to Best practicesBest practices

  • Guard against missing data: Always check that useOrder returns a value 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 Banner 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.

Anchor to LimitationsLimitations

  • Single root element for menu items: The customer-account.order.action.menu-item.render target requires a single Button component as the root element. You can't render multiple buttons or other components at this target.
  • Modal requires CustomerAccountAction root: The customer-account.order.action.render target only renders when wrapped in a CustomerAccountAction component. Other root elements won't render.
Was this page helpful?