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 already be selected when the picker is opened
showHidden boolean Whether to show hidden products or not
allowMultiple boolean Whether to allow selection of multiple items
showVariants boolean Whether to show product variants or not. Only applies to the product resource type picker
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

const productWithVariantsSelected = {
  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
    ]}
  />
}

On this page