Choose a version:

Admin block

Requires the Block Extension API, Product Details Configuration API, or 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.

Support

Targets (14)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the admin block component.

Anchor to collapsedSummary collapsedSummary string: The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.
Anchor to heading heading string: The text displayed as the block's title in the header. If not provided, the extension name will be used.

Anchor to ExamplesExamples

Anchor to Display an inline admin blockDisplay 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 content.

Preview

html

<s-admin-block heading="My App Block">

<s-text>5 items active</s-text>

</s-admin-block>

Anchor to Show a collapsed summaryShow 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 summary in the block header.

Preview

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>

Anchor to Display a data tableDisplay a data table

Present structured data in rows and columns within a block. This example displays inventory levels across locations using a table.

Preview

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>

Anchor to Show status with badgesShow status with badges

Highlight key status information with visual indicators. This example shows an order risk assessment with a warning badge and a list of risk factors.

Preview

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-admin-block>

Anchor to Add action buttons to a blockAdd 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 for pause and cancel actions.

Preview

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>

Anchor to Best practicesBest 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.

Anchor to LimitationsLimitations

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.

Was this page helpful?