Shopify Admin Extensions

https://shopify.dev/docs/api/admin-extensions/2025-10-rc
Admin
Shopify Admin UI extensions enable developers to surface contextual app functionality directly...
Tokens:4,471
Snippets:19
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Handling Click Events in Preact Admin Extension

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/index

This example demonstrates how to handle click events on a Shopify Admin UI extension button using Preact. It shows two methods: using the `onClick` prop directly in JSX and using `addEventListener` with a standard DOM element. Both methods achieve the same result of logging a message when the button is clicked.

```jsx
export default function HandlingEvents() {
  const handleClick = () => {
    console.log('s-button clicked');
  };

  return <s-button onClick={handleClick}>Click me</s-button>;
}
```

```jsx
export default function HandlingEvents() {
  const handleClick = () => {
    console.log('s-button clicked');
  };

  const button = document.createElement('s-button');
  button.addEventListener('click', handleClick);
  document.body.appendChild(button);
}
```

--------------------------------

### Deploying Shopify Extensions using CLI

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/index

Provides instructions on how to deploy a Shopify app and its extensions using the Shopify CLI. It includes navigating to the app's directory and executing the deploy command.

```bash
# navigate to your app's root directory:
cd my-app
  
# deploy your app and its extensions:
shopify app deploy
  
# follow the steps to deploy
  
```

--------------------------------

### Selecting a Product with Resource Picker

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/index

Shows how to use the `shopify.resourcePicker` API to allow users to select a product from a search-based interface and receive the selected product data in the extension.

```javascript
import { render } from 'preact';
  
export default async () => {
render(<Extension />, document.body);
}
  
function Extension() {
const handleSelectProduct = async () => {
const selected = await shopify.resourcePicker({ type: 'product' });
console.log(selected);
};
  
return <s-button onClick={handleSelectProduct}>Select product</s-button>;
}
  
```

--------------------------------

### Product Details Configuration Extension

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

This extension target allows developers to render custom UI on the product details page. It enables configuration of product bundles and other product-specific settings.

```APIDOC
Target: admin.product-details.configuration.render
Description: Renders custom UI on the product details page for configuration purposes.
Appears On: Product details page
```

--------------------------------

### Shopify Admin Extension Target Implementation

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

This snippet shows the JavaScript implementation for registering admin UI extension targets. It assumes a `shopify.extension.toml` file has been configured to point to this module. The code would typically involve calling Shopify's extension API to register specific target locations.

```javascript
// admin_extension.js

// Assume Shopify's extension API is available globally or imported
// Example: Shopify.extend(extensionConfig);

const extensionConfig = {
  // ... other extension configurations
  // Example target registration:
  // targets: [
  //   {
  //     name: "admin.product.details.block.render",
  //     module: "./components/ProductDetailsBlock"
  //   }
  // ]
};

// Shopify.extend(extensionConfig);

```

--------------------------------

### Product Variant Details Configuration Extension

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

This extension target allows developers to render custom UI on the product variant details page. It facilitates the configuration of product bundles and variant-specific settings.

```APIDOC
Target: admin.product-variant-details.configuration.render
Description: Renders custom UI on the product variant details page for configuration purposes.
Appears On: Product variant details page
```

--------------------------------

### Preact Admin Extension with State

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/index

This code snippet shows a basic Admin UI extension scaffolded with Preact. It utilizes the `useState` hook from Preact to manage a counter and renders a text display and a button. Clicking the button increments the counter, demonstrating state management within the extension.

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

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

function Extension() {
  const [count, setCount] = useState(0);

  return (
    <>
      <s-text>Count: {count}</s-text>
      <s-button onClick={() => setCount(count + 1)}>
        Increment
      </s-button>
    </>
  );
}
```

--------------------------------

### App Authentication with fetch()

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/network-features

Demonstrates how Admin UI extensions can make authenticated calls to your app's backend. When using `fetch()` to your app's auth domain, an `Authorization` header with a Shopify OpenID Connect ID Token is automatically added.

```javascript
import {render} from 'preact';
import {useEffect, useState} from 'preact/hooks';
  
export default async () => {
  render(<Extension />, document.body);
}
  
// Get product info from app backend
async function getProductInfo(id) {
  const res = await fetch(`/api/products/${id}`);
  return res.json();
}
  
function Extension() {
  // Contextual "input" data passed to this extension:
  const {data} = shopify;
  const productId = data.selected?.[0]?.id;
  
  const [productInfo, setProductInfo] = useState();
  useEffect(() => {
    getProductInfo(productId).then(setProductInfo);
  }, [productId]);
  
  return (
    <s-admin-block title="Product Info">
      <s-text>Info: {productInfo?.title}</s-text>
    </s-admin-block>
  );
}
```

--------------------------------

### Generate Shopify Admin Extension

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/index

This snippet demonstrates how to generate a new Shopify Admin UI extension using the Shopify CLI. It includes steps for initializing a new app if one doesn't exist and then generating the extension within the app's directory. Ensure you are using Shopify CLI version 3.80.0 or higher.

```bash
POLARIS_UNIFIED=true shopify app init --name my-app

cd my-app

POLARIS_UNIFIED=true shopify app generate extension
```

--------------------------------

### Shopify Admin Protocol Link

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/network-features

Constructs a URL to a specific product within the Shopify Admin using the `shopify:admin` protocol.

```html
<s-link href="shopify:admin/products/1234567890">Link to Product Page</s-link>
```

--------------------------------

### Shopify Admin Extension Target Registration

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

This snippet demonstrates how to define and register targets for Shopify Admin UI extensions. Targets specify the locations within the Shopify admin where your extension will be visible. Registration involves configuring the `shopify.extension.toml` file and referencing the corresponding JavaScript module.

```toml
[extension]
# ... other configurations
module = "./admin_extension.js"

```

--------------------------------

### Direct Shopify Admin API Access

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/network-features

Shows how to make authenticated Shopify Admin GraphQL API requests directly from your extension using `fetch()`. These calls are handled directly by Shopify and are fast. Direct API requests use online access mode by default.

```javascript
import {render} from 'preact';
  
export default async () => {
  const productId = shopify.data.selected?.[0]?.id;
  const product = await getProduct(productId);
  render(<Extension product={product} />, document.body);
};
  
async function getProduct(id) {
  const res = await fetch('shopify:admin/api/graphql.json', {
    method: 'POST',
    body: JSON.stringify({
      query: `
        query GetProduct($id: ID!) {
          product(id: $id) {
            title
          }
        }
      `,
      variables: {id},
    }),
  });
  const {data} = await res.json();
  return data.product;
}
  
function Extension({product}) {
  return (
    <s-admin-block heading="Product Info">
      <s-text>The selected product title is {product.title}</s-text>
    </s-admin-block>
  );
}
```

--------------------------------

### Using Forms in Block Extensions

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/index

Demonstrates how to use the Form component in a Block extension to manage form state and interact with the resource page's contextual save bar. It covers handling input changes, form submission, and resetting dirty states based on default values.

```javascript
import { render } from 'preact';
import { useState } from 'preact/hooks';
  
export default async () => {
render(<Extension />, document.body);
}
  
const defaultValues = {
text: 'default value',
number: 50,
};
  
function Extension() {
const [textValue, setTextValue] = useState('');
const [numberValue, setNumberValue] = useState('');
  
return (
<s-admin-block title="My Block Extension">
<s-form
onSubmit={(event) => {
event.waitUntil(fetch('app:save/data'));
console.log('submit', {textValue, numberValue});
}
onReset={() => console.log('automatically reset values')}
>
<s-stack direction="block" gap="base">
<s-text-field
label="Default Value"
name="my-text"
defaultValue={defaultValues.text}
value={textValue}
onChange={(e) => setTextValue(e.target.value)}
/>
<s-number-field
label="Percentage field"
name="my-number"

```

--------------------------------

### Shopify Admin Print Action Locations

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

Defines targets for rendering custom print actions on order and product pages within the Shopify Admin. This includes actions for individual orders/products and for selected items in index views.

```APIDOC
admin.order-details.print-action.render
  Description: Renders a print action on the order details page.

admin.product-details.print-action.render
  Description: Renders a print action on the product details page.

admin.order-index.selection-print-action.render
  Description: Renders a print action for selected orders in the order index.

admin.product-index.selection-print-action.render
  Description: Renders a print action for selected products in the product index.
```

--------------------------------

### Shopify Admin Action Locations

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

Defines targets for rendering custom actions on specific pages within the Shopify Admin. These actions can be displayed on product variant details, product details, and purchase option cards.

```APIDOC
admin.product-variant-details.action.render
  Description: Renders an action on the product variant details page.

admin.product-purchase-option.action.render
  Description: Renders an action on the product details page when selling plans exist.

admin.product-variant-purchase-option.action.render
  Description: Renders an action on the product variant details page when selling plans exist.
```

--------------------------------

### Shopify Customer Segmentation Locations

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

Specifies targets for rendering extensions within the customer segment editor in the Shopify Admin. This allows for customization of customer segment templating and editing.

```APIDOC
admin.customers.segmentation-templates.render
  Description: Renders extensions within the customer segment editor for templating and editing.
```

--------------------------------

### Shopify Admin Block Locations

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

Specifies targets for rendering custom blocks on various resource detail pages in the Shopify Admin. This includes abandoned checkouts, catalogs, collections, companies, customers, draft orders, gift cards, discounts, orders, products, and product variants.

```APIDOC
admin.abandoned-checkout-details.block.render
  Description: Renders a block on the abandoned checkout details page.

admin.catalog-details.block.render
  Description: Renders a block on the catalog details page.

admin.collection-details.block.render
  Description: Renders a block on the collection details page.

admin.company-details.block.render
  Description: Renders a block on the company details page.

admin.company-location-details.block.render
  Description: Renders a block on the company location details page.

admin.customer-details.block.render
  Description: Renders a block on the customer details page.

admin.draft-order-details.block.render
  Description: Renders a block on the draft order details page.

admin.gift-card-details.block.render
  Description: Renders a block on the gift card details page.

admin.discount-details.function-settings.render
  Description: Renders function settings for a discount on the discount details page.

admin.order-details.block.render
  Description: Renders a block on the order details page.

admin.product-details.block.render
  Description: Renders a block on the product details page.

admin.product-variant-details.block.render
  Description: Renders a block on the product variant details page.
```

--------------------------------

### Shopify Admin Action Locations

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

This section details the various locations within the Shopify admin interface where custom action extensions can be rendered. Each location is identified by a specific target string that developers use to associate their extensions with a particular page or context.

```APIDOC
admin.abandoned-checkout-details.action.render
  Description: Renders an action extension on the abandoned checkout details page.

admin.catalog-details.action.render
  Description: Renders an action extension on the catalog details page.

admin.collection-details.action.render
  Description: Renders an action extension on the collection details page.

admin.collection-index.action.render
  Description: Renders an action extension on the collection index page (table of multiple collections).

admin.company-details.action.render
  Description: Renders an action extension on the company details page.

admin.customer-details.action.render
  Description: Renders an action extension on the customer details page.

admin.customer-index.action.render
  Description: Renders an action extension on the customer index page (table of multiple customers).

admin.customer-index.selection-action.render
  Description: Renders an action extension on the customer index page when multiple customers are selected.

admin.customer-segment-details.action.render
  Description: Renders an action extension on the customer segment details page.

admin.discount-details.action.render
  Description: Renders an action extension on the discount details page.

admin.discount-index.action.render
  Description: Renders an action extension on the discount index page (table of multiple discounts).

admin.draft-order-details.action.render
  Description: Renders an action extension on the draft order details page.

admin.draft-order-index.action.render
  Description: Renders an action extension on the draft order index page (table of multiple draft orders).

admin.draft-order-index.selection-action.render
  Description: Renders an action extension on the draft order index page when multiple draft orders are selected.

admin.gift-card-details.action.render
  Description: Renders an action extension on the gift card details page.

admin.order-details.action.render
  Description: Renders an action extension on the order details page.

admin.order-fulfilled-card.action.render
  Description: Renders an action extension on the order details page, specifically within a card showing fulfillment details. Only available if the app is selected as the fulfillment app for the order.

admin.order-index.action.render
  Description: Renders an action extension on the order index page (table of multiple orders).

admin.order-index.selection-action.render
  Description: Renders an action extension on the order index page when multiple orders are selected.

admin.product-details.action.render
  Description: Renders an action extension on the product details page.

admin.product-index.action.render
  Description: Renders an action extension on the product index page (table of multiple products).

admin.product-index.selection-action.render
  Description: Renders an action extension on the product index page when multiple products are selected.

admin.product-variant-details.action.render
  Description: Renders an action extension on the product variant details page.
```

--------------------------------

### Checkout Rules Validation Settings Extension

Source: https://shopify.dev/docs/api/admin-extensions/2025-10-rc/extension-targets

This extension target allows developers to render custom UI within the checkout rules section of the settings page. It enables merchants to define and manage validation rules for their checkout process.

```APIDOC
Target: admin.settings.validation.render
Description: Renders custom UI in the checkout rules section of the settings page for validation rule configuration.
Appears On: Settings page (checkout rules section)
```
Tokens:
Raw