Cómo personalizar el panel de administración de Magento 2 para un mejor flujo de trabajo
How to Customize the Magento 2 Panel de administración for Better Workflow
If you're running a Magento 2 store, you know the panel de administración is your command center. But let's be honest—listo para usar, it's not always the most efficient workspace. The good news? Magento 2 is highly customizable, and with a few tweaks, you can transform your panel de administración into a productivity powerhouse.
En esta guía,'ll walk through practical ways to streamline your Magento 2 admin experience—from simple UI adjustments to advanced customizations that'll save you hours every week.
Why Customize Your Panel de administración?
Antes de we dive into the how, let's talk about the why. A well-optimized panel de administración can:
- Reduce clicks to common tasks
- Surface important metrics faster
- Minimize training time for new staff
- Prevent costly mistakes from menu diving
Ahora, let's roll up our sleeves and get to work.
1. Rearrange the Admin Menu
The default menu structure might not match your workflow. Así es como to customize it:
<?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>
<add id="Magefine_CustomMenu::dashboard" title="Dashboard" module="Magefine_CustomMenu" sortOrder="10" resource="Magento_Backend::dashboard"/>
<add id="Magefine_CustomMenu::sales" title="Sales" module="Magefine_CustomMenu" sortOrder="20" resource="Magento_Sales::sales"/>
<add id="Magefine_CustomMenu::catalog" title="Catalog" module="Magefine_CustomMenu" sortOrder="30" resource="Magento_Catalog::catalog"/>
</menu>
</config>Save this as etc/adminhtml/menu.xml in your custom module. Adjust the sortOrder values to rearrange items.
2. Create Custom Admin Dashboards
Magento's dashboard is useful, but you can make it better. Try this:
// In your custom module's view/adminhtml/ui_component/magefine_custom_dashboard.xml
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">magefine_custom_dashboard.magefine_custom_dashboard_data_source</item>
</item>
</argument>
<dataSource name="magefine_custom_dashboard_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magefine\Custom\Ui\DataProvider\DashboardData</argument>
</argument>
</dataSource>
<columns name="magefine_custom_dashboard_columns">
<column name="metric">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Metric</item>
</item>
</argument>
</column>
</columns>
</listing>3. Add Quick Action Buttons
Speed up common tasks with custom buttons. Así es como to add a "Quick Add Product" button:
// In your layout XML file
<referenceContainer name="header">
<block class="Magento\Backend\Block\Template" name="custom.quick.actions" template="Magefine_Custom::quick_actions.phtml" before="-" />
</referenceContainer>Then create the template:
<div class="admin__action-dropdown-wrap">
<button class="admin__action-dropdown">
<span>Quick Actions</span>
</button>
<ul class="admin__action-dropdown-menu">
<li><a href="<?= $block->getUrl('catalog/product/new') ?>">Add Product</a></li>
<li><a href="<?= $block->getUrl('sales/order/create') ?>">Create Order</a></li>
</ul>
</div>4. Customize Grid Views
Make product and order grids work for you:
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<column name="increment_id">
<settings>
<filter>text</filter>
<label translate="true">Order #</label>
</settings>
</column>
<column name="billing_name">
<settings>
<filter>text</filter>
<label translate="true">Bill-to Name</label>
</settings>
</column>
<column name="grand_total">
<settings>
<filter>textRange</filter>
<label translate="true">Amount</label>
</settings>
</column>
</columns>
</listing>5. Implement Keyboard Shortcuts
Add this JavaScript to create time-saving shortcuts:
require(['jquery'], function($) {
$(document).on('keydown', function(e) {
// Ctrl+Shift+P for new product
if (e.ctrlKey && e.shiftKey && e.keyCode === 80) {
window.location.href = $('#nav a[href*="product/new"]').attr('href');
}
// Ctrl+Shift+O for new order
if (e.ctrlKey && e.shiftKey && e.keyCode === 79) {
window.location.href = $('#nav a[href*="order/create"]').attr('href');
}
});
});6. Create Custom Admin Themes
Reduce eye strain with a custom admin theme. Create etc/adminhtml/theme.xml:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Magefine Dark Admin</title>
<parent>Magento/backend</parent>
<media>
<preview_image>preview.jpg</preview_image>
</media>
</theme>Then add CSS in web/css/source/_theme.less:
@primary__color: #333;
@page__background-color: #222;
@menu__background: #111;
@menu__color: #eee;
7. Bulk Action Improvements
Enhance bulk operations with this in your module's view/adminhtml/ui_component/product_listing.xml:
<massaction name="listing_massaction">
<action name="update_attributes">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">update_attributes</item>
<item name="label" xsi:type="string" translate="true">Update Attributes</item>
<item name="url" xsi:type="url" path="catalog/product_action_attribute/edit"/>
</item>
</argument>
</action>
</massaction>8. Add Custom Reports
Create focused reports for your business needs:
<?php
namespace Magefine\Custom\Block\Adminhtml\Report;
class Custom extends \Magento\Backend\Block\Widget\Grid\Container
{
protected function _construct()
{
$this->_blockGroup = 'Magefine_Custom';
$this->_controller = 'adminhtml_report_custom';
$this->_headerText = __('Custom Report');
parent::_construct();
}
}9. Implement Two-Factor Authentication
Security matters. Add 2FA with this in your etc/di.xml:
<type name="Magento\User\Model\User">
<plugin name="magefine_custom_user_2fa" type="Magefine\Custom\Plugin\User\TwoFactorAuth"/>
</type>Then create the plugin:
<?php
namespace Magefine\Custom\Plugin\User;
class TwoFactorAuth
{
public function afterAuthenticate(\Magento\User\Model\User $subject, $result)
{
if ($result) {
// Implement your 2FA logic here
}
return $result;
}
}10. Create Custom Admin Notifications
Keep your team informed:
<?php
namespace Magefine\Custom\Cron;
class AdminNotifications
{
public function execute()
{
$notification = $this->notificationFactory->create();
$notification->setTitle('Daily Summary')
->setDescription('Check today\'s sales performance')
->setUrl($this->url->getUrl('sales/'))
->setIsRead(false)
->save();
}
}Reflexiones finales
Customizing your Magento 2 panel de administración isn't just about aesthetics—it's about creating a workspace that le ayuda a work smarter, not harder. Start with one or two of these tweaks, measure the time savings, and gradually implement more basado en your team's workflow.
Remember, every minute saved in your panel de administración is a minute you can spend growing your business. Happy customizing!
Need help implementing these changes? Check out our Magento 2 extensions and hosting solutions to take your store to the next level.