Admin UI Extension To Get Selected Product Ids

Shopify Apps

Topic summary

A developer created a Shopify app for updating product descriptions and successfully added an admin action button to the products page using Shopify CLI with vanilla JavaScript. However, they encountered a “document is not defined” error when attempting to use document.querySelectorAll() to retrieve selected product IDs from checkboxes.

Solution provided:

  • Use the useApi() hook with the target 'admin.product-index.selection-action.render'
  • Shopify automatically passes selected product IDs to the extension through the API
  • The IDs are available in the returned data object as an array under the “selected” property

A code example demonstrates accessing this data, with a console screenshot showing the structure of the returned object containing the selected product IDs. This approach eliminates the need for direct DOM manipulation.

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

Hi all,

I have developed a Shopify App about updating product descriptions. My app works fine as an embedded app and i’m trying to extend my apps functionality by adding an admin action on admin panel → products page.

So i’ve started using Shopify CLI (vanilla js) and successfully inserted my admin action button here:

shp-community-1.png
shp-community-1.png2550×488 70 KB

Now i need to get the product ids of the selected products as you see in the image above.

As a simple example here is my code (ActionExtension.js):document is not defined

shp-c_1.png
shp-c_1.png1144×268 48.2 KB

Since all product selection checkboxes are classed with .Polaris-Checkbox__Input and language is js not react, so i thought i can get the ids with document.querySelectorAll() and chain an event when a checkbox is checked or unchecked. But i get document is not defined error on console.

Is there a way to get selected product ids when the admin action clicked on products page?

Thanks.

2

I guess you have probably figured it out by now or given up, but if anyone else stumbles upon this question looking for an answer

const TARGET = 'admin.product-index.selection-action.render';
export default reactExtension(TARGET, () => 

when you useApi(TARGET) you can get the data back that shopify passes to the extension. In this case it passes the IDS of the selected products into the data constant as an array of "selected"

Here ist the result of the console.log(data) from above

![garyrgilbert_0-1745672860870.png|716x324](upload://gffLA7oWoNWciCatbWPVp4Hm5xw.png)

Hope this helps