Skip to main content

Products

Product pages allow merchants to create and manage their product catalog, including product details, variants, inventory, pricing, and media. Extensions on these pages help merchants enrich product data, configure bundles, manage purchase options, or integrate with external systems.

Anchor to Use casesUse cases

  • Product data enrichment: Enhance product information with supplier data, certifications, sustainability metrics, or extended attributes from external product information management (PIM) systems.
  • Bundle and kit configuration: Configure product bundles, multi-packs, or kits with component selection, pricing rules, and inventory management across bundle components.
  • Subscription and purchase options: Set up subscription plans, pre-order options, or custom purchase terms for products through integrated subscription management platforms.
  • Marketplace publishing: Sync product data to external marketplaces like Amazon, eBay, or Google Shopping, including descriptions, pricing, inventory, and marketplace-specific attributes.
  • Custom label and document generation: Generate product labels, barcodes, spec sheets, or compliance documents based on product attributes and external data sources.
Shopify admin product pages showing all available extension target locations.

Anchor to Product details targetsProduct details targets

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

Extensions can query and mutate Shopify data using the direct API, or call your app's backend for custom business logic and external integrations.

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

admin.product-details.action.render

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

Extensions at this target can access product 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 (45)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState(null);
const [warehouse, setWarehouse] = useState('main');
const [updateAll, setUpdateAll] = useState(true);

const handleSync = async () => {
setLoading(true);
setError(null);
const productId = shopify.data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/inventory/sync', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
productId,
warehouse,
updateAllVariants: updateAll,
}),
});

if (response.ok) {
setSuccess(true);
shopify.close();
} else {
const data = await response.json();
setError(data.message || 'Failed to sync inventory');
}
} catch (err) {
setError('Connection error. Please try again.');
} finally {
setLoading(false);
}
};

return (
<s-admin-action heading="Sync Inventory">
{success && (
<s-banner tone="success" dismissible={false}>
Inventory synced successfully!
</s-banner>
)}
{error && (
<s-banner tone="critical" dismissible={false}>
{error}
</s-banner>
)}

<s-section heading="Sync Options">
<s-stack gap="base">
<s-select
label="Warehouse"
value={warehouse}
onChange={(event) => setWarehouse(event.currentTarget.value)}
>
<s-option value="main">Main Warehouse</s-option>
<s-option value="east">East Coast DC</s-option>
<s-option value="west">West Coast DC</s-option>
</s-select>

<s-checkbox
label="Update all variants"
checked={updateAll}
onChange={(event) => setUpdateAll(event.currentTarget.checked)}
/>

<s-text color="subdued">
Inventory levels will be fetched from your warehouse system.
</s-text>
</s-stack>
</s-section>

<s-button
slot="primary-action"
onClick={handleSync}
disabled={loading || success}
>
{loading ? 'Syncing...' : 'Sync Inventory'}
</s-button>
<s-button slot="secondary-actions" onClick={() => shopify.close()}>
Cancel
</s-button>
</s-admin-action>
);
};

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

admin.product-details.action.should-render

Controls the render state of an admin action extension on the product details page. Use this target to conditionally show or hide your action extension based on the product'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

jsx

export default async () => {
const productId = shopify.data.selected[0].id;

try {
// Check with your app backend if product is in catalog
const response = await fetch('https://your-app.com/api/check-catalog', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
productId,
checkType: 'catalog-membership',
}),
});

if (!response.ok) {
console.error('Catalog check failed:', response.status);
return { display: false };
}

const result = await response.json();

// Only show action if product exists in external catalog
return { display: result.isInCatalog === true };
} catch (err) {
console.error('Error checking catalog status:', err);
return { display: false };
}
};

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

admin.product-details.block.render

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

Extensions at this target can access product 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 (46)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const [competitors, setCompetitors] = useState([]);
const [lastUpdated, setLastUpdated] = useState(null);

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

const fetchCompetitorPricing = async () => {
setLoading(true);
setError(false);
const productId = shopify.data.selected[0].id;

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

if (response.ok) {
const data = await response.json();
setCompetitors(data.competitors || []);
setLastUpdated(new Date().toLocaleTimeString());
} else {
setError(true);
}
} catch (err) {
setError(true);
} finally {
setLoading(false);
}
};

return (
<s-admin-block heading="Competitor Pricing">
{loading && <s-spinner size="base" />}
{error && (
<s-banner tone="critical" dismissible={false}>
Failed to load competitor pricing data.
</s-banner>
)}

{!loading && !error && competitors.length === 0 && (
<s-text color="subdued">No competitor data available for this product.</s-text>
)}

{!loading && !error && competitors.length > 0 && (
<s-stack gap="base">
{competitors.map((competitor, index) => (
<s-box key={index}>
<s-stack gap="small">
<s-text type="strong">{competitor.name}</s-text>
<s-stack gap="small">
<s-text>Price: ${competitor.price}</s-text>
{competitor.price < competitor.yourPrice ? (
<s-badge tone="critical">Lower</s-badge>
) : (
<s-badge tone="success">Higher</s-badge>
)}
</s-stack>
</s-stack>
</s-box>
))}
<s-divider />
<s-text color="subdued">Last updated: {lastUpdated}</s-text>
<s-button onClick={fetchCompetitorPricing}>Refresh Prices</s-button>
</s-stack>
)}
</s-admin-block>
);
};

Anchor to Product details configuration ,[object Object]Product details configuration target

admin.product-details.configuration.render

Renders a configuration interface for product bundles on product details pages. This target allows merchants to configure component products, quantities, and pricing for bundle configurations at the product level. Use this target when your app needs to provide merchant-facing configuration UI for bundle components and options.

Learn how to add a product configuration extension.

Support
Components (46)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState(null);
const [warehouse, setWarehouse] = useState('main');
const [updateAll, setUpdateAll] = useState(true);

const handleSync = async () => {
setLoading(true);
setError(null);
const productId = shopify.data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/inventory/sync', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
productId,
warehouse,
updateAllVariants: updateAll,
}),
});

if (response.ok) {
setSuccess(true);
shopify.close();
} else {
const data = await response.json();
setError(data.message || 'Failed to sync inventory');
}
} catch (err) {
setError('Connection error. Please try again.');
} finally {
setLoading(false);
}
};

return (
<s-admin-action heading="Sync Inventory">
{success && (
<s-banner tone="success" dismissible={false}>
Inventory synced successfully!
</s-banner>
)}
{error && (
<s-banner tone="critical" dismissible={false}>
{error}
</s-banner>
)}

<s-section heading="Sync Settings">
<s-stack gap="base">
<s-select
label="Warehouse"
value={warehouse}
onChange={(event) => setWarehouse(event.currentTarget.value)}
>
<s-option value="main">Main Warehouse</s-option>
<s-option value="east">East Coast DC</s-option>
<s-option value="west">West Coast DC</s-option>
</s-select>

<s-checkbox
label="Update all variants"
checked={updateAll}
onChange={(event) => setUpdateAll(event.currentTarget.checked)}
/>

<s-text color="subdued">
Inventory levels will be fetched from your warehouse system.
</s-text>
</s-stack>
</s-section>

<s-button
slot="primary-action"
onClick={handleSync}
disabled={loading || success}
>
{loading ? 'Syncing...' : 'Sync Inventory'}
</s-button>
<s-button slot="secondary-actions" onClick={() => shopify.close()}>
Cancel
</s-button>
</s-admin-action>
);
};

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

admin.product-details.print-action.render

Renders a print action extension on the product details page that merchants can access from the Print menu. Use this target to generate custom printable documents like product labels, barcodes, specification sheets, or compliance documents. Extensions at this target can access the product ID through the data property in the Action Extension API and use the direct API to fetch complete product details before generating print output.

Support
Components (45)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState(null);
const [warehouse, setWarehouse] = useState('main');
const [updateAll, setUpdateAll] = useState(true);

const handleSync = async () => {
setLoading(true);
setError(null);
const productId = shopify.data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/inventory/sync', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
productId,
warehouse,
updateAllVariants: updateAll,
}),
});

if (response.ok) {
setSuccess(true);
shopify.close();
} else {
const data = await response.json();
setError(data.message || 'Failed to sync inventory');
}
} catch (err) {
setError('Connection error. Please try again.');
} finally {
setLoading(false);
}
};

return (
<s-admin-action heading="Sync Inventory">
{success && (
<s-banner tone="success" dismissible={false}>
Inventory synced successfully!
</s-banner>
)}
{error && (
<s-banner tone="critical" dismissible={false}>
{error}
</s-banner>
)}

<s-section heading="Sync Settings">
<s-stack gap="base">
<s-select
label="Warehouse"
value={warehouse}
onChange={(event) => setWarehouse(event.currentTarget.value)}
>
<s-option value="main">Main Warehouse</s-option>
<s-option value="east">East Coast DC</s-option>
<s-option value="west">West Coast DC</s-option>
</s-select>

<s-checkbox
label="Update all variants"
checked={updateAll}
onChange={(event) => setUpdateAll(event.currentTarget.checked)}
/>

<s-text color="subdued">
Inventory levels will be fetched from your warehouse system.
</s-text>
</s-stack>
</s-section>

<s-button
slot="primary-action"
onClick={handleSync}
disabled={loading || success}
>
{loading ? 'Syncing...' : 'Sync Inventory'}
</s-button>
<s-button slot="secondary-actions" onClick={() => shopify.close()}>
Cancel
</s-button>
</s-admin-action>
);
};

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

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

Controls the render state of an admin action extension on the product details page. Use this target to conditionally show or hide your action extension based on the product'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

jsx

export default async () => {
const productId = shopify.data.selected[0].id;

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

if (!response.ok) {
console.error('Print label check failed:', response.status);
return { display: false };
}

const result = await response.json();

return { display: result.hasLabels === true };
} catch (err) {
console.error('Error checking print label status:', err);
return { display: false };
}
};

Anchor to Product details reorder ,[object Object]Product details reorder target

admin.product-details.reorder.render

Renders a block extension that provides custom reordering functionality on the product details page. This target allows you to display reorder controls, quick reorder buttons, or inventory replenishment workflows directly within the product editor. Use this target when your app needs to help merchants quickly restock or reorder products based on inventory levels or sales velocity.

Support
Components (46)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState(null);
const [warehouse, setWarehouse] = useState('main');
const [updateThreshold, setUpdateThreshold] = useState(false);

const handleSync = async () => {
setLoading(true);
setError(null);
const productId = shopify.data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/inventory/sync', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
productId,
warehouse,
updateThreshold,
}),
});

if (response.ok) {
setSuccess(true);
shopify.close();
} else {
const data = await response.json();
setError(data.message || 'Failed to sync inventory');
}
} catch (err) {
setError('Connection error. Please try again.');
} finally {
setLoading(false);
}
};

return (
<s-admin-action heading="Sync Inventory">
{success && (
<s-banner tone="success" dismissible={false}>
Inventory synced successfully!
</s-banner>
)}
{error && (
<s-banner tone="critical" dismissible={false}>
{error}
</s-banner>
)}

<s-section heading="Sync Settings">
<s-stack gap="base">
<s-select
label="Warehouse"
value={warehouse}
onChange={(e) => setWarehouse(e.currentTarget.value)}
>
<s-option value="main">Main Warehouse</s-option>
<s-option value="east">East Coast DC</s-option>
<s-option value="west">West Coast DC</s-option>
</s-select>

<s-checkbox
label="Update low stock threshold"
checked={updateThreshold}
onChange={(e) => setUpdateThreshold(e.currentTarget.checked)}
/>

<s-text color="subdued">
This will fetch the latest inventory counts from your warehouse system.
</s-text>
</s-stack>
</s-section>

<s-button
slot="primary-action"
onClick={handleSync}
disabled={loading || success}
>
{loading ? 'Syncing...' : 'Sync Inventory'}
</s-button>
<s-button slot="secondary-actions" onClick={() => shopify.close()}>
Cancel
</s-button>
</s-admin-action>
);
};

Anchor to Product index targetsProduct index targets

Use action targets to extend the product index page with bulk operations and workflows that help merchants manage multiple products efficiently.

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

admin.product-index.action.render

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

Extensions at this target can access product 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 (45)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState(null);
const [warehouse, setWarehouse] = useState('main');
const [updateZeroStock, setUpdateZeroStock] = useState(true);

const selectedCount = shopify.data.selected.length;

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

const productIds = shopify.data.selected.map(item => item.id);

try {
const response = await fetch('https://your-app.com/api/inventory/sync', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
productIds,
warehouse,
updateZeroStock,
}),
});

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

return (
<s-admin-action heading="Sync Inventory">
{success && (
<s-banner tone="success" dismissible={false}>
Successfully synced inventory for {selectedCount} product(s)!
</s-banner>
)}
{error && (
<s-banner tone="critical" dismissible={false}>
{error}
</s-banner>
)}

<s-section heading="Sync Settings">
<s-stack gap="base">
<s-text color="subdued">
Syncing {selectedCount} selected product(s) from warehouse system.
</s-text>

<s-select
label="Warehouse Location"
value={warehouse}
onChange={(e) => setWarehouse(e.currentTarget.value)}
>
<s-option value="main">Main Warehouse</s-option>
<s-option value="east">East Distribution Center</s-option>
<s-option value="west">West Distribution Center</s-option>
</s-select>

<s-checkbox
label="Update products with zero stock"
checked={updateZeroStock}
onChange={(e) => setUpdateZeroStock(e.currentTarget.checked)}
/>
</s-stack>
</s-section>

<s-button
slot="primary-action"
onClick={handleSync}
disabled={loading || success}
>
{loading ? 'Syncing...' : 'Sync Inventory'}
</s-button>
<s-button slot="secondary-actions" onClick={() => shopify.close()}>
Cancel
</s-button>
</s-admin-action>
);
};

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

admin.product-index.action.should-render

Controls the render state of an admin action extension on the product index page. Use this target to conditionally show or hide your action extension based on the product'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

jsx

export default async () => {
const selectedIds = shopify.data.selected.map(item => item.id);

try {
// Check with your app backend if products are in your catalog
const response = await fetch('https://your-app.com/api/check-catalog-products', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
productIds: selectedIds,
}),
});

if (!response.ok) {
console.error('Catalog check failed:', response.status);
return { display: false };
}

const result = await response.json();

// Only show action if all selected products are in the catalog
return { display: result.allProductsInCatalog };
} catch (err) {
console.error('Error checking product catalog:', err);
return { display: false };
}
};

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

admin.product-index.selection-action.render

Renders a selection action extension on the product index page when merchants select multiple products. Merchants can access this extension from the More actions menu. Use this target to provide bulk operations that work on multiple products simultaneously, such as batch tagging, bulk export, price updates, or marketplace publishing. Extensions at this target can access all selected product IDs through the data property in the Action Extension API.

Support
Components (45)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState(null);
const [overwriteManual, setOverwriteManual] = useState(false);
const [syncedCount, setSyncedCount] = useState(0);

const selectedProducts = shopify.data.selected;

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

try {
const productIds = selectedProducts.map(item => item.id);

const response = await fetch('https://your-app.com/api/inventory/sync', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
productIds,
overwriteManualAdjustments: overwriteManual,
}),
});

if (response.ok) {
const result = await response.json();
setSyncedCount(result.syncedCount || productIds.length);
setSuccess(true);
shopify.close();
} else {
const errorData = await response.json();
setError(errorData.message || 'Failed to sync inventory');
}
} catch (err) {
setError('Connection error. Please try again.');
} finally {
setLoading(false);
}
};

return (
<s-admin-action heading="Sync Inventory from Warehouse">
{success && (
<s-banner tone="success" dismissible={false}>
Successfully synced inventory for {syncedCount} products!
</s-banner>
)}
{error && (
<s-banner tone="critical" dismissible={false}>
{error}
</s-banner>
)}

<s-section heading="Sync Options">
<s-stack gap="base">
<s-text color="subdued">
{selectedProducts.length} product(s) selected for inventory sync
</s-text>
<s-checkbox
label="Overwrite manual inventory adjustments"
checked={overwriteManual}
onChange={(event) => setOverwriteManual(event.currentTarget.checked)}
/>
</s-stack>
</s-section>

<s-button
slot="primary-action"
onClick={handleSync}
disabled={loading || success}
>
{loading ? 'Syncing...' : 'Sync Inventory'}
</s-button>
<s-button slot="secondary-actions" onClick={() => shopify.close()}>
Cancel
</s-button>
</s-admin-action>
);
};

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

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

Controls the render state of a selection action extension on the product index page. Use this target to conditionally show or hide your action extension based on the product'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

jsx

export default async () => {
const selectedIds = shopify.data.selected.map(item => item.id);

try {
// Check with app backend if products are in managed catalog
const response = await fetch('https://your-app.com/api/check-catalog-products', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
productIds: selectedIds,
}),
});

if (!response.ok) {
console.error('Backend check failed');
return { display: false };
}

const result = await response.json();
// Only show action if all selected products are in the catalog
return { display: result.allInCatalog };
} catch (err) {
console.error('Error checking catalog status:', err);
return { display: false };
}
};

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

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

Renders a print action extension on the product index page when merchants select multiple products. Merchants can access this extension from the Print menu. Use this target to generate batch print documents like barcode labels, price tags, inventory sheets, or product catalogs for multiple products at once. Extensions at this target can access all selected product IDs through the data property in the Action Extension API and use the direct API to fetch complete product details for print generation.

Support
Components (45)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState(null);
const [warehouse, setWarehouse] = useState('main');
const [overwriteManual, setOverwriteManual] = useState(false);

const selectedCount = shopify.data.selected.length;

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

const productIds = shopify.data.selected.map(item => item.id);

try {
const response = await fetch('https://your-app.com/api/inventory/sync', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
productIds,
warehouse,
overwriteManual,
}),
});

if (response.ok) {
const result = await response.json();
setSuccess(true);
shopify.close();
} else {
const errorData = await response.json();
setError(errorData.message || 'Failed to sync inventory');
}
} catch (err) {
setError('Connection error. Please try again.');
} finally {
setLoading(false);
}
};

return (
<s-admin-action heading="Sync Inventory">
{success && (
<s-banner tone="success" dismissible={false}>
Successfully synced inventory for {selectedCount} product(s)!
</s-banner>
)}
{error && (
<s-banner tone="critical" dismissible={false}>
{error}
</s-banner>
)}

<s-section heading="Sync Settings">
<s-stack gap="base">
<s-text color="subdued">
Syncing {selectedCount} selected product(s) from warehouse system.
</s-text>

<s-select
label="Warehouse Location"
value={warehouse}
onChange={(event) => setWarehouse(event.currentTarget.value)}
>
<s-option value="main">Main Warehouse</s-option>
<s-option value="east">East Distribution Center</s-option>
<s-option value="west">West Distribution Center</s-option>
</s-select>

<s-checkbox
label="Overwrite manually adjusted quantities"
checked={overwriteManual}
onChange={(event) => setOverwriteManual(event.currentTarget.checked)}
/>
</s-stack>
</s-section>

<s-button
slot="primary-action"
onClick={handleSync}
disabled={loading || success}
>
{loading ? 'Syncing...' : 'Sync Inventory'}
</s-button>
<s-button slot="secondary-actions" onClick={() => shopify.close()}>
Cancel
</s-button>
</s-admin-action>
);
};

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

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

Controls the render state of an admin action extension on the product index page. Use this target to conditionally show or hide your action extension based on the product'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

jsx

export default async () => {
const selectedIds = shopify.data.selected.map(item => item.id);

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

if (!response.ok) {
console.error('Barcode check failed:', response.status);
return { display: false };
}

const result = await response.json();

return { display: result.allHaveBarcodes === true };
} catch (err) {
console.error('Error checking barcode status:', err);
return { display: false };
}
};

Anchor to Product purchase option targetsProduct purchase option targets

Use action targets to extend the product purchase option page with workflows and operations.

Extensions can query and mutate Shopify data using the direct API, or call your app's backend for custom business logic and external integrations.

Anchor to Product purchase option action ,[object Object]Product purchase option action target

admin.product-purchase-option.action.render

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

Extensions at this target can access product 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 (45)
APIs (1)

Supported components

Available APIs

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

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

const Extension = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState(null);
const [syncType, setSyncType] = useState('full');
const [updatePricing, setUpdatePricing] = useState(false);

const handleSync = async () => {
setLoading(true);
setError(null);
const purchaseOptionId = shopify.data.selected[0].id;

try {
const response = await fetch('https://your-app.com/api/inventory/sync', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
purchaseOptionId,
syncType,
updatePricing,
}),
});

if (response.ok) {
setSuccess(true);
shopify.close();
} else {
const data = await response.json();
setError(data.message || 'Sync failed. Please try again.');
}
} catch (err) {
setError('Connection error. Check your network.');
} finally {
setLoading(false);
}
};

return (
<s-admin-action heading="Sync Purchase Option Inventory">
{success && (
<s-banner tone="success" dismissible={false}>
Inventory synced successfully!
</s-banner>
)}
{error && (
<s-banner tone="critical" dismissible={false}>
{error}
</s-banner>
)}

<s-section heading="Sync Settings">
<s-stack gap="base">
<s-select
label="Sync type"
value={syncType}
onChange={(event) => setSyncType(event.currentTarget.value)}
>
<s-option value="full">Full sync (all variants)</s-option>
<s-option value="delta">Delta sync (changes only)</s-option>
<s-option value="availability">Availability only</s-option>
</s-select>

<s-checkbox
label="Also update pricing from external system"
checked={updatePricing}
onChange={(event) => setUpdatePricing(event.currentTarget.checked)}
/>

<s-text color="subdued">
This will sync inventory levels for subscriptions and pre-orders.
</s-text>
</s-stack>
</s-section>

<s-button
slot="primary-action"
onClick={handleSync}
disabled={loading || success}
>
{loading ? 'Syncing...' : 'Sync Inventory'}
</s-button>
<s-button slot="secondary-actions" onClick={() => shopify.close()}>
Cancel
</s-button>
</s-admin-action>
);
};

Anchor to Best practicesBest practices

  • Query only the fields you need: When fetching product data using GraphQL, request only the specific fields your extension displays. For example, if you're showing inventory levels, don't fetch media or metafields. This reduces query costs and improves extension load times.
  • Handle product status in workflows: Before syncing products to external systems or marketplaces, check the product's status (active, draft, archived). Some workflows should only operate on active products, while others may need to handle all statuses differently.
  • Validate bundle components before saving: When building bundle configuration extensions, verify that all component products are active and have available inventory before allowing merchants to save the bundle configuration. This prevents merchants from creating bundles with unavailable components.
  • Consider variant count in displays: Products with many variants require different UI approaches than simple products. When displaying variant data, implement pagination or collapsible sections for products with many variants to maintain good performance.
  • Handle product-level vs variant-level data correctly: Some data lives at the product level (title, description, media) while other data is variant-specific (SKU, price, inventory). When syncing to external systems, ensure you're pulling data from the correct level to avoid inconsistencies.

Anchor to LimitationsLimitations

  • Single target per module: Each [[extensions.targeting]] entry in your TOML configuration maps one target to one module file.
  • Purchase option target visibility: The admin.product-purchase-option.action.render target only appears when the product has a selling plan group associated with it.
  • Configuration target availability: The admin.product-details.configuration.render target only appears for products configured as bundles.
  • 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?