ResourcePicker

Setup and open

Import the Provider and ResourcePicker component from @shopify/app-bridge-react. Only one Provider is needed for your application.

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, ResourcePicker} from '@shopify/app-bridge-react';

function MyApp() {
  const config = {apiKey: '12345', shopOrigin: shopOrigin};
  return (
    <Provider config={config}>
      <ResourcePicker resourceType="Product" open />
    </Provider>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);

Props

Name Type Description Required
open boolean Whether the picker is open or not Yes
resourceType "Product", "ProductVariant", "Collection" The type of resource you want to pick Yes
initialQuery string GraphQL initial search query for filtering resources available in the picker. See search syntax for more information
initialSelectionIds Resource[] Resources that should be preselected when the picker is opened. See example below.
showHidden boolean Whether to show hidden products or not
allowMultiple boolean Whether to allow selection of multiple items. Deprecated: use selectMultiple instead.
selectMultiple boolean or number Whether to allow selecting multiple items or not. If a number is provided, then limit the selections to a maximum of that number of items. Requires version 1.28.0.
showVariants boolean Whether to show product variants or not. Only applies to the product resource type picker. Requires version 1.28.0.
showDraft boolean Whether to show draft products or not. Only applies to the Product resource type picker. Requires version 1.28.0.
showArchived boolean Whether to show archived products or not. Only applies to the Product resource type picker. Requires version 1.28.0.
showDraftBadge boolean Whether to show draft badge for draft products or not. Only works when the showDraft prop is set, and only applies to the Product resource type picker. Requires version 1.28.0.
showArchivedBadge boolean Whether to show archived badge for archived products or not. Only works when the showArchived prop is set, and only applies to the Product resource type picker. Requires version 1.28.0.
onSelection (selectPayload: SelectPayload) => void Callback when a selection has been made. It receives a SelectPayload argument, which is an Object with id and selection keys. The selection key is an array of all the selected resources.
onCancel () => void Callback when the picker is closed without selection

initialSelectionIds

Use the initialSelectionIds prop to specify resources that should already be selected when the picker is opened:

const productWithSpecificVariantsSelected = {
  id: 'gid://shopify/Product/12345',
  variants: [{
    id: 'gid://shopify/ProductVariant/1',
  }],
};

const productWithAllVariantsSelected = {
  id: 'gid://shopify/Product/67890',
};

function myComponent() {
  return <ResourcePicker
    initialSelectionIds={[
      productWithVariantsSelected,
      productWithAllVariantsSelected
    ]}
  />
}