60 lines
1.4 KiB
Plaintext
60 lines
1.4 KiB
Plaintext
export const metadata = {
|
||
title: `${pageNumber} Admin Customizations`,
|
||
}
|
||
|
||
# {metadata.title}
|
||
|
||
In this chapter, you’ll learn how to customize the Medusa Admin dashboard.
|
||
|
||
<Note type="soon">
|
||
|
||
Admin customizations are coming soon.
|
||
|
||
</Note>
|
||
|
||
## Overview
|
||
|
||
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. Your customizations interact with API routes to provide merchants with custom functionalities.
|
||
|
||
The Medusa Admin is installed in your Medusa application and runs at port `7001` when you start the Medusa 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:
|
||
|
||
```tsx title="src/admin/widgets/product-widget.tsx"
|
||
import type { WidgetConfig } from "@medusajs/admin"
|
||
|
||
const ProductWidget = () => {
|
||
return (
|
||
<div>
|
||
<h2>Product Widget</h2>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export const config: WidgetConfig = {
|
||
zone: "product.details.after",
|
||
}
|
||
|
||
export default ProductWidget
|
||
```
|
||
|
||
This inserts a widget with the text “Product Widget” at the end of a product’s details page.
|
||
|
||
### Test the Widget
|
||
|
||
To test out the widget, start the Medusa application:
|
||
|
||
```bash npm2yarn
|
||
npm run dev
|
||
```
|
||
|
||
Then, open a product’s details page. You’ll find your custom widget at the bottom of the page.
|