A practical demonstration of building Shopify Admin UI Extensions using the modern Admin Actions and Admin Blocks framework. This project shows how to extend the Shopify Admin interface to manage custom metadata (metafields) directly from the Product Details page.
- Framework: React Router 7 (formerly Remix)
- Language: JavaScript (ES6+)
- UI Framework: Shopify Polaris (for the App) & Admin UI Extensions (for the extensions)
- API: Shopify GraphQL Admin API
- Database: Prisma (SQLite for local development)
- Admin Block: An inline "Product Data" card on the Product Details page that lists custom "Posts" stored in a metafield.
- Admin Action: A modal-based form triggered from the "More actions" menu (or via navigation from the block) that allows users to create new "Posts".
- Data Sync: Both extensions interact with the same Shopify Metafield (
$app:demo_info) to ensure real-time data consistency. - Inter-Extension Navigation: Demonstration of using
shopify.navigationto move the user from a Block to an Action modal.
- Clone the Repo:
git clone <repo-url>
- Install Dependencies:
npm install
- Connect to Shopify:
npm run dev
- Deploy Extensions:
Follow the CLI prompts to create a new app or link to an existing one. Ensure the
shopify.extension.tomlfiles are correctly configured.
- Reading Data: Using
shopify.queryto fetch product metafields directly within the extension sandbox. - Writing Data: Using GraphQL mutations to update metafield values with data validation logic.
- Form Validation: Simple, pure JavaScript validation for title and description fields.
For a deep dive into the architecture used here, refer to the official Shopify documentation:
This project is Open Source and available for anyone to use and modify.
[StackWise Dev]
Free for learning and community growth.