Resource picker

For use with embedded apps only. The resource picker component provides a search-based interface to help merchants find and select one or more products or collections, and communicate selected resources through callbacks the component accepts.

Examples

When you ask for products, the onSelection callback is called with an object that has a selection key, which will have an array of objects detailing the selected products (even if allowMultiple is set to false).

Props

allowMultiple
boolean
Whether to allow selection of multiple items
initialQuery
string
GraphQL initial search query for filtering resources available in the picker
openRequired
boolean
Whether the picker is open or not
resourceTypeRequired
"Product" | "ProductVariant" | "Collection"
The type of resource you want to pick
showHidden
boolean
Whether to show hidden products or not
showVariants
boolean
Whether to show product variants or not. Only applies to the product resource type picker
onCancel
() => void
Callback when the picker is closed without selection
onSelection
(selectPayload: SelectPayload) => void
Callback when a selection has been made

Use in an embedded application

Enable the resource picker component to delegate to the Shopify App Bridge by passing an API key to the app provider component.

Use of the resource picker component is only supported in an embedded application—it will not render in a stand-alone application. To help visualize the resource picker component in an embedded application, we've provided the following screenshot.

Screenshot product picker - multiple product selection component