3.11. Admin Customizations

In this chapter, you’ll learn how to customize the Medusa Admin dashboard.

What is the Medusa Admin?#

The Medusa Admin is an admin dashboard that merchants use to manage their store's data.

You can extend the Medusa Admin to add widgets and new pages. In your customizations, you interact with API routes to provide merchants with custom functionalities.

The Medusa Admin is installed in your Medusa application and runs at http://localhost:9000/app when you start the application.

Example: Create a Widget#

A widget is a React component that can be injected into an existing page in the admin dashboard.

For example, create the file src/admin/widgets/product-widget.tsx with the following content:

src/admin/widgets/product-widget.tsx
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2
3const ProductWidget = () => {4  return (5    <div>6      <h2>Product Widget</h2>7    </div>8  )9}10
11export const config = defineWidgetConfig({12  zone: "product.details.before",13})14
15export default ProductWidget

This inserts a widget with the text “Product Widget” at the beginning of a product’s details page.

Test the Widget#

To test out the widget, start the Medusa application:

npm
yarn
pnpm

Then, open a product’s details page in the Medusa Admin. You’ll find your custom widget at the top of the page.