---
title: Admin block
description: >-
  The admin block component enables admin block extensions to appear inline on
  resource pages. Use admin block to create embedded extension experiences that
  feel native to the Shopify admin interface, with automatic height management,
  expansion controls, and content overflow handling.
api_version: 2026-01
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-block
  md: >-
    https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-block.md
---

# Admin block

**Requires the \[Block Extension API]\(/docs/api/admin-extensions/2026-01/target-apis/core-apis/block-extension-api), \[Product Details Configuration API]\(/docs/api/admin-extensions/2026-01/target-apis/contextual-apis/product-details-configuration-api), or \[Product Variant Details Configuration API]\(/docs/api/admin-extensions/2026-01/target-apis/contextual-apis/product-variant-details-configuration-api).:**

The admin block component enables admin block extensions to appear inline on resource pages. Use admin block to create embedded extension experiences that feel native to the Shopify admin interface, with automatic height management, expansion controls, and content overflow handling.

Learn how to [build an admin block extension](https://shopify.dev/docs/apps/build/admin/actions-blocks/build-admin-block).

### Support Targets (14)

### Supported targets

* [admin.​abandoned-checkout-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/abandoned-checkouts#abandoned-checkout-details-block-)
* [admin.​catalog-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/catalogs#catalog-details-block-)
* [admin.​collection-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/collections#collection-details-block-target)
* [admin.​company-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/companies#company-details-block-)
* [admin.​company-location-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/companies#company-location-details-block-)
* [admin.​customer-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-details-block-)
* [admin.​draft-order-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/draft-orders#draft-order-details-block-)
* [admin.​gift-card-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/gift-cards#gift-card-details-block-)
* [admin.​order-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-details-block-)
* [admin.​product-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-block-)
* [admin.​product-details.​configuration.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-configuration-)
* [admin.​product-details.​reorder.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-reorder-)
* [admin.​product-variant-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/product-variants#product-variant-details-block-)
* [admin.​product-variant-details.​configuration.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/product-variants#product-variant-details-configuration-)

#### Use cases

* **Inline widgets:** Display contextual information or tools directly on resource detail pages.
* **Product details:** Show additional product data, recommendations, or related items on product pages.
* **Order information:** Display shipping tracking, fulfillment status, or custom order data inline.
* **Customer insights:** Present customer analytics, purchase history, or loyalty information on customer pages.

***

## Properties

Configure the following properties on the admin block component.

* **collapsedSummary**

  **string**

  The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.

* **heading**

  **string**

  The text displayed as the block's title in the header. If not provided, the extension name will be used.

***

## Examples

### Display an inline admin block

Display an inline block on an admin resource page. This example shows a simple block with a `heading` property and [text](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/typography-and-content/text) content.

## Display an inline admin block

![Display an inline block on an admin resource page. This example shows a simple block with a \`heading\` property and \[text\](/docs/api/admin-extensions/2026-01/web-components/typography-and-content/text) content.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/admin/components/adminblock-example-eYwUa8Th.png)

## html

```html
<s-admin-block heading="My App Block">
  <s-text>5 items active</s-text>
</s-admin-block>
```

### Show a collapsed summary

Provide a preview of the block content when it is collapsed. This example uses the `collapsed-summary` attribute to show a short [text](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/typography-and-content/text) summary in the block header.

## html

```html
<s-admin-block heading="Loyalty rewards" collapsed-summary="3 active rewards">
  <s-stack direction="block" gap="base">
    <s-text>Gold tier — 10% off all orders</s-text>
    <s-text>Silver tier — 5% off orders over $50</s-text>
    <s-text>Bronze tier — Free shipping</s-text>
  </s-stack>
</s-admin-block>
```

### Display a data table

Present structured data in rows and columns within a block. This example displays inventory levels across locations using a [table](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/layout-and-structure/table).

## html

```html
<s-admin-block heading="Inventory levels" collapsed-summary="4 locations">
  <s-table>
    <s-table-header-row>
      <s-table-header>Location</s-table-header>
      <s-table-header>Available</s-table-header>
      <s-table-header>Committed</s-table-header>
    </s-table-header-row>
    <s-table-body>
      <s-table-row>
        <s-table-cell>Main warehouse</s-table-cell>
        <s-table-cell>142</s-table-cell>
        <s-table-cell>38</s-table-cell>
      </s-table-row>
      <s-table-row>
        <s-table-cell>Retail store</s-table-cell>
        <s-table-cell>27</s-table-cell>
        <s-table-cell>5</s-table-cell>
      </s-table-row>
    </s-table-body>
  </s-table>
</s-admin-block>
```

### Show status with badges

Highlight key status information with visual indicators. This example shows an order risk assessment with a warning [badge](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/feedback-and-status-indicators/badge) and a list of risk factors.

## html

```html
<s-admin-block heading="Order risk assessment" collapsed-summary="Medium risk">
  <s-stack direction="block" gap="base">
    <s-stack direction="inline" gap="small">
      <s-badge tone="warning">Medium risk</s-badge>
      <s-text>Score: 45 / 100</s-text>
    </s-stack>
    <s-divider></s-divider>
    <s-stack direction="block" gap="small">
      <s-text>Billing and shipping addresses differ</s-text>
      <s-text>First order from this customer</s-text>
      <s-text>IP location matches shipping country</s-text>
    </s-stack>
  </s-stack>
</s-admin-block>
```

### Add action buttons to a block

Include interactive buttons so merchants can take action directly from the block. This example shows subscription details with a [button group](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/actions/button-group) for pause and cancel actions.

## html

```html
<s-admin-block heading="Subscription details" collapsed-summary="Active · Monthly">
  <s-stack direction="block" gap="base">
    <s-stack direction="block" gap="small">
      <s-text type="strong">Premium Plan — $29.99/mo</s-text>
      <s-text>Next billing date: March 15, 2026</s-text>
      <s-text>Status: <s-badge tone="success">Active</s-badge></s-text>
    </s-stack>
    <s-divider></s-divider>
    <s-button-group>
      <s-button>Pause subscription</s-button>
      <s-button tone="critical">Cancel subscription</s-button>
    </s-button-group>
  </s-stack>
</s-admin-block>
```

***

## Best practices

* **Provide clear context:** Ensure merchants understand what the block contains and its purpose at a glance, without needing to expand or interact with it.
* **Use the collapsed summary effectively:** Write concise summaries that give merchants key information when the block is collapsed.
* **Structure content by priority:** Place the most important information at the top. Use collapsible sections, tabs, or progressive disclosure for secondary details.

***

## Limitations

* When your block's content exceeds 300px in height, Shopify automatically displays a **Show more** button. This button can't be removed or disabled. It's a core part of how admin blocks maintain page performance.
* After merchants click **Show more**, blocks can expand up to their maximum allowed height. Content that exceeds this limit will be cut off.
* When content's too large for the block, merchants see a link to view the full extension in your app. This ensures all content remains accessible.
* Summaries longer than 30 characters will be automatically truncated.
* During development, you'll see console warnings when your content exceeds height limits, helping you optimize your block's layout.

***