Skip to main content

Resource Picker

The Resource Picker API provides a search-based interface to help users find and select one or more products, collections, or product variants, and then returns the selected resources to your app. Both the app and the user must have the necessary permissions to access the resources selected.

Tip

If you are picking app resources such as product reviews, email templates, or subscription options, you should use the Picker API instead.

Anchor to resource picker optionsResource Picker Options

The Resource Picker accepts a variety of options to customize the picker's behavior.

'product' | 'variant' | 'collection'
required

The type of resource you want to pick.

'add' | 'select'
Default: 'add'

The action verb appears in the title and as the primary action of the Resource Picker.

Filters for what resource to show.

boolean | number
Default: false

Whether to allow selecting multiple items of a specific type or not. If a number is provided, then limit the selections to a maximum of that number of items. When type is Product, the user may still select multiple variants of a single product, even if multiple is false.

string
Default: ''

GraphQL initial search query for filtering resources available in the picker. See search syntax for more information. This is displayed in the search bar when the picker is opened and can be edited by users. For most use cases, you should use the filter.query option instead which doesn't show the query in the UI.

[]
Default: []

Resources that should be preselected when the picker is opened.

Was this section helpful?

Anchor to resource picker return payloadResource Picker Return Payload

The Resource Picker returns a Promise with an array of the selected resources. The object type in the array varies based on the provided type option.

If the picker is cancelled, the Promise resolves to undefined

Anchor to when type is "collection":
when type is "collection":
[]
Anchor to when type is "product":
when type is "product":
[]
Anchor to when type is "variant":
when type is "variant":
[]
Was this section helpful?

Product picker

const selected = await shopify.resourcePicker({type: 'product'});

Preview

Resource Pickers with different options

Alternate resources

Anchor to example-product-picker-with-preselected-resourcesProduct picker with preselected resources

Preselected resources

Action verb

Anchor to example-product-picker-with-multiple-selectionProduct picker with multiple selection

Multiple selection

Filters

Anchor to example-product-picker-with-a-custom-filter-queryProduct picker with a custom filter query

Filter query

Anchor to example-product-picker-using-returned-selection-payloadProduct picker using returned selection payload

Selection

Anchor to example-product-picker-with-initial-query-providedProduct picker with initial query provided

Initial query

Was this section helpful?

Alternate resources

const selected = await shopify.resourcePicker({type: 'collection'});