The Magento admin panel is a backend system that helps store owners manage products, orders, customers and much more from one place. However, the default admin panel is not always enough to meet the unique needs of your business.
But there is a solution — a сustom Magento admin panel. You can add new functionality to your backend to make it simpler to use, thus improving the team's workflow.
In this guide, you'll explore how to set up the Magento admin according to your requirements. You'll find out how to make it more convenient to navigate and manage.
A bonus is one of our that can make some of these processes faster and easier.
Why Customisation of Magento Admin Panel Matters?
The Magento admin panel is the engine that drives your online store. It's a place where your team spends most of their time managing products, configuring settings, processing orders and more.
Yet, a lot of store owners continue using the simple default panel. They simply don't realise that a personalised backend can make all of these processes much more effective.
More effective management
With a custom Magento admin panel, you can rearrange menus to your needs and create quick access tools for the most frequent tasks. Besides, you can add rules to automate manual processes.
Better usability
You can simply remove redundant features and fields (ones you don't use) to make the navigation simpler and less confusing. Use a role-based access model for each admin user to let them work only with specific sections.
Better security
One of the most basic changes in the Magento admin customisation is a unique admin URL. It improves admin security and makes it difficult for hackers to find your login page. Besides, adding two-factor authentication adds a layer of security for your admin.
Brandable look
Adding logos and brand colours to your admin panel streamlines your branding across the frontend and backend. It strengthens the emotional connection and builds brand awareness across your team.
How to Customise Magento 2 Admin Panel?
Magento admin panel customisation allows you to change anything from appearance to layout. So you improve not only the look of the admin but also the user experience.
Let's explore what you can customise and how to do it the right way to create a custom Magento admin panel that works for you instead of against you.
Custom Admin Panel URL
Changing the default admin URL in Magento is a common security practice. The default path is predictable and often targeted by hackers and automated bots.
You can change your current admin URL following these steps:
Step 1: Check your current admin URL
Navigate to your Magento root directory and run the following command to find your current admin URL:
php bin/magento info:adminurl
You'll get something similar to this:
Admin URI: /admin
Step 2: Change current admin URL
Run the following command to change the current admin URL:
php bin/magento setup:config:set --backend-frontname="admin"
Replace the "admin" part with your desired custom admin panel path, like "secure_hash".
Pro tip: For security reasons, avoid using obvious names for your admin panel, like "admin", "backend", or "panel".
You can also change the admin URL via the env.php file. To do so, open app/etc/env.php and find the following line:
'backend' => [
'frontName' => 'admin'
Here, change the "admin" path to your new admin URL path "secure_hash" and save the file.
Don't forget to clear the cache once you change the URL:
php bin/magento cache:flush
Step 3: Access your new admin URL
To check whether your new admin URL is valid, go to:
https://yourdomain.com/secure_hash
If, for some reason, you forgot the newly created admin URL, run the following command again:
php bin/magento info:adminurl
Custom Admin Panel Menu
As we have already mentioned, the default Magento admin menu may not correspond to your business needs. Or it could just be making navigation for your team quite complicated.
Therefore, optimising it could make navigation much more effective.
Step 1: Build your basic module
In Magento 2, a module is an essential code package that adds functionality to your store. So, when creating a custom Magento admin panel, a module is actually what you develop to manage the store.
To create your custom module, you need to build a folder structure. Suppose your vendor name is Vendor (the name of your company) and your module name is CustomAdminPanel (that is the name of your module), then your folder structure will look like this:
app/code/Vendor/CustomAdminPanel/
Step 2: Register your module
Magento needs to be aware of your module before it can start working with it. Therefore, you need to register it properly.
This involves creating the following files:
restration.php
module.xml
The registration.php file tells Magento the location of your module. It is your module's registration key. Magento automatically loads it when scanning modules. You need to place it here:
app/code/Vendor/CustomAdminPanel/registration.php
Check if it contains the following:
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Vendor_CustomAdminPanel',
__DIR__
);
The module.xml file identifies the module's name, version, and dependencies (if there are any). It's required to understand how your module fits into the system.
You need to locate it here:
app/codeVendor/CustomAdminPanel/etc/module.xml
Pro tip: you will need to create the etc/ folder inside the module folder if it isn't already there. Magento won't enable your module without this folder, as it must hold the configuration files Magento looks for.
Insert the following code there:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_CustomAdminPanel" setup_version="1.0.0"/>
</config>
Once both files are ready and in the proper places, run the following command to register your module in the setup_module database:
php bin/magento setup:uppgrade
Step 3: Add permissions (ACL)
For security reasons, you may not want each team member to be able to access the entire admin menu. In this case, Magento allows you to use the Access Control List (ACL) or extend it to control who can enter specific parts of the admin panel.
You can define the required permissions by creating the acl.xml file at the following path:
app/code/Vendor/CustomAdminPanel/etc/acl.xml
To add custom permissions under the main admin area, use the code below:
<?xml version="1.0"?>
<acl xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
<resources>
<resource id="Magento_Backend::admin">
<resource id="Vendor_CustomAdminPanel::main_menu" title="Custom Admin Panel" sortOrder="10">
<resource id="Vendor_CustomAdminPanel::submenu" title="Sub Item"/>
</resource>
</resource>
</resources>
</acl>
Step 4: Define the admin menu
In order to display your module in the Magento admin sidebar menu, prepare the menu.xml file.
app/code/Vendor/CustomAdminPanel/etc/adminhtml/menu.xml
It defines which menu items to create, their names, where they should appear, which controller actions they are linked to, and what permissions are needed to access them.
The content of the menu.xml file should be as follows:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<!-- Main menu item -->
<add id="Vendor_CustomAdminPanel::main_menu"
title="Custom Admin Panel"
module="Vendor_CustomAdminPanel"
sortOrder="100"
resource="Vendor_CustomAdminPanel::main_menu" />
<!-- Submenu item -->
<add id="Vendor_CustomAdminPanel::submenu"
title="Sub Item"
module="Vendor_CustomAdminPanel"
sortOrder="10"
parent="Vendor_CustomAdminPanel::main_menu"
action="CustomAdminPanel/index/index"
resource="Vendor_CustomAdminPanel::submenu" />
</menu>
</config>
Step 5: Create a controller for your admin menu page
When you have defined your admin menu and ACL permissions, it's time to make the page that appears when someone presses the submenu item in your custom Magento admin panel.
In Magento, this is handled by a controller, as it will generate the page to display. For this, create the following folder with the path:
app/code/Vendor/CustomAdminPanel/Controller/Admintml/Index/
Inside the latter folder, create the Index.php, so the full path is:
app/code/Vendor/CustomAdminPanel/Controller/Admintml/Index/Index.php
Then, paste the following code inside:
<?php
namespace Vendor\CustomAdminPanel\Controller\Adminhtml\Index;
use Magento\Backend\App\Action;
use Magento\Framework\View\Result\PageFactory;
class Index extends Action
{
protected $resultPageFactory;
public function __construct(Action\Context $context, PageFactory $resultPageFactory)
{
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->setActiveMenu('Vendor_CustomAdminPanel::main_menu');
$resultPage->getConfig()->getTitle()->prepend(__('Custom Admin Panel Page'));
return $resultPage;
}
}
Step 6: Add di.xml (optional)
Adding di.xml is only needed if your module has to inject dependencies, override core classes, or customise service behaviour. Otherwise, you can skip this step.
Step 7: Enable your module
After creating your module, you must notify Magento about it.
To enable your module, run the following three commands in your Magento root:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush
Step 8: Verify installation
Now, when your module is enabled and Magento has been updated, check how everything works.
Log in to the Magento admin panel. You should now see a new menu item in the left sidebar:
Custom Admin Panel
└── Sub Item
This indicates that your custom Magento admin panel menu item was added properly.
Custom Admin Panel Theme
Magento's admin panel comes with a default theme called Magento/backend. However, you can customise the admin theme to create a cleaner and more intuitive interface.
So, if you are ready to improve the productivity of your team and give your backend a more personal look, follow the steps below.
Step 1: Create the admin theme folder
Create the following path where Vendor is your company name and AdminTheme is the name of your theme:
app/design/adminhtml/Vendor/AdminTheme/
e.g. If your company name is MyWorld and the name of your theme is MyAdminTheme, the path would be: app/design/adminhtml/MyWorld/MyAdminTheme/.
Step 2: Add required files
To make your custom Magento admin theme work properly, you need to add the required files: theme.xml, registration.php and etc/view.xml.
The theme.xml file defines the basic metadata of your theme (its name, parent theme, etc.). Without it, Magento will not know whether your theme exists. Place it in:
app/design/adminhtml/Vendor/AdminTheme/theme.xml
with the following content:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>My Custom Admin Panel Theme</title>
<parent>Magento/backend</parent>
</theme>
The registration.php file tells Magento where the theme is located. Its path is:
app/design/adminhtml/Vendor/AdminTheme/registration.php
The content of the file should look like the one below:
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::THEME,
'adminhtml/Vendor/AdminTheme',
__DIR__
);
The etc/view.xml includes settings that control how the images and other visual elements are displayed. Although it's optional, add this file to make your theme more complete. It should be located here:
app/design/adminhtml/Vendor/AdminTheme/etc/view.xml
The basic, simple content may look as follows:
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
<images module="Magento_Catalog">
<image id="product_thumbnail" type="thumbnail">
<width>150</width>
<height>150</height>
</image>
</images>
</media>
</view>
Also, this is the place where you can customise the size of the images you see in the backend.
Now, when you have set up your custom admin panel theme, it's time to dive into the customisation of admin pages.
Custom Admin Panel Colour
It's not a secret that the visual appearance of your Magento 2 store plays an important role since every design element helps to shape your brand identity.
However, the same concept can be applied to the backend to personalise it with your brand colours.
Step 1: Add custom admin panel colour
To add a custom Magento admin panel colour to your store, create _extend.less and add your custom colours:
app/design/adminhtml/Vendor/customadmintheme/web/css/source/_extend.less
// Change admin page background
.admin__page {
background-color: #f4f6f9; // light grey
}
// Change primary button background
.button.primary {
background-color: #2e86de; // custom blue
border-color: #2e86de;
}
// Customize header color
.page-header {
background: #1b1f2a; // dark navy
}
// Change sidebar background
.page-layout-admin .admin__menu {
background-color: #2c3e50;
}
Step 2: Check the changes
After updating your styles, run the following commands and check the changes:
bin/magento setup:static-content:deploy -f
bin/magento cache:clean
However, if you're looking for an easier and faster way to do so, we have a great solution to help you change Magento 2 admin color.
Our extension allows you to do this directly from the admin panel without using any coding.
Custom Admin Panel Logos
Branding plays a crucial role in eCommerce, not only for your customers but also for all your team and partners. One simple yet effective way to reinforce your brand for them is to change the logo in the admin panel.
Step 1: Create custom admin panel theme
To change the logo, you need to create a custom admin panel theme or extend the default one. The example of its basic structure is:
app/design/adminhtml/Custom/Admin
├── etc
│ └── view.xml
├── web
│ └── images
│ └── logo.svg
├── registration.php
└── theme.xml
Here, place your logo in:
app/design/adminhtml/Custom/Admin/web/images/logo.svg
You can use .png, .svg, or .jpg types of files, but .svg is recommended for the best quality.
Reference it in view.xml:
<!-- app/design/adminhtml/Custom/Admin/etc/view.xml -->
<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
<images module="Magento_Backend">
<image id="logo" type="logo">images/logo.svg</image>
</images>
</media>
</view>
Step 2: Register the theme
Now register the theme by creating theme.xml and registration.php:
<!-- app/design/adminhtml/Custom/Admin/theme.xml -->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Custom Admin Panel Theme</title>
<parent>Magento/backend</parent>
</theme>
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::THEME,
'adminhtml/Custom/Admin',
__DIR__
);
Step 3: Enable your custom admin panel theme
Then, enable your custom admin panel theme by using this CLI commans:
php bin/magento config:set design/theme/theme_id <your_theme_id>
To get your theme ID:
php bin/magento theme:uninstall
Step 4: Deploy content
Lastly, you deploy static content and flush the cache:
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
However, there's a simpler way. You can change your admin panel logo by uploading your logo file directly to Magento.
Custom Admin Panel Pages
Customising admin pages allows you to remove unnecessary fields, add quick actions and shortcuts, and reduce clicks for common tasks. So you'll definitely want to know how to apply these changes effectively.
Step 1: Customise layout XML
Layout XML enables you to adjust the structure of existing pages in Magento, for example, to remove or add blocks or containers.
If you want to add a block to, let's say, the Sales Order View page, the path should be:
app/code/Vendor/AdminModule/view/adminhtml/layout/sales_order_view.xml
The XML file should contain the following information:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="order_tab_info">
<block class="Vendor\Module\Block\Adminhtml\Order\Custom" name="custom.order.info" template="Vendor_Module::custom_info.phtml"/>
</referenceBlock>
</body>
</page>
Step 2: Override template
In Magento 2, many elements on a page (such as buttons, blocks of content, etc.) are rendered using .phtml files.
If you want to change the appearance of something, you shouldn't modify the core files directly. Override them instead:
1. Find the .phtml file in the core module, for example:
vendor/magento/module-sales/view/adminhtml/templates/order/view/info.phtml
2. Copy the original template, maintaining the same relative path.
3. Paste it in your theme:
app/design/adminhtml/Vendor/AdminTheme/Magento_Sales/templates/order/view/info.phtml
4. To make sure Magento picks up your override, clear the cache by running:
bin/magento cache:clean
bin/magento cache:flush
Note: never modify Magento's core files directly. Do this in your custom theme or module instead to ensure your changes are preserved and to avoid breaking built-in functionality.
Step 3: Modify UI component
To render complex backend elements like admin grids, forms, filters, buttons, columns, etc., Magento uses a system called UI Components.
All the elements listed above are specified using XML files, and the UI framework then converts them to build the actual interface.
If, for example, you are modifying the Sales Order Grid to add a new custom column, the file path should look like this:
app/code/Vendor/AdminModule/view/adminhtml/ui_component/sales_order_grid.xml
with the following content:
<listing ...>
<columns name="sales_order_columns">
<column name="custom_column">
<settings>
<label translate="true">Custom Info</label>
</settings>
</column>
</columns>
</listing>
If your new column is meant to display custom data that isn’t included in Magento’s default order collection, you also need to use a plugin or observer to join that data into the collection.
This step is essential for showing new backend data, not just changing the view of existing values.
Let's check the potential plugin example for this case:
app/code/Vendor/AdminModule/Plugin/OrderGridCollectionPlugin.php
namespace Vendor\Module\Plugin;
use Magento\Sales\Model\ResourceModel\Order\Grid\Collection as OrderGridCollection;
class OrderGridCollectionPlugin
{
public function afterGetSelect(OrderGridCollection $subject, $result)
{
$subject->getSelect()->joinLeft(
['custom_table' => 'your_custom_table'],
'main_table.entity_id = custom_table.order_id',
['custom_column']
);
return $result;
}
}
To register the plugin in di.xml, you need to create the following path and content:
app/code/Vendor/AdminModule/etc/di.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Sales\Model\ResourceModel\Order\Grid\Collection">
<plugin name="custom_order_grid_plugin" type="Vendor\Module\Plugin\OrderGridCollectionPlugin" />
</type>
</config>
Custom Admin Panel Dashboard
The Magento dashboard is the first page you see after logging in to the backend of a Magento store. It gives store admins a quick overview of how the store is operating.
By default, the Magento 2 dashboard includes sales reports, last orders, search terms, and customer information. However, not every business may need exactly those.
If you want to add reports like a or Google analytics to the dashboard, you need to know how to customise it. So, here we go.
Step 1: Add custom XML files for grid customisation
Inside your module directory, create a blank file named design_config_listing.xml using the following path:
<your_module_dir>/view/adminhtml/ui_component/
You may use this file to customise the grid layout. If you decide to rename, a theme column etc., you need to specify this by setting the label attribute in the XML.
Step 2: Update grid columns
In the design_config_listing.xml file, include the <columns> element and specify the name and label for each column:
<column name="theme_theme_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">New Theme Column Name</item>
</item>
</argument>
</column>
Step 3: Customize form options
Create the design_config_form.xml file in the same directory. Use it to configure the form elements by defining fieldsets and fields.
Step 4: Add fieldsets and fields
Organise your form using fieldset elements. Set labels and determine the sort order for each fieldset.
<fieldset name="other_settings">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Other Settings</item>
</item>
</argument>
</fieldset>
Step 5: Set up metadata in di.xml
Include metadata configurations for the new fields in the di.xml file. Specify the path, fieldset, and backend model for each field.
<type name="Magento\Theme\Model\Design\Config\MetadataProvider">
<arguments>
<argument name="metadata" xsi:type="array">
<item name="head_shortcut_icon" xsi:type="array">
<item name="path" xsi:type="string">design/head/shortcut_icon</item>
<item name="fieldset" xsi:type="string">head</item>
<item name="backend_model" xsi:type="string">Magento\Config\Model\Config\Backend\Image\Favicon</item>
</item>
</argument>
</arguments>
</type>
For some reason, many store owners are focused on improving the frontend experience only. They just don't realise that optimising the backend has lots of benefits too.
Faster navigation, easier management and automated processes are just a few examples.
The more effectively your backend is managed, the better the frontend workflow. Remember that while customising your store, and never leave out.
