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.

ResourceItem

The ResourceItem component represents a specific object within a collection that a customer can take action on. Use it for lists of active subscriptions, redeemable offers, or similar collections in a style consistent with the order index page.

Support
Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the ResourceItem component.

Anchor to accessibilityLabel
accessibilityLabel
string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

Anchor to action
action
RemoteFragment

The action grouping for the item, provided as buttons.

Anchor to actionAccessibilityLabel
actionAccessibilityLabel
string
Default: "More actions"

Accessibility label for the action grouping. If an accessibility label is not provided, default text is used.

Anchor to actionLabel
actionLabel
string
Default: "More actions"

Label for the action grouping. If a label is not provided, default text is used.

Anchor to loading
loading
boolean
Default: false

Indicates that the item is in a loading state.

When true, the item shows loading indicators for the UI elements that it is owns. The item is not responsible for the loading indicators of any content that is passed as children.

Anchor to onPress
onPress
() => void

Callback when pressed. If to is set, it will execute the callback and then navigate to the location specified by to.

Anchor to to
to
string

Destination to navigate to. You must provide either this property, onPress, or both.

Anchor to Action button propertiesAction button properties

Configure the following properties on the action button.

Anchor to accessibilityLabel
accessibilityLabel
string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

Anchor to disabled
disabled
boolean
Default: false

Disables the button, disallowing any interaction.

Anchor to kind
kind
'primary' | 'secondary' | 'plain'
Default: 'primary'

The type of button that will be rendered. The visual presentation of the button type is controlled by merchants through the Branding API.

primary: button used for main actions. For example: "Continue to next step".

secondary: button used for secondary actions not blocking user progress. For example: "Download Shop app".

plain: renders a button that visually looks like a link.

Anchor to loading
loading
boolean
Default: false

Replaces content with a loading indicator.

Anchor to loadingLabel
loadingLabel
string

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.

Anchor to onPress
onPress
() => void

Callback that is run when the button is pressed.

Anchor to overlay
overlay
RemoteFragment

An overlay component to render when the user interacts with the component.

Anchor to to
to
string

Destination URL to link to.

Anchor to ExamplesExamples

Anchor to Display a resource itemDisplay a resource item

Represent a single object in a collection with associated actions. This example shows a ResourceItem with product details and action buttons in a style consistent with the order index page.

Display a resource item

A resource item representing an order with product details and action buttons

Display a resource item

import {
ResourceItem,
Button,
Text,
View,
reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';

export default reactExtension(
'customer-account.page.render',
() => <App />,
);

function App() {
return (
<View maxInlineSize={300}>
<ResourceItem
accessibilityLabel="Resource Item"
onPress={() => {}}
actionLabel="Manage"
action={
<>
<Button
kind="primary"
onPress={() => {}}
>
Pay now
</Button>
<Button onPress={() => {}}>
Second action
</Button>
<Button onPress={() => {}}>
Third action
</Button>
</>
}
>
Resource item content
</ResourceItem>
</View>
);
}
import {
ResourceItem,
Button,
View,
extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
'customer-account.page.render',
(root, api) => {
renderApp(root, api);
},
)

function renderApp(root, api) {

const actionFragment = root.createFragment();

const primaryButton = root.createComponent(Button, {
kind: 'primary',
onPress: () => {},
});

primaryButton.append(root.createText('Pay now'))

const secondButton = root.createComponent(Button, {
kind: 'secondary',
onPress: () => {},
});

secondButton.append(root.createText('Second button'))

const thirdButton = root.createComponent(Button, {
kind: 'secondary',
onPress: () => {},
});

thirdButton.append(root.createText('Third button'))

actionFragment.append(primaryButton);
actionFragment.append(secondButton);
actionFragment.append(thirdButton);

const resourceItem = root.createComponent(
ResourceItem,
{
accessibilityLabel: 'Resource Item',
onPress: () => {},
actionLabel: 'Manage',
action: actionFragment,
},
'Content',
);

const view = root.createComponent(View, {maxInlineSize: 300});
view.append(resourceItem);

root.append(view);
}

Anchor to Best practicesBest practices

  • Group related information: Structure your content so it's easy for customers to scan to the most important information.
  • Use images to complement text: Include product thumbnails or icons alongside text content.
  • Use a single primary action: If there's one primary action for the object, display it as a primary button. Display other actions as secondary buttons.
  • Follow UX guidelines: See UX guidelines to learn more about the button logic for order actions.

Anchor to LimitationsLimitations

  • ResourceItem is designed for collection views. For standalone detail views, use other layout components instead.
Was this page helpful?