App extension for admin product page

[AlexandrC]

Hi Shopify developers!

I'm currently exploring the world of Shopify app extensions, and I have a question.

I need to develop an app that displays a table on the admin product page, showing custom metafield values.
At the moment, I just have a list of custom metafields (see photos), but my merchant wants the table to be more user-friendly for managers in order to speed up and simplify the accounting management process.

So this app extension should affect the admin product UI, and I know there are many types of extensions. Based on what I’ve read, the most suitable one for me seems to be the Admin Block UI extension (https://shopify.dev/docs/apps/build/admin/actions-blocks/build-admin-block?extension=react).

However, I have a question:
Does this extension allow access to read and modify custom metafields programmatically?

What do you think is the best way to implement a table in the admin product page that shows and manages custom metafields? Thank you for your time!

 

 

[dctechnolabs]

Hi,

Great question. You’re on the right path by looking at the Admin Block UI extension. It’s currently the best way to build a custom section directly into the admin product page, and it works well for use cases like showing and editing metafields in a clean table layout.

To answer your main question:

Yes, Admin Block extensions can read and write metafield values programmatically
You can use the Admin API or the GraphQL Storefront API (within the extension’s backend) to fetch and update metafields as needed. When the user interacts with your custom table, you can:

• Fetch the current product's metafields using the API
• Display them in a table format using your custom React component
• Update them through mutation requests when the manager edits a value

Here’s a simple approach to how you can implement this:

1. Build the Admin Block extension

• Target the product admin page using target: admin.product-details.block.render
• Use Polaris components to build your table UI

2. Fetch the metafields
Inside your extension, use an authenticated fetch (or proxy through your app backend) to call the Admin API like this:

query {
  product(id: "gid://shopify/Product/1234567890") {
    metafields(first: 20, namespace: "your_namespace") {
      edges {
        node {
          key
          value
        }
      }
    }
  }
}

3. Display the data as a table
Use Polaris components like DataTable or custom rows to show the metafield keys and values. You can optionally make them editable inline.

4. Handle updates
When someone edits a value, use the metafieldsSet mutation to update the product metafields:

mutation {
  metafieldsSet(metafields: [
    {
      namespace: "your_namespace",
      key: "box1_pieces_amount",
      value: "15",
      type: "number_integer",
      ownerId: "gid://shopify/Product/1234567890"
    }
  ]) {
    metafields {
      id
    }
    userErrors {
      field
      message
    }
  }
}

Things to keep in mind:

• Be sure to request the proper scopes (read_products, write_products, and read/write_metafields) in your app
• If you want a smoother UX, you can debounce input changes or add save buttons per row

This setup gives you full control over both the display and edit experience, and it integrates neatly inside the Shopify admin. It’s a good way to simplify metafield-heavy workflows without needing merchants to navigate through multiple panels.

Hope this gives you a solid starting point.

[AlexandrC]

Thank you for your reply!

I've thoroughly reviewed the instructions you provided and researched the learning materials.

I've encountered some ambiguity. You recommend using "@shopify/polaris" for developing custom UI, but I haven't found any instructions on forums or in the documentation for using Polaris with custom admin blocks. It seems to be primarily used for creating embedded Shopify admin applications with their own separate pages. For custom admin blocks integrated, for example, on the product description page, "@shopify/ui-extensions-react/admin" is recommended, as it was specifically created for such purposes.

I'm afraid I might be mistaken, but it seems to me that Polaris is not used for the goal I need to achieve. What is your opinion?

Thank you!

[dctechnolabs]

Hi Alexandr,

You're absolutely right to point that out, and thanks for the thoughtful follow-up.

You're not mistaken when it comes to Admin Block Extensions like those rendered directly on the product page (admin.product-details.block.render), the correct UI framework to use is @Shopify/ui-extensions-react/admin, not Polaris.

Polaris is still very useful, but it's primarily intended for embedded admin apps that have a dedicated page inside the Shopify admin. If you were building a full-screen app experience (like something accessed from the Apps menu), Polaris would be the go-to choice.

But for inline extensions like Admin Blocks, using @Shopify/ui-extensions-react/admin is the recommended and supported approach. This gives you access to components that are specifically optimized for the embedded block environment (like TextField, InlineStack, BlockStack, etc.) and ensures proper rendering and behavior within Shopify’s admin interface.

So to clarify:

• For Admin Block UI extensions: use @Shopify/ui-extensions-react/admin
• For embedded admin apps: use @Shopify/polaris

Thanks again for pointing this out. Your understanding is spot-on, and I appreciate the correction.