Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Should Render API

The Should Render API lets you conditionally show or hide admin action extensions dynamically. Use this API to control action visibility based on resource state, user permissions, or business logic.

Anchor to Use casesUse cases

  • Conditional rendering: Determine if extension should render based on context.
  • Feature detection: Check if required features or capabilities are available.
  • Context validation: Validate that extension has required data or permissions.
  • Performance optimization: Skip rendering extensions that won't be useful in current context.
Support
Targets (27)

Supported targets

Anchor to PropertiesProperties

The Should Render API object provides properties for controlling action extension visibility. Access the following properties on the API object to determine whether an associated action should appear based on the current context.

Anchor to auth
auth
required

Provides methods for authenticating calls to your app backend. Use the idToken() method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.

Anchor to data
data
required

An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.

Anchor to extension
extension
{ target: ; }
required

The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.

Anchor to i18n
i18n
required

Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.

Anchor to intents
intents
required

Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.

Anchor to query
query
< = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<, "2023-04">; }) => Promise<{ data?: ; errors?: []; }>
required

Executes GraphQL queries against the GraphQL Admin API. Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.

Anchor to Best practicesBest practices

  • Keep evaluation under ~50ms: Slow shouldRender functions delay page rendering for all merchants. Profile your logic and optimize for speed.

Anchor to LimitationsLimitations

  • The function must return an object with a display property. Returning a plain boolean like true instead of { display: true } fails.
  • No asynchronous operations are supported. Async functions, promises, fetch calls, and timers won't work.
  • Your extension can't access external data sources. Evaluation is limited to data available in api.data.selected and in-memory state.
  • The function runs only once when the page loads. Action visibility stays fixed after that, even if resource data, selections, or other conditions change later.
Was this page helpful?