Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use 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.

Orders

Order pages display customer purchases, including line items, payment status, fulfillment details, and shipping information. Extensions help merchants streamline fulfillment workflows, integrate with external logistics systems, and provide real-time order insights. Learn more about managing orders in the Shopify admin.

Anchor to Use casesUse cases

  • Fulfillment and shipping integration: Connect orders with external fulfillment providers, 3PLs, or shipping carriers to automate label generation, track shipments, and sync fulfillment status across systems.
  • Customer communication workflows: Send order confirmations, shipping updates, or custom notifications through external communication platforms like email services, SMS gateways, or messaging apps.
  • Fraud detection and risk assessment: Flag potentially fraudulent orders, display risk scores from external fraud prevention services, or trigger manual review workflows for suspicious transactions.
  • Order analytics and reporting: Display order insights, export data to business intelligence tools, or generate custom reports for sales analysis, inventory planning, or financial reconciliation.
  • Bulk order operations: Process multiple orders at once for batch fulfillment, mass invoice generation, bulk status updates, or exporting order data to accounting and ERP systems.
Shopify admin order pages showing all available extension target locations.

Anchor to Order details targetsOrder details targets

Use action and block targets to extend the order details page with workflows and contextual information.

Action targets open as modal overlays from the More actions menu, while block targets display as inline cards. The examples demonstrate fetching data from the direct API or your app's backend.

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

admin.order-details.action.render

Renders an admin action extension on the order details page. Merchants can access this extension from the More actions menu. Use this target to provide workflows that operate on order data, such as syncing with external systems, exporting order information, or managing credit terms.

Extensions at this target can access order data through the data property in the Action Extension API. The action renders in a modal overlay, providing space for multi-step workflows, forms, and confirmations.

Support
Components (35)
APIs (1)

Supported components

Available APIs

Examples
import React, { useState } from 'react';
import {
reactExtension,
useApi,
AdminAction,
Banner,
BlockStack,
Box,
Button,
Checkbox,
ChoiceList,
Divider,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-details.action.render';

export default reactExtension(TARGET, () => <App />);

function App() {
const { data, close } = useApi(TARGET);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);
const [syncInventory, setSyncInventory] = useState(true);
const [syncCustomer, setSyncCustomer] = useState(true);
const [exportFormat, setExportFormat] = useState(['standard']);

const handleExport = async () => {
setLoading(true);
setError(null);
const orderId = data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/erp/export-order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
orderId,
options: {
syncInventory,
syncCustomer,
format: exportFormat[0],
},
}),
});

if (response.ok) {
setSuccess(true);
close();
} else {
const result = await response.json();
setError(result.message || 'Failed to export order to ERP');
}
} catch (err) {
setError('Connection error. Please check your network and try again.');
} finally {
setLoading(false);
}
};

return (
<AdminAction
title="Export to ERP System"
primaryAction={
<Button onPress={handleExport} disabled={loading || success}>
{loading ? 'Exporting...' : 'Export Order'}
</Button>
}
secondaryAction={<Button onPress={close}>Cancel</Button>}
>
<BlockStack gap="base">
{success && (
<Banner tone="success">Order successfully exported to ERP system!</Banner>
)}
{error && <Banner tone="critical">{error}</Banner>}

<Box padding="base">
<BlockStack gap="base">
<ChoiceList
name="exportFormat"
title="Export Format"
value={exportFormat}
onChange={setExportFormat}
choices={[
{ label: 'Standard (recommended)', value: 'standard' },
{ label: 'Detailed with line items', value: 'detailed' },
{ label: 'Minimal (ID only)', value: 'minimal' },
]}
/>

<Divider />

<Checkbox
checked={syncInventory}
onChange={setSyncInventory}
>
Sync inventory levels after export
</Checkbox>

<Checkbox
checked={syncCustomer}
onChange={setSyncCustomer}
>
Update customer record in ERP
</Checkbox>
</BlockStack>
</Box>
</BlockStack>
</AdminAction>
);
}

Anchor to Order details action (should render) ,[object Object]Order details action (should render) target

admin.order-details.action.should-render

Controls the render state of an admin action extension on the order details page. Use this target to conditionally show or hide your action extension based on the order's properties, such as status, configuration, or specific business requirements.

This target returns a boolean value that determines whether the corresponding action extension appears in the More actions menu. The extension evaluates each time the page loads.

Support
Components (0)
APIs (1)

Supported components

-

Available APIs

Examples
import {extension} from '@shopify/ui-extensions/admin';

export default extension(
'admin.order-details.action.should-render',
async ({data}) => {
const orderId = data.selected[0].id;
const orderGid = orderId.split('/').pop();

try {
const response = await fetch(
`https://your-app.com/api/fulfillment/check?order_id=${orderGid}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}
);

if (!response.ok) {
return {display: false};
}

const result = await response.json();

// Show action if order uses our fulfillment service and has tracking
const shouldDisplay =
result.usesCustomFulfillment === true &&
result.hasActiveTracking === true &&
result.fulfillmentStatus !== 'delivered';

return {display: shouldDisplay};
} catch (err) {
console.error('Failed to check fulfillment status:', err);
return {display: false};
}
}
);

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

admin.order-details.block.render

Renders an admin block extension inline on the order details page. Use this target to display contextual information, analytics, or status updates related to the order without requiring merchant interaction to open a modal.

Extensions at this target can access order data through the data property in the Block Extension API. Blocks appear as cards on the page and can show real-time data, insights, or quick actions. They provide persistent visibility for information merchants need to see at a glance.

Support
Components (35)
APIs (1)

Supported components

Available APIs

Examples
import React, { useState, useEffect } from 'react';
import {
reactExtension,
useApi,
AdminBlock,
Banner,
BlockStack,
Box,
Button,
Divider,
Heading,
Icon,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-details.block.render';

export default reactExtension(TARGET, () => <App />);

function App() {
const {data, query} = useApi(TARGET);
const [status, setStatus] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

const fetchFulfillmentStatus = async () => {
setLoading(true);
setError(null);
try {
const orderData = await query(`query GetOrder($id: ID!) {
order(id: $id) { name }
}`, { variables: { id: data.selected[0].id } });
const response = await fetch('https://your-app.com/api/fulfillment/status', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ orderId: data.selected[0].id }),
});

if (!response.ok) throw new Error('Failed to fetch status');
const result = await response.json();
setStatus(result);
} catch (err) {
setError('Unable to load fulfillment status');
} finally {
setLoading(false);
}
};

useEffect(() => {
fetchFulfillmentStatus();
}, []);

const getMilestoneIcon = (completed) => completed ? 'CheckCircleFill' : 'CircleFill';

return (
<AdminBlock title="Fulfillment Status">
{error && <Banner tone="critical">{error}</Banner>}
{loading ? (
<BlockStack>
<Box padding="base">Loading fulfillment data...</Box>
</BlockStack>
) : status ? (
<BlockStack gap="base">
<Banner tone={status.delivered ? 'success' : 'info'}>
{status.delivered ? 'Order delivered!' : `In transit: ${status.carrier}`}
</Banner>
<Divider />
<BlockStack gap="tight">
<Heading size="6">Tracking Milestones</Heading>
{status.milestones?.map((milestone, idx) => (
<BlockStack key={idx} gap="extraTight">
<Box inlineAlignment="start">
<Icon name={getMilestoneIcon(milestone.completed)} />
{` ${milestone.label} - ${milestone.timestamp || 'Pending'}`}
</Box>
</BlockStack>
))}
</BlockStack>
<Divider />
<Button onPress={fetchFulfillmentStatus}>Refresh Status</Button>
</BlockStack>
) : (
<Box padding="base">No fulfillment data available</Box>
)}
</AdminBlock>
);
}

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

admin.order-details.print-action.render

Renders an admin print action extension on the order details page. Merchants access this extension from the Print menu in the toolbar. Use this target to provide custom print workflows such as generating packing slips, shipping labels, invoices, or other order-related documents. The extension contains special APIs to display a preview of the document and send it to a printer.

Support
Components (35)
APIs (1)

Supported components

Available APIs

Examples
import React, { useState } from 'react';
import {
reactExtension,
useApi,
AdminAction,
Banner,
BlockStack,
Box,
Button,
Checkbox,
ChoiceList,
Divider,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-details.print-action.render';

export default reactExtension(TARGET, () => <App />);

function App() {
const { data, close } = useApi(TARGET);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);
const [format, setFormat] = useState(['standard']);
const [includeBarcode, setIncludeBarcode] = useState(true);
const [includePricing, setIncludePricing] = useState(false);

const handleGenerateSlip = async () => {
setLoading(true);
setError(null);
const orderId = data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/erp/packing-slip', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
orderId,
format: format[0],
includeBarcode,
includePricing,
}),
});

if (response.ok) {
const result = await response.json();
setSuccess(true);
close();
} else {
const errorData = await response.json();
setError(errorData.message || 'Failed to generate packing slip');
}
} catch (err) {
setError('Connection to ERP failed. Please try again.');
} finally {
setLoading(false);
}
};

return (
<AdminAction
title="Generate ERP Packing Slip"
primaryAction={
<Button onPress={handleGenerateSlip} disabled={loading || success}>
{loading ? 'Generating...' : 'Generate & Print'}
</Button>
}
secondaryAction={<Button onPress={close}>Cancel</Button>}
>
<BlockStack gap="base">
{success && (
<Banner tone="success">
Packing slip sent to ERP. Print job queued successfully.
</Banner>
)}
{error && <Banner tone="critical">{error}</Banner>}

<Box padding="base">
<BlockStack gap="base">
<ChoiceList
name="format"
title="Slip Format"
value={format}
onChange={setFormat}
choices={[
{ label: 'Standard (Letter)', value: 'standard' },
{ label: 'Compact (4x6)', value: 'compact' },
{ label: 'Detailed (with notes)', value: 'detailed' },
]}
/>

<Divider />

<Checkbox
checked={includeBarcode}
onChange={setIncludeBarcode}
>
Include scannable barcode
</Checkbox>

<Checkbox
checked={includePricing}
onChange={setIncludePricing}
>
Include item pricing
</Checkbox>
</BlockStack>
</Box>
</BlockStack>
</AdminAction>
);
}

Anchor to Order details print action (should render) ,[object Object]Order details print action (should render) target

admin.order-details.print-action.should-render

Controls the render state of an admin action extension on the order details page. Use this target to conditionally show or hide your action extension based on the order's properties, such as status, configuration, or specific business requirements.

This target returns a boolean value that determines whether the corresponding action extension appears in the More actions menu. The extension evaluates each time the page loads.

Support
Components (0)
APIs (1)

Supported components

-

Available APIs

Examples
import React, { useState } from 'react';
import {
reactExtension,
useApi,
AdminAction,
Banner,
BlockStack,
Box,
Button,
Checkbox,
ChoiceList,
Divider,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-details.print-action.should-render';

export default reactExtension(TARGET, () => <App />);

function App() {
const { data, close } = useApi(TARGET);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);
const [exportType, setExportType] = useState(['full']);
const [includeCustomer, setIncludeCustomer] = useState(true);
const [includeShipping, setIncludeShipping] = useState(true);

const handleExport = async () => {
setLoading(true);
setError(null);
const orderId = data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/erp/export-order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
orderId,
exportType: exportType[0],
includeCustomer,
includeShipping,
}),
});

if (response.ok) {
setSuccess(true);
close();
} else {
const result = await response.json();
setError(result.message || 'Failed to export order to ERP');
}
} catch (err) {
setError('Connection error. Please check your network and try again.');
} finally {
setLoading(false);
}
};

return (
<AdminAction
title="Export Order to ERP"
primaryAction={
<Button onPress={handleExport} disabled={loading || success}>
{loading ? 'Exporting...' : 'Export to ERP'}
</Button>
}
secondaryAction={<Button onPress={close}>Cancel</Button>}
>
<BlockStack gap="base">
{success && (
<Banner tone="success">Order successfully exported to ERP system!</Banner>
)}
{error && <Banner tone="critical">{error}</Banner>}

<Box>
<ChoiceList
name="exportType"
title="Export Type"
choices={[
{ id: 'full', label: 'Full order data' },
{ id: 'financial', label: 'Financial data only' },
{ id: 'inventory', label: 'Inventory update only' },
]}
value={exportType}
onChange={setExportType}
/>
</Box>

<Divider />

<BlockStack gap="base">
<Checkbox
checked={includeCustomer}
onChange={setIncludeCustomer}
>
Include customer information
</Checkbox>
<Checkbox
checked={includeShipping}
onChange={setIncludeShipping}
>
Include shipping details
</Checkbox>
</BlockStack>
</BlockStack>
</AdminAction>
);
}

Anchor to Order index targetsOrder index targets

Use action targets to extend the order index page with workflows and operations.

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

admin.order-index.action.render

Renders an admin action extension on the order index page. Merchants can access this extension from the More actions menu. Use this target to provide workflows that operate on order data, such as syncing with external systems, exporting order information, or managing credit terms.

Extensions at this target can access order data through the data property in the Action Extension API. The action renders in a modal overlay, providing space for multi-step workflows, forms, and confirmations.

Support
Components (35)
APIs (1)

Supported components

Available APIs

Examples
import React, { useState } from 'react';
import {
reactExtension,
useApi,
AdminAction,
Banner,
BlockStack,
Box,
Button,
Checkbox,
ChoiceList,
Divider,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-index.action.render';

export default reactExtension(TARGET, () => <App />);

function App() {
const { data, close } = useApi(TARGET);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);
const [exportFormat, setExportFormat] = useState(['full']);
const [includeLineItems, setIncludeLineItems] = useState(true);
const [includeCustomer, setIncludeCustomer] = useState(true);

const selectedOrders = data.selected;
const orderCount = selectedOrders.length;

const handleExport = async () => {
setLoading(true);
setError(null);

try {
const orderIds = selectedOrders.map(order => order.id);

const response = await fetch('https://your-app.com/api/erp/export-orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
orderIds,
format: exportFormat[0],
includeLineItems,
includeCustomer,
}),
});

if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Export failed');
}

setSuccess(true);
close();
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to export orders');
} finally {
setLoading(false);
}
};

return (
<AdminAction
title="Export to ERP"
primaryAction={
<Button onPress={handleExport} disabled={loading || success || orderCount === 0}>
{loading ? 'Exporting...' : `Export ${orderCount} Order${orderCount !== 1 ? 's' : ''}`}
</Button>
}
secondaryAction={<Button onPress={close}>Cancel</Button>}
>
<BlockStack gap="base">
{success && (
<Banner tone="success">
Successfully exported {orderCount} order{orderCount !== 1 ? 's' : ''} to ERP
</Banner>
)}
{error && <Banner tone="critical">{error}</Banner>}
{orderCount === 0 && (
<Banner tone="warning">Please select at least one order to export</Banner>
)}

<Box padding="base">
<ChoiceList
title="Export Format"
name="exportFormat"
choices={[
{ id: 'full', label: 'Full order data' },
{ id: 'summary', label: 'Summary only' },
{ id: 'financial', label: 'Financial data only' },
]}
value={exportFormat}
onChange={setExportFormat}
/>
</Box>

<Divider />

<BlockStack gap="base">
<Checkbox
checked={includeLineItems}
onChange={setIncludeLineItems}
>
Include line item details
</Checkbox>
<Checkbox
checked={includeCustomer}
onChange={setIncludeCustomer}
>
Include customer information
</Checkbox>
</BlockStack>
</BlockStack>
</AdminAction>
);
}

Anchor to Order index action (should render) ,[object Object]Order index action (should render) target

admin.order-index.action.should-render

Controls the render state of an admin action extension on the order index page. Use this target to conditionally show or hide your action extension based on the order's properties, such as status, configuration, or specific business requirements.

This target returns a boolean value that determines whether the corresponding action extension appears in the More actions menu. The extension evaluates each time the page loads.

Support
Components (0)
APIs (1)

Supported components

-

Available APIs

Examples
import {extension} from '@shopify/ui-extensions/admin';

export default extension(
'admin.order-index.action.should-render',
async ({data}) => {
const selectedOrderIds = data.selected.map((item) => item.id);

if (selectedOrderIds.length === 0) {
return {display: false};
}

try {
// Call app backend to check fulfillment tracking availability
const response = await fetch('https://your-app.com/api/fulfillment/check-tracking', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
orderIds: selectedOrderIds,
}),
});

if (!response.ok) {
return {display: false};
}

const result = await response.json();

// Show action if any selected orders have pending fulfillment
// and are registered in the logistics tracking system
const hasTrackableOrders = result.orders.some(
(order: {hasPendingFulfillment: boolean; isRegisteredInLogistics: boolean}) =>
order.hasPendingFulfillment && order.isRegisteredInLogistics
);

return {display: hasTrackableOrders};
} catch (err) {
// Hide action if backend check fails
return {display: false};
}
}
);

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

admin.order-index.selection-action.render

Renders a selection action extension on the order index page when one or more orders are selected. Merchants can access this extension from the bulk actions menu when selecting orders. Use this target to provide batch operations like bulk fulfillment, mass exports, or multi-order processing workflows.

Extensions at this target receive a list of selected order IDs through the data.selected property, enabling bulk processing of multiple orders in a single action.

Support
Components (35)
APIs (1)

Supported components

Available APIs

Examples
import React, { useState } from 'react';
import {
reactExtension,
useApi,
AdminAction,
Banner,
BlockStack,
Box,
Button,
Checkbox,
Divider,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-index.selection-action.render';

export default reactExtension(TARGET, () => <App />);

function App() {
const { data, close } = useApi(TARGET);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);
const [includeLineItems, setIncludeLineItems] = useState(true);
const [includeCustomer, setIncludeCustomer] = useState(true);
const [markAsExported, setMarkAsExported] = useState(false);

const selectedOrders = data.selected;
const orderCount = selectedOrders.length;

const handleExport = async () => {
setLoading(true);
setError(null);

try {
const orderIds = selectedOrders.map(order => order.id);

const response = await fetch('https://your-app.com/api/erp/export-orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
orderIds,
options: {
includeLineItems,
includeCustomer,
markAsExported,
},
}),
});

if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Export failed');
}

setSuccess(true);
close();
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to export orders');
} finally {
setLoading(false);
}
};

return (
<AdminAction
title={`Export ${orderCount} Order${orderCount > 1 ? 's' : ''} to ERP`}
primaryAction={
<Button onPress={handleExport} disabled={loading || success}>
{loading ? 'Exporting...' : `Export ${orderCount} Order${orderCount > 1 ? 's' : ''}`}
</Button>
}
secondaryAction={<Button onPress={close}>Cancel</Button>}
>
<BlockStack gap="base">
{success && (
<Banner tone="success">
Successfully exported {orderCount} order{orderCount > 1 ? 's' : ''} to ERP system!
</Banner>
)}
{error && <Banner tone="critical">{error}</Banner>}

<Box padding="base">
<BlockStack gap="base">
<Checkbox
checked={includeLineItems}
onChange={setIncludeLineItems}
>
Include line item details
</Checkbox>
<Checkbox
checked={includeCustomer}
onChange={setIncludeCustomer}
>
Include customer information
</Checkbox>
<Divider />
<Checkbox
checked={markAsExported}
onChange={setMarkAsExported}
>
Mark orders as exported in Shopify
</Checkbox>
</BlockStack>
</Box>

<Banner tone="info">
{orderCount} order{orderCount > 1 ? 's' : ''} selected for export
</Banner>
</BlockStack>
</AdminAction>
);
}

Anchor to Order index selection action (should render) ,[object Object]Order index selection action (should render) target

admin.order-index.selection-action.should-render

Controls the render state of a selection action extension on the order index page. Use this target to conditionally show or hide your action extension based on the order's properties, such as status, configuration, or specific business requirements.

This target returns a boolean value that determines whether the corresponding action extension appears in the More actions menu. The extension evaluates each time the page loads.

Support
Components (0)
APIs (1)

Supported components

-

Available APIs

Examples
import {extension} from '@shopify/ui-extensions/admin';

export default extension(
'admin.order-index.selection-action.should-render',
async ({data}) => {
const selectedOrderIds = data.selected.map((item) => item.id);

if (selectedOrderIds.length === 0) {
return {display: false};
}

try {
const response = await fetch('https://your-app.com/api/fulfillment/check-tracking', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
orderIds: selectedOrderIds,
}),
});

if (!response.ok) {
return {display: false};
}

const result = await response.json();

// Show action if any selected order has tracking available
const hasTrackingAvailable = result.orders?.some(
(order: {hasTracking: boolean}) => order.hasTracking
);

return {display: hasTrackingAvailable};
} catch (err) {
console.error('Failed to check fulfillment tracking:', err);
return {display: false};
}
}
);

Anchor to Order index selection print action ,[object Object]Order index selection print action target

admin.order-index.selection-print-action.render

Renders an admin print action extension on the order index page when multiple orders are selected. Merchants access this extension from the Print menu in the bulk actions toolbar. Use this target to provide bulk print workflows such as generating packing slips, shipping labels, or invoices for multiple orders at once.

Support
Components (35)
APIs (1)

Supported components

Available APIs

Examples
import React, { useState } from 'react';
import {
reactExtension,
useApi,
AdminAction,
Banner,
BlockStack,
Box,
Button,
Checkbox,
ChoiceList,
Divider,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-index.selection-print-action.render';

export default reactExtension(TARGET, () => <App />);

function App() {
const { data, close } = useApi(TARGET);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);
const [includeLineItems, setIncludeLineItems] = useState(true);
const [includeCustomer, setIncludeCustomer] = useState(true);
const [exportFormat, setExportFormat] = useState(['full']);

const selectedOrders = data.selected;

const handleExport = async () => {
setLoading(true);
setError(null);

try {
const orderIds = selectedOrders.map(order => order.id);
const response = await fetch('https://your-app.com/api/erp/export-orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
orderIds,
options: {
includeLineItems,
includeCustomer,
format: exportFormat[0],
},
}),
});

if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Export failed');
}

setSuccess(true);
close();
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to export orders');
} finally {
setLoading(false);
}
};

return (
<AdminAction
title="Export to ERP"
primaryAction={
<Button onPress={handleExport} disabled={loading || success}>
{loading ? 'Exporting...' : `Export ${selectedOrders.length} Order(s)`}
</Button>
}
secondaryAction={<Button onPress={close}>Cancel</Button>}
>
<BlockStack gap="base">
{success && (
<Banner tone="success">
Successfully exported {selectedOrders.length} order(s) to ERP system!
</Banner>
)}
{error && <Banner tone="critical">{error}</Banner>}

<Box padding="base">
<BlockStack gap="base">
<ChoiceList
name="exportFormat"
title="Export Format"
value={exportFormat}
onChange={setExportFormat}
choices={[
{ id: 'full', label: 'Full order data' },
{ id: 'summary', label: 'Summary only' },
{ id: 'financial', label: 'Financial data only' },
]}
/>
<Divider />
<Checkbox
checked={includeLineItems}
onChange={setIncludeLineItems}
>
Include line item details
</Checkbox>
<Checkbox
checked={includeCustomer}
onChange={setIncludeCustomer}
>
Include customer information
</Checkbox>
</BlockStack>
</Box>
</BlockStack>
</AdminAction>
);
}

Anchor to Order index selection print action (should render) ,[object Object]Order index selection print action (should render) target

admin.order-index.selection-print-action.should-render

Controls the render state of an admin action extension on the order index page. Use this target to conditionally show or hide your action extension based on the order's properties, such as status, configuration, or specific business requirements.

This target returns a boolean value that determines whether the corresponding action extension appears in the More actions menu. The extension evaluates each time the page loads.

Support
Components (0)
APIs (1)

Supported components

-

Available APIs

Examples
import React from 'react';
import { useState, useEffect } from 'react';
import {
reactExtension,
useApi,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-index.selection-print-action.should-render';

export default reactExtension(TARGET, () => <App />);

function App() {
const { data } = useApi(TARGET);

useEffect(() => {
async function checkPrintEligibility() {
const orderIds = data.selected.map((item) => item.id);

try {
// Check with your backend if these orders can be printed for ERP
const response = await fetch('https://your-app.com/api/erp/check-print-eligibility', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ orderIds }),
});

if (response.ok) {
const result = await response.json();
// Return true if all orders are eligible for ERP print export
// The should-render target uses the response to show/hide the action
return result.allEligible;
}
return false;
} catch (err) {
// On error, don't show the print action
return false;
}
}

checkPrintEligibility();
}, [data.selected]);

// should-render targets don't render UI, they just determine visibility
return null;
}

Anchor to Order fulfilled card targetsOrder fulfilled card targets

Use action targets to extend the order fulfilled card page with workflows and operations.

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

admin.order-fulfilled-card.action.render

Renders an admin action extension on the order details page. Merchants can access this extension from the More actions menu. Use this target to provide workflows that operate on order data, such as syncing with external systems, exporting order information, or managing credit terms.

Extensions at this target can access order data through the data property in the Action Extension API. The action renders in a modal overlay, providing space for multi-step workflows, forms, and confirmations.

Support
Components (35)
APIs (1)

Supported components

Available APIs

Examples
import React, { useState } from 'react';
import {
reactExtension,
useApi,
AdminAction,
Banner,
BlockStack,
Box,
Button,
Checkbox,
ChoiceList,
Divider,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.order-fulfilled-card.action.render';

export default reactExtension(TARGET, () => <App />);

function App() {
const { data, close } = useApi(TARGET);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);
const [includeTracking, setIncludeTracking] = useState(true);
const [includeCustomer, setIncludeCustomer] = useState(true);
const [exportFormat, setExportFormat] = useState(['standard']);

const handleExport = async () => {
setLoading(true);
setError(null);
const orderId = data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/erp/export-order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
orderId,
includeTracking,
includeCustomer,
format: exportFormat[0],
}),
});

if (response.ok) {
setSuccess(true);
close();
} else {
const result = await response.json();
setError(result.message || 'Export failed');
}
} catch (err) {
setError('Connection to ERP failed. Please try again.');
} finally {
setLoading(false);
}
};

return (
<AdminAction
title="Export to ERP System"
primaryAction={
<Button onPress={handleExport} disabled={loading || success}>
{loading ? 'Exporting...' : 'Export Order'}
</Button>
}
secondaryAction={<Button onPress={close}>Cancel</Button>}
>
<BlockStack gap="base">
{success && (
<Banner tone="success">Order successfully exported to ERP!</Banner>
)}
{error && <Banner tone="critical">{error}</Banner>}

<Box padding="base">
<BlockStack gap="base">
<ChoiceList
name="exportFormat"
title="Export Format"
value={exportFormat}
onChange={setExportFormat}
choices={[
{ label: 'Standard (JSON)', value: 'standard' },
{ label: 'Extended (with line items)', value: 'extended' },
{ label: 'Minimal (IDs only)', value: 'minimal' },
]}
/>

<Divider />

<Checkbox
checked={includeTracking}
onChange={setIncludeTracking}
>
Include fulfillment tracking info
</Checkbox>

<Checkbox
checked={includeCustomer}
onChange={setIncludeCustomer}
>
Include customer details
</Checkbox>
</BlockStack>
</Box>
</BlockStack>
</AdminAction>
);
}

Anchor to Order fulfilled card action (should render) ,[object Object]Order fulfilled card action (should render) target

admin.order-fulfilled-card.action.should-render

Controls the render state of an admin action extension on the order details page. Use this target to conditionally show or hide your action extension based on the order's properties, such as status, configuration, or specific business requirements.

This target returns a boolean value that determines whether the corresponding action extension appears in the More actions menu. The extension evaluates each time the page loads.

Support
Components (0)
APIs (1)

Supported components

-

Available APIs

Examples
import {extension} from '@shopify/ui-extensions/admin';

export default extension(
'admin.order-fulfilled-card.action.should-render',
async ({data}) => {
const orderId = data.selected[0].id;
const orderGid = orderId.split('/').pop();

try {
const response = await fetch(
`https://your-app.com/api/fulfillment/tracking-status?orderId=${orderGid}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}
);

if (!response.ok) {
return {display: false};
}

const trackingData = await response.json();

// Show action if tracking updates are available or sync is needed
const shouldDisplay =
trackingData.hasTrackingUpdates ||
trackingData.requiresCarrierSync ||
trackingData.deliveryExceptionDetected;

return {display: shouldDisplay};
} catch (err) {
console.error('Failed to check fulfillment tracking status:', err);
return {display: false};
}
}
);

Anchor to Best practicesBest practices

  • Check fulfillment status before action: Before displaying fulfillment-related actions, verify the order's fulfillment status using displayFulfillmentStatus. This prevents showing "ship order" actions on already-fulfilled orders or offering refunds on cancelled orders.
  • Batch bulk operations intelligently: When processing multiple orders, work in batches to stay within GraphQL query cost limits. Display progress for operations on more than 10 orders so merchants can track completion of long-running tasks.
  • Combine risk indicators: When displaying fraud risk assessments, show both Shopify's native risk level and your app's custom scoring. Provide specific reasons for elevated risk (for example, mismatched billing/shipping, high-value first-time customer, unusual velocity) rather than just a score.
  • Handle financial fields carefully: Order financial data includes complex fields like refunds, discounts, and tax lines. When calculating totals or displaying financial information, use MoneyV2 fields (amount and currencyCode) and respect the order's presentment currency for accuracy.
  • Consider order editability: Orders have different editability states based on their status and payment state. Before showing data modification actions, check if the order can be edited using order edit workflows rather than direct mutations.

Anchor to LimitationsLimitations

  • Single target per module: Each [[extensions.targeting]] entry in your TOML configuration maps one target to one module file.
  • Fulfilled card visibility: The admin.order-fulfilled-card.action.render target only appears on orders fulfilled by your app's fulfillment service. If your app doesn't act as a fulfillment service or an order was fulfilled by Shopify or another fulfillment provider, this target won't appear.
  • Print menu location: Print actions appear in the Print menu, not the More actions menu.
  • Block target visibility: Block extensions must be manually added and pinned by merchants before they appear.
  • Block collapse behavior: Returning null from a block extension collapses the block rather than removing it from the page. Blocks can't be fully hidden at runtime.
Was this page helpful?