---
title: Abandoned checkouts
description: >-
Abandoned checkout pages display information about checkouts where customers
didn't complete their purchase. Extensions on these pages help merchants
recover lost sales or analyze abandonment patterns.
api_version: 2025-10
api_name: admin-extensions
source_url:
html: >-
https://shopify.dev/docs/api/admin-extensions/2025-10/targets/abandoned-checkouts
md: >-
https://shopify.dev/docs/api/admin-extensions/2025-10/targets/abandoned-checkouts.md
---
# Abandoned checkouts
Abandoned checkout pages display information about checkouts where customers didn't complete their purchase. Extensions on these pages help merchants recover lost sales or analyze abandonment patterns.
### Use cases
* **Recovery workflows:** Launch automated or manual follow-up campaigns to re-engage customers who abandoned their checkout.
* **Customer insights:** Display additional context about the customer's browsing history, preferences, or engagement patterns to inform recovery strategies.
* **Inventory alerts:** Show real-time stock availability for items in the abandoned cart to help merchants prioritize follow-up.
* **Third-party integrations:** Sync abandoned checkout data with external marketing, CRM, or analytics platforms.
* **Custom analytics:** Display specialized metrics, conversion predictions, or abandonment reasons from your app's analysis.
***
## Abandoned checkouts targets
Use [action and block targets](https://shopify.dev/docs/api/admin-extensions/2025-10#building-your-extension) to extend the abandoned checkout details page with workflows and contextual information that help merchants recover sales.
Action targets open as modal overlays from the **More actions** menu, while block targets display as inline cards. The examples demonstrate fetching data from Shopify's [direct API](https://shopify.dev/docs/api/admin-extensions/2025-10#direct-api-access) or your [app's backend](https://shopify.dev/docs/api/admin-extensions/2025-10#app-authentication).
### Abandoned checkout details action target
`admin.abandoned-checkout-details.action.render`
Renders an admin action extension on the abandoned checkout details page. Merchants can access this extension from the **More actions** menu. Use this target to provide workflows that operate on the abandoned checkout data, such as sending custom recovery emails, creating follow-up tasks, or syncing with external systems.
Extensions at this target can access information about the abandoned checkout through the `data` property in the [Action Extension API](https://shopify.dev/docs/api/admin-extensions/2025-10/target-apis/core-apis/action-extension-api). The action renders in a modal overlay, providing space for multi-step workflows, forms, and confirmations.
### Support Components (45) APIs (1)
### Supported components
* [Admin action](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/settings-and-templates/admin-action)
* [Avatar](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/clickable-chip)
* [Color field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/color-field)
* [Color picker](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/color-picker)
* [Date field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/date-picker)
* [Divider](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/email-field)
* [Grid](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/media-and-visuals/image)
* [Link](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/link)
* [Menu](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/menu)
* [Money field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/ordered-list)
* [Paragraph](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/password-field)
* [Query container](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/query-container)
* [Search field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/search-field)
* [Section](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/select)
* [Spinner](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/switch)
* [Table](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/table)
* [Text](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/text-field)
* [Thumbnail](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/media-and-visuals/thumbnail)
* [Tooltip](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/tooltip)
* [Url field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/url-field)
* [Unordered list](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/unordered-list)
### Available APIs
* [Action Extension API](https://shopify.dev/docs/api/admin-extensions/2025-10/target-apis/core-apis/action-extension-api)
Examples
### Examples
* ####
##### Description
Add an action extension that helps merchants send a personalized recovery email to the customer. This example shows how to create a modal workflow with form inputs and primary actions that operate on the abandoned checkout data.
##### jsx
```jsx
import {render} from 'preact';
import {useState} from 'preact/hooks';
export default async () => {
render(, document.body);
};
const Extension = () => {
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState('');
const [success, setSuccess] = useState(false);
const [error, setError] = useState(false);
const handleSendRecovery = async () => {
setLoading(true);
setSuccess(false);
setError(false);
const checkoutId = shopify.data.selected[0].id;
try {
// Send recovery email through your app's backend
const response = await fetch('https://your-app.com/api/send-recovery', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
checkoutId,
customMessage: message,
}),
});
if (response.ok) {
setSuccess(true);
// Close modal after a brief delay to show success message
shopify.close();
} else {
setError(true);
}
} catch (err) {
setError(true);
} finally {
setLoading(false);
}
};
return (
{success && (
Recovery email sent successfully!
)}
{error && (
Failed to send recovery email. Please try again.
)}
setMessage(event.target.value)}
details="Add a personalized message to encourage the customer to complete their purchase"
rows={4}
/>
{loading ? 'Sending...' : 'Send Recovery Email'}
shopify.close()}>
Cancel
);
};
```
* ####
##### Description
Add an action extension that generates and applies a discount code to incentivize checkout completion. This example shows how to use the \[GraphQL Admin API]\(/docs/api/admin-graphql) to fetch checkout details and create targeted discounts.
##### jsx
```jsx
import {render} from 'preact';
import {useState} from 'preact/hooks';
export default async () => {
render(, document.body);
};
const Extension = () => {
const [loading, setLoading] = useState(false);
const [discountPercent, setDiscountPercent] = useState('10');
const [success, setSuccess] = useState(false);
const [error, setError] = useState(false);
const handleCreateDiscount = async () => {
setLoading(true);
setSuccess(false);
setError(false);
const checkoutId = shopify.data.selected[0].id;
try {
// Create discount code through your app's backend
const response = await fetch('https://your-app.com/api/create-discount', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
checkoutId,
percentOff: parseInt(discountPercent, 10),
}),
});
if (response.ok) {
setSuccess(true);
shopify.close();
} else {
setError(true);
}
} catch (err) {
setError(true);
} finally {
setLoading(false);
}
};
return (
{success && (
Discount code created and sent to customer!
)}
{error && (
Failed to create discount code. Please try again.
)}
setDiscountPercent(event.currentTarget.values[0])}
>
10% off
15% off
20% off
{loading ? 'Creating...' : 'Create Discount Code'}
shopify.close()}>
Cancel
);
};
```
### Abandoned checkout details action (should render) target
`admin.abandoned-checkout-details.action.should-render`
Controls the render state of an admin action extension on the abandoned checkout details page. Use this target to conditionally show or hide your action extension based on the abandoned checkout's properties, such as cart value, customer status, or time since abandonment.
This target returns a boolean value that determines whether the corresponding action extension appears in the **More actions** menu. The extension is evaluated each time the page loads.
### Support Components (0) APIs (1)
### Supported components
\-
### Available APIs
* [Should Render API](https://shopify.dev/docs/api/admin-extensions/2025-10/target-apis/utility-apis/should-render-api)
Examples
### Examples
* ####
##### Description
Conditionally display a recovery action only for abandoned checkouts exceeding a certain value. This example demonstrates how to use the \`should-render\` target to control extension visibility based on business logic.
##### jsx
```jsx
export default async () => {
const checkoutId = shopify.data.selected[0].id;
try {
// Fetch checkout details from GraphQL Admin API
const response = await fetch(
'shopify:admin/api/graphql.json',
{
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
query: `
query GetCheckout($id: ID!) {
node(id: $id) {
... on Checkout {
totalPriceV2 {
amount
}
}
}
}
`,
variables: {id: checkoutId},
}),
}
);
const {data} = await response.json();
const totalAmount = parseFloat(data.node.totalPriceV2.amount);
// Only show action for checkouts over $100
return {display: totalAmount > 100};
} catch (err) {
console.error('Error fetching checkout:', err);
return {display: false};
}
};
```
* ####
##### Description
Conditionally display the recovery action only for checkouts abandoned within the last 24 hours when recovery rates are highest. This example demonstrates time-based filtering using the \[GraphQL Admin API]\(/docs/api/admin-graphql).
##### jsx
```jsx
export default async () => {
const checkoutId = shopify.data.selected[0].id;
try {
// Fetch checkout details including abandonment time
const {data} = await shopify.query(
`
query GetCheckout($id: ID!) {
node(id: $id) {
... on Checkout {
updatedAt
}
}
}
`,
{variables: {id: checkoutId}}
);
const updatedAt = new Date(data.node.updatedAt);
const now = new Date();
const hoursSinceAbandonment = (now - updatedAt) / (1000 * 60 * 60);
// Only show action for checkouts abandoned in the last 24 hours
return {display: hoursSinceAbandonment < 24};
} catch (err) {
console.error('Error fetching checkout:', err);
return {display: false};
}
};
```
### Abandoned checkout details block target
`admin.abandoned-checkout-details.block.render`
Renders an admin block extension inline on the abandoned checkout details page. Use this target to display contextual information, analytics, or status updates related to the abandoned checkout without requiring merchants to open a modal.
Extensions at this target appear as cards on the page and can show real-time data, insights, or quick actions. Blocks provide persistent visibility and are ideal for displaying information merchants need to see at a glance.
### Support Components (46) APIs (1)
### Supported components
* [Admin block](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/settings-and-templates/admin-block)
* [Avatar](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/clickable-chip)
* [Color field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/color-field)
* [Color picker](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/color-picker)
* [Date field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/date-picker)
* [Divider](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/email-field)
* [Form](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/form)
* [Grid](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/media-and-visuals/image)
* [Link](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/link)
* [Menu](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/actions/menu)
* [Money field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/ordered-list)
* [Paragraph](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/password-field)
* [Query container](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/query-container)
* [Search field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/search-field)
* [Section](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/select)
* [Spinner](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/switch)
* [Table](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/table)
* [Text](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/text-field)
* [Thumbnail](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/media-and-visuals/thumbnail)
* [Tooltip](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/typography-and-content/tooltip)
* [Url field](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/forms/url-field)
* [Unordered list](https://shopify.dev/docs/api/admin-extensions/2025-10/web-components/layout-and-structure/unordered-list)
### Available APIs
* [Block Extension API](https://shopify.dev/docs/api/admin-extensions/2025-10/target-apis/core-apis/block-extension-api)
Examples
### Examples
* ####
##### Description
Create a block extension that shows contextual insights about the abandoned checkout, such as customer engagement score, likelihood of recovery, and recommended actions. This example demonstrates how to present valuable information inline on the page.
##### jsx
```jsx
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
export default async () => {
render(, document.body);
};
const Extension = () => {
const [insights, setInsights] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchInsights = async () => {
const checkoutId = shopify.data.selected[0].id;
try {
// Fetch insights from your app's backend
const response = await fetch(
`https://your-app.com/api/checkout-insights?id=${checkoutId}`
);
const data = await response.json();
setInsights(data);
} catch (err) {
console.error('Error fetching insights:', err);
} finally {
setLoading(false);
}
};
fetchInsights();
}, []);
if (loading) {
return (
Loading insights...
);
}
if (!insights) {
return (
Unable to load insights
);
}
return (
Recovery Likelihood
70 ? 'success' : 'warning'}>
{insights.likelihood}%
Based on customer engagement patterns
Customer Engagement
Last active: {insights.lastActive}
Email open rate: {insights.emailOpenRate}%
Recommended Action
{insights.recommendation}
shopify.navigation.navigate('extension://send-recovery')}
variant="primary"
>
Send Recovery Email
);
};
```
* ####
##### Description
Create a block extension that shows the timeline of recovery attempts for the abandoned checkout. This example demonstrates how to present historical data that helps merchants avoid over-contacting customers.
##### jsx
```jsx
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
export default async () => {
render(, document.body);
};
const Extension = () => {
const [attempts, setAttempts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchAttempts = async () => {
const checkoutId = shopify.data.selected[0].id;
try {
// Fetch recovery attempts from your app's backend
const response = await fetch(
`https://your-app.com/api/recovery-attempts?checkoutId=${checkoutId}`
);
const data = await response.json();
setAttempts(data.attempts || []);
} catch (err) {
console.error('Error fetching attempts:', err);
} finally {
setLoading(false);
}
};
fetchAttempts();
}, []);
if (loading) {
return (
);
}
if (attempts.length === 0) {
return (
No recovery attempts yet
);
}
return (
{attempts.map((attempt) => (
{attempt.type}
{attempt.date}
{attempt.description}
))}
);
};
```
***
## Best practices
* **Prioritize high-value recovery opportunities:** Use the `should-render` target to show recovery actions only for abandoned checkouts that meet specific criteria, such as cart value thresholds, returning customers, or carts with specific product types that warrant recovery efforts.
* **Display time-sensitive information:** Show how long ago the checkout was abandoned in your block extensions to help merchants prioritize recent abandonments when recovery rates are typically higher.
* **Enrich with customer context:** Pull in additional customer data like past purchase history, email engagement rates, or loyalty status to help merchants personalize their recovery approach and gauge recovery likelihood.
* **Account for inventory changes:** When displaying abandoned cart contents, indicate if products are still in stock or if pricing has changed since abandonment, as this affects recovery strategy.
* **Respect recovery fatigue:** Consider tracking how many recovery attempts have already been made for a checkout to avoid over-contacting customers and provide this context to merchants in your extensions.
***
## Limitations
* **Single target per module:** Each `[[extensions.targeting]]` entry in your [TOML configuration](https://shopify.dev/docs/api/admin-extensions/2025-10#configuration) maps one target to one module file.
* **Checkout data retention:** [Abandoned checkouts are automatically removed](https://help.shopify.com/manual/promoting-marketing/create-marketing/abandoned-checkouts) when they're created more than three months ago, haven't been updated in one month, and have no associated transaction or order.
* **Customer email limitations:** Abandoned checkout data might not always include customer email addresses if the customer didn't provide one before abandoning. Your extensions should handle cases where contact information is incomplete or missing. The `customer`, `billingAddress`, and `shippingAddress` fields are [nullable](https://shopify.dev/docs/api/admin-graphql/latest/objects/AbandonedCheckout).
* **Block target visibility:** Block extensions must be manually [added and pinned](https://help.shopify.com/manual/apps/working-with-apps#add-app-blocks-to-your-shopify-admin) 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.
***