Advanced Filtering in Shopify Resource Picker: Hide and Show Products and Collections Smartly

When you’re building a Shopify app, you might let merchants choose products or collections using a resource picker — a neat popup provided by Shopify. But what if you don’t want them to pick the same item twice?

In this blog, we’ll walk through a simple way to hide already-selected products or collections using filters in the Shopify resource picker.

Why Should You Hide Items Already Selected?

For example, let’s say your app allows merchants to select and save a number of products, or collections of products. Then, when they go back into the resource picker to select more products, you likely don’t want them to select the same items again either.

By hiding the already chosen items, you:

• Minimise duplicates
• Enhance the allowed action and improve the selling experience
• Help to keep the database clear of duplicates

Step-by-Step: Hide Selected Collections

Let’s use a real example using collections (you can do the same for products as well).

Step 1: Get the Saved Collection IDs

Your app probably stores Shopify Global IDs (GIDs) like this:

const dbCollectionIds = [
  "gid://shopify/Collection/458779099158",
  "gid://shopify/Collection/475913486616"
];

Step 2: Remove the GID Prefix

Shopify filters expect numeric IDs, so you need to extract the numbers:

const numericIds = dbCollectionIds.map((id) =>
  id.replace("gid://shopify/Collection/", "")
);

Now you have:

["458779099158", "475913486616"]

Step 3: Build the Filter Query

Shopify uses -id: to hide specific IDs. You can format your filter like this:

const formattedIds = numericIds.map((id) => `-id:${id}`).join(" AND ");

Result:

"-id:458779099158 AND -id:475913486616"

Step 4: Apply the Filter to the Resource Picker

Now pass the filter into the picker:

const selection = await shopify.resourcePicker({
  type: "collection", // or "product"
  action: "add",
  multiple: true,
  filter: {
    query: formattedIds,
  },
});

That’s it, the collections that were selected will never show again!

Bonus: More Filter Types

Shopify filters are powerful — here are a few other things you can do:

Filter by Title

filter: {
  query: "title:*Summer*"
}

Only shows items where the title contains “Summer”.

Filter by Tag (Products Only)

filter: {
  query: "tag:'featured'"
}

Only shows products with the tag “featured”.

Filter by Vendor (Brand)

filter: {
  query: "vendor:'Nike'"
}

Only shows products from the vendor Nike.

Combine Filters

You can combine multiple filters with AND or OR.

filter: {
  query: "-id:123456789 AND vendor:'Adidas' AND tag:'new'"
}

Hides one product, shows only Adidas products tagged “new”.

Final Working Example (Full Code)

const savedIds = [
  "gid://shopify/Product/123456789",
  "gid://shopify/Product/987654321"
];
const numericIds = savedIds.map((id) =>
  id.replace("gid://shopify/Product/", "")
);
const formattedIds = numericIds.map((id) => `-id:${id}`).join(" AND ");
const selection = await shopify.resourcePicker({
  type: "product",
  action: "add",
  multiple: true,
  filter: {
    query: `${formattedIds} AND vendor:'Nike' AND tag:'bestseller'`,
  },
});

Summary

You can improve your Shopify app by using filters in the resource picker to:

• Hide already-selected products or collections
• Show only relevant items by title, tag, or vendor
• Prevent duplicate selections

Just strip out the ID, add -id:, join with AND, and pass it to the picker. Done!