I'm using Shopify Resource Picker API and its not working

Shopify Apps

Topic summary

Issue: The Shopify Resource Picker API stopped opening despite the function being invoked correctly. Multiple developers experienced this problem simultaneously on localhost.

Root Cause: The original poster resolved the issue by correctly configuring the API key in the .env file using SHOPIFY_API_KEY.

Alternative Solutions Suggested:

  • Use the legacy ResourcePicker.create() method with .subscribe() and .dispatch() instead of the async/await pattern
  • Verify @shopify/app-bridge and @shopify/app-bridge-react package versions are compatible (v3.x recommended)
  • Ensure AppProvider is properly configured at a higher component level

Ongoing Issues:

  • One user reports the picker only shows a few products from a collection instead of all products
  • The variants: false filter appears to not be working as expected for some users

Status: Resolved for the original poster through environment configuration; some users still experiencing filtering issues.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1 
 

import { useAppBridge } from "@shopify/app-bridge-react";
import { ResourcePicker } from "@shopify/app-bridge/actions";
const BundleGeneralSettings = () => {

const app = useAppBridge();

const openPicker = async () => {

const picker = await app.resourcePicker({

type: "product",

action: "add",

multiple: true,

filter: {

hidden: false,

variants: false,

draft: false,

archived: false,

},

});

if (picker && picker && picker.length > 0) {

const selectedProducts = picker.map((product) => ({

id: product.id,

title: product.title,

imageUrl:

product.images.length > 0

? product.images[0].originalSrc

: null,

isVariant: product.totalVariants > 0,

variants: product.totalVariants ? product.totalVariants : null,

price:

product.totalVariants === 1

? product.variants[0].price

: null,

}));

console.log("Picker:", picker);

console.log("Selected products:", selectedProducts);

}

};

return (

<>

<div className="mt-2">

</div>

<div className="mt-2">

<Card>

<Button onClick={openPicker}>Select Products</Button>

</Card>

</div>

<div className="p-5"></div>

</>

);

};

export default BundleGeneralSettings;

This code was working as expected. But, now it is not opening the picker. The function is invoked correctly, but the picker isn’t opening.

2

Hey @carlos_powell ,

Thanks for the detailed code snippet. If the Shopify Resource Picker was working and suddenly stopped, there are a few things to check. The @shopify/app-bridge/actions API has evolved, and it looks like you might be mixing the legacy Resource Picker implementation with the modern App Bridge setup. Let’s debug this step by step:

Fix your openPicker function like this:

import { ResourcePicker } from "@shopify/app-bridge/actions";

const openPicker = () => {
  const picker = ResourcePicker.create(app, {
    resourceType: ResourcePicker.ResourceType.Product,
    options: {
      showVariants: false,
      selectMultiple: true,
    },
  });

  picker.subscribe(ResourcePicker.Action.SELECT, ({ selection }) => {
    const selectedProducts = selection.map((product) => ({
      id: product.id,
      title: product.title,
      imageUrl: product.images?.[0]?.originalSrc || null,
      isVariant: product.variants?.length > 0,
      variants: product.variants || [],
      price: product.variants?.[0]?.price || null,
    }));

    console.log("Selected products:", selectedProducts);
  });

  picker.dispatch(ResourcePicker.Action.OPEN);
};

Make sure useAppBridge() is returning the app instance:

If you’re using @shopify/app-bridge-react, ensure the AppProvider wraps your component at a higher level with the correct configuration (API key, host, etc.).

Confirm package versions

Make sure you’re using compatible versions:

"@shopify/app-bridge": "^3.x",
"@shopify/app-bridge-react": "^3.x",

Run:

npm list @shopify/app-bridge @shopify/app-bridge-react

If you’re on mismatched versions, that could cause silent failures.

Let me know if you’d like help adapting the full component to the new format — or if you’re using Polaris ResourcePicker from @shopify/polaris, which is an entirely different component.

Thanks & Best ,

Rajat

3

The same issue on me. Random stop to work on localhost:

const data = await shopify.resourcePicker({
    selectionIds,
    type: selected,
    multiple: true,
    action: "add",
    filter: {
        archived: false,
        draft: false,
    },
});

Implementation according to this documentation: https://shopify.dev/docs/api/app-bridge-library/apis/resource-picker

No success to fix :confused:

1 Like
4

Same issue, im trying to generate a resource picker for a specific collection and show only the products, no variants. was working fine yesterday, now it only shows a few products from the whole collection

const products = await shopify.resourcePicker({
      type: "product",
      action: "select",
      multiple: children.length,
      filter: {
        query: "collection_id:291938992322", // ! set dynamically
        variants: false, // ! this currently isnt working
        archived: false,
        draft: false,
      },
      selectionIds: selectorProductList.map((id) => {
        return { id: id };
      }),
    });
5

I was using the Resource Picker API provided by App Bridge.
Ref: https://shopify.dev/docs/api/app-bridge-library/apis/resource-picker

But, my issue got fixed, when I correctly set the api key from the .env file.

Thanks for recommending me another way!

1 Like
6

@carlos_powell

Glad to hear you got it sorted out—and great catch with the API key setup!

By the way, I’d love to introduce you to our Shopify app: Dash Drop Delivery – a powerful solution built to streamline same-day and local delivery for Shopify merchants like you.

You can check it out here:
:backhand_index_pointing_right: Dash Drop Delivery on Shopify App Store

Whether you’re aiming to boost delivery speed, improve customer satisfaction, or simplify your logistics, Dash Drop offers:

  • Seamless integration with your Shopify store

  • Real-time delivery tracking

  • A user-friendly dashboard and widgets

  • Custom settings tailored to your brand’s delivery needs

If you have any questions or would like a walkthrough, feel free to reach out—I’d be happy to help!

Best regards,
Rajat