Embedded resource picker

Resource pickers are overlays that allow merchants to select one or more products or collections. They provide a very powerful search-based UI to help merchants find the appropriate resources, and then provide that information to you through the callbacks the component accepts.

This component only works within embedded apps. Read the Embedded App SDK (EASDK) getting started guide for more details on how to use the EASDK with Polaris.

Examples

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

Props

allowMultiple
boolean
Whether multiple selections are allowed
collections
boolean
Whether to allow the merchant to select collections
openRequired
boolean
Whether the picker is open or not
products
boolean
Whether to allow the merchant to select products
showHidden
boolean
Whether to display resources that are not published (hidden) in the context of a channel. Defaults to true.
title
string
The title of the picker
onCancel
() => void
Callback when the picker is closed without selection
onSelection
(resources: SelectionResult) => void
Callback after a selection was made

Screenshot examples

These static images are provided to help visualize the interface since embedded components can only be rendered inside the Shopify admin.

Product picker - multiple product selection

Screenshot product picker - multiple product selection component

Collection and product picker - single product selection

Screenshot collection picker - single product selection component