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.
